Implement gift card details screen (#408)

* Implement gift card details screen

lib/di.dart

@@ -3,6 +3,8 @@ import 'package:cake_wallet/entities/parse_address_from_domain.dart';
 import 'package:cake_wallet/entities/wake_lock.dart';
 import 'package:cake_wallet/ionia/ionia_anypay.dart';
 import 'package:cake_wallet/ionia/ionia_category.dart';
+import 'package:cake_wallet/ionia/ionia_gift_card.dart';
+import 'package:cake_wallet/src/screens/ionia/cards/ionia_gift_card_detail_page.dart';
 import 'package:cake_wallet/view_model/ionia/ionia_auth_view_model.dart';
 import 'package:cake_wallet/view_model/ionia/ionia_buy_card_view_model.dart';
 import 'package:cake_wallet/view_model/ionia/ionia_filter_view_model.dart';
@@ -711,6 +713,10 @@ Future setup(
      return IoniaBuyGiftCardDetailPage(getIt.get<IoniaMerchPurchaseViewModel>(param1: amount, param2: merchant));
   });
 
+  getIt.registerFactoryParam<IoniaGiftCardDetailPage, IoniaGiftCard, void>((IoniaGiftCard giftCard, _) {
+     return IoniaGiftCardDetailPage(giftCard);
+  });
+
   getIt.registerFactoryParam<IoniaCustomTipPage, List, void>((List args, _) {
     final amount = args.first as String;
     final merchant = args.last as IoniaMerchant;

lib/router.dart

@@ -8,6 +8,7 @@ import 'package:cake_wallet/src/screens/buy/pre_order_page.dart';
 import 'package:cake_wallet/src/screens/ionia/cards/ionia_account_cards_page.dart';
 import 'package:cake_wallet/src/screens/ionia/cards/ionia_account_page.dart';
 import 'package:cake_wallet/src/screens/ionia/cards/ionia_custom_tip_page.dart';
+import 'package:cake_wallet/src/screens/ionia/cards/ionia_gift_card_detail_page.dart';
 import 'package:cake_wallet/src/screens/order_details/order_details_page.dart';
 import 'package:cake_wallet/src/screens/pin_code/pin_code_widget.dart';
 import 'package:cake_wallet/src/screens/restore/restore_from_backup_page.dart';
@@ -446,6 +447,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
       final args = settings.arguments as List;
       return CupertinoPageRoute<void>(builder: (_) =>getIt.get<IoniaCustomTipPage>(param1: args));
 
+    case Routes.ioniaGiftCardDetailPage:
+      final args = settings.arguments as List;
+      return CupertinoPageRoute<void>(builder: (_) => getIt.get<IoniaGiftCardDetailPage>(param1: args.first));
+
     default:
       return MaterialPageRoute<void>(
           builder: (_) => Scaffold(

lib/routes.dart

@@ -72,5 +72,5 @@ class Routes {
   static const ioniaAccountPage = 'ionia_account_page';
   static const ioniaAccountCardsPage = 'ionia_account_cards_page';
   static const ioniaCustomTipPage = 'ionia_custom_tip_page';
-
+  static const ioniaGiftCardDetailPage = '/ionia_gift_card_detail_page';
 }

lib/src/screens/ionia/cards/ionia_account_cards_page.dart

@@ -1,5 +1,6 @@
 import 'package:cake_wallet/ionia/ionia_gift_card.dart';
 import 'package:cake_wallet/ionia/ionia_merchant.dart';
+import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/ionia/widgets/card_item.dart';
 import 'package:cake_wallet/typography.dart';
@@ -147,6 +148,11 @@ class _IoniaCardListView extends StatelessWidget {
               return Padding(
                 padding: const EdgeInsets.only(bottom: 16),
                 child: CardItem(
+                  onTap: () => Navigator.pushNamed(
+                    context,
+                    Routes.ioniaGiftCardDetailPage,
+                    arguments: [merchant],
+                  ),
                   title: merchant.legalName,
                   backgroundColor: Theme.of(context).accentTextTheme.display4.backgroundColor.withOpacity(0.1),
                   discount: 0,

lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart

@@ -0,0 +1,173 @@
+import 'package:cake_wallet/ionia/ionia_gift_card.dart';
+import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/src/screens/ionia/widgets/ionia_tile.dart';
+import 'package:cake_wallet/src/screens/ionia/widgets/text_icon_button.dart';
+import 'package:cake_wallet/src/widgets/alert_background.dart';
+import 'package:cake_wallet/src/widgets/primary_button.dart';
+import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
+import 'package:cake_wallet/typography.dart';
+import 'package:cake_wallet/utils/show_pop_up.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:cake_wallet/generated/i18n.dart';
+
+class IoniaGiftCardDetailPage extends BasePage {
+  IoniaGiftCardDetailPage(this.merchant);
+
+  final IoniaGiftCard merchant;
+
+  @override
+  Widget leading(BuildContext context) {
+    if (ModalRoute.of(context).isFirst) {
+      return null;
+    }
+
+    final _backButton = Icon(
+      Icons.arrow_back_ios,
+      color: Theme.of(context).primaryTextTheme.title.color,
+      size: 16,
+    );
+    return Padding(
+      padding: const EdgeInsets.only(left: 10.0),
+      child: SizedBox(
+        height: 37,
+        width: 37,
+        child: ButtonTheme(
+          minWidth: double.minPositive,
+          child: FlatButton(
+              highlightColor: Colors.transparent,
+              splashColor: Colors.transparent,
+              padding: EdgeInsets.all(0),
+              onPressed: () => onClose(context),
+              child: _backButton),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget middle(BuildContext context) {
+    return Text(
+      merchant.legalName,
+      style: textLargeSemiBold(color: Theme.of(context).accentTextTheme.display4.backgroundColor),
+    );
+  }
+
+  @override
+  Widget body(BuildContext context) {
+    return ScrollableWithBottomSection(
+      contentPadding: EdgeInsets.all(24),
+      content: Column(
+        children: [
+          if (merchant.barcodeUrl != null && merchant.barcodeUrl.isNotEmpty)
+            Padding(
+              padding: const EdgeInsets.symmetric(
+                horizontal: 24.0,
+                vertical: 24,
+              ),
+              child: SizedBox(height: 96, width: double.infinity, child: Image.network(merchant.barcodeUrl)),
+            ),
+          SizedBox(height: 24),
+          IoniaTile(
+            title: S.of(context).gift_card_number,
+            subTitle: merchant.cardNumber,
+          ),
+          Divider(height: 30),
+          IoniaTile(
+            title: S.of(context).pin_number,
+            subTitle: merchant.cardPin ?? '',
+          ),
+          Divider(height: 30),
+          IoniaTile(
+            title: S.of(context).amount,
+            subTitle: merchant.remainingAmount.toString() ?? '0',
+          ),
+          Divider(height: 50),
+          TextIconButton(
+            label: S.of(context).how_to_use_card,
+            onTap: () => _showHowToUseCard(context, merchant),
+          ),
+        ],
+      ),
+      bottomSection: Padding(
+          padding: EdgeInsets.only(bottom: 12),
+          child: LoadingPrimaryButton(
+            isLoading: false,
+            onPressed: () {},
+            text: S.of(context).mark_as_redeemed,
+            color: Theme.of(context).accentTextTheme.body2.color,
+            textColor: Colors.white,
+          )),
+    );
+  }
+
+  void _showHowToUseCard(
+    BuildContext context,
+    IoniaGiftCard merchant,
+  ) {
+    showPopUp<void>(
+        context: context,
+        builder: (BuildContext context) {
+          return AlertBackground(
+            child: Material(
+              color: Colors.transparent,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  SizedBox(height: 10),
+                  Container(
+                    padding: EdgeInsets.only(top: 24, left: 24, right: 24),
+                    margin: EdgeInsets.all(24),
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).backgroundColor,
+                      borderRadius: BorderRadius.circular(30),
+                    ),
+                    child: Column(
+                      children: [
+                        Text(
+                          S.of(context).how_to_use_card,
+                          style: textLargeSemiBold(
+                            color: Theme.of(context).textTheme.body1.color,
+                          ),
+                        ),
+                        SizedBox(height: 24),
+                        Align(
+                          alignment: Alignment.bottomLeft,
+                          child: Text(
+                            '',
+                            style: textMedium(
+                              color: Theme.of(context).textTheme.display2.color,
+                            ),
+                          ),
+                        ),
+                        SizedBox(height: 35),
+                        PrimaryButton(
+                          onPressed: () => Navigator.pop(context),
+                          text: S.of(context).send_got_it,
+                          color: Color.fromRGBO(233, 242, 252, 1),
+                          textColor: Theme.of(context).textTheme.display2.color,
+                        ),
+                        SizedBox(height: 21),
+                      ],
+                    ),
+                  ),
+                  InkWell(
+                    onTap: () => Navigator.pop(context),
+                    child: Container(
+                      margin: EdgeInsets.only(bottom: 40),
+                      child: CircleAvatar(
+                        child: Icon(
+                          Icons.close,
+                          color: Colors.black,
+                        ),
+                        backgroundColor: Colors.white,
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          );
+        });
+  }
+}

res/values/strings_en.arb

@@ -620,5 +620,5 @@
   "awaiting_payment_confirmation": "Awaiting payment confirmation",
   "transaction_sent_notice": "If the screen doesn’t proceed after 1 minute, check a block explorer and your email.",
   "agree": "Agree",
-  "in_store": "In Store"
+  "in_store": "In Store",
 }