From 83d5c17b36841a36681a5a57fa9c318888172124 Mon Sep 17 00:00:00 2001 From: Godwin Asuquo <41484542+godilite@users.noreply.github.com> Date: Fri, 22 Jul 2022 15:46:21 +0300 Subject: [PATCH] fix terms and condition overflow in ionia (#430) * fix terms and condition scroll * fix color issues * reuse * refactor widget --- .../cards/ionia_buy_card_detail_page.dart | 180 +++--------------- .../cards/ionia_gift_card_detail_page.dart | 100 +++------- .../ionia/widgets/ionia_alert_model.dart | 86 +++++++++ 3 files changed, 141 insertions(+), 225 deletions(-) create mode 100644 lib/src/screens/ionia/widgets/ionia_alert_model.dart diff --git a/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart b/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart index 417800687..ddc1f0f3d 100644 --- a/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart +++ b/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart @@ -1,18 +1,16 @@ import 'dart:ui'; -import 'package:cake_wallet/anypay/any_pay_payment_committed_info.dart'; import 'package:cake_wallet/core/execution_state.dart'; import 'package:cake_wallet/ionia/ionia_merchant.dart'; import 'package:cake_wallet/ionia/ionia_tip.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/ionia/widgets/confirm_modal.dart'; +import 'package:cake_wallet/src/screens/ionia/widgets/ionia_alert_model.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/alert_with_one_action.dart'; import 'package:cake_wallet/src/widgets/discount_badge.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/src/widgets/standart_list_row.dart'; import 'package:cake_wallet/typography.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/view_model/ionia/ionia_purchase_merch_view_model.dart'; @@ -225,14 +223,22 @@ class IoniaBuyGiftCardDetailPage extends BasePage { showPopUp( context: context, builder: (BuildContext context) { - return AlertWithOneAction( - alertTitle: '', - alertContent: ioniaPurchaseViewModel.ioniaMerchant.termsAndConditions, - buttonText: S.of(context).agree, - buttonAction: () => Navigator.of(context).pop(), + return IoniaAlertModal( + title: S.of(context).settings_terms_and_conditions, + content: Align( + alignment: Alignment.bottomLeft, + child: Text( + ioniaPurchaseViewModel.ioniaMerchant.termsAndConditions, + style: textMedium( + color: Theme.of(context).textTheme.display2.color, + ), + ), + ), + actionTitle: S.of(context).agree, + showCloseButton: false, + heightFactor: 0.6, ); - }, - ); + }); } Future purchaseCard(BuildContext context) async { @@ -249,68 +255,21 @@ class IoniaBuyGiftCardDetailPage extends BasePage { ) { showPopUp( 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( - merchant.usageInstructionsBak, - 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: Theme.of(context).accentTextTheme.caption.color, - textColor: Theme.of(context).primaryTextTheme.title.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, - ), - ), - ) - ], + builder: (BuildContext context) { + return IoniaAlertModal( + title: S.of(context).how_to_use_card, + content: Align( + alignment: Alignment.bottomLeft, + child: Text( + merchant.usageInstructionsBak, + style: textMedium( + color: Theme.of(context).textTheme.display2.color, ), ), - ); - }); + ), + actionTitle: S.current.send_got_it, + ); + }); } Future _presentSuccessfulInvoiceCreationPopup(BuildContext context) async { @@ -393,87 +352,6 @@ class IoniaBuyGiftCardDetailPage extends BasePage { } } -class _IoniaTransactionCommitedAlert extends StatelessWidget { - const _IoniaTransactionCommitedAlert({ - Key key, - @required this.transactionInfo, - }) : super(key: key); - - final AnyPayPaymentCommittedInfo transactionInfo; - - @override - Widget build(BuildContext context) { - return ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(30)), - child: Container( - width: 327, - height: 340, - color: Theme.of(context).accentTextTheme.title.decorationColor, - child: Material( - color: Colors.transparent, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Padding( - padding: EdgeInsets.fromLTRB(40, 20, 40, 0), - child: Text( - S.of(context).awaiting_payment_confirmation, - textAlign: TextAlign.center, - style: textMediumSemiBold( - color: Theme.of(context).accentTextTheme.display4.backgroundColor, - ), - ), - ), - Padding( - padding: EdgeInsets.only(top: 16, bottom: 8), - child: Container( - height: 1, - color: Theme.of(context).dividerColor, - ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - S.of(context).transaction_sent, - style: textMedium( - color: Theme.of(context).primaryTextTheme.title.color, - ).copyWith(fontWeight: FontWeight.w500), - ), - SizedBox(height: 20), - Text( - S.of(context).transaction_sent_notice, - style: textMedium( - color: Theme.of(context).primaryTextTheme.title.color, - ).copyWith(fontWeight: FontWeight.w500), - ), - ], - ), - ), - Padding( - padding: EdgeInsets.only(top: 16, bottom: 8), - child: Container( - height: 1, - color: Theme.of(context).dividerColor, - ), - ), - StandartListRow( - title: '${S.current.transaction_details_transaction_id}:', - value: transactionInfo.chain, - ), - StandartListRow( - title: '${S.current.view_in_block_explorer}:', - value: '${S.current.view_transaction_on} XMRChain.net'), - ], - ), - ), - ), - ); - } -} - class TipButtonGroup extends StatelessWidget { const TipButtonGroup({ Key key, diff --git a/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart b/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart index a990dcd20..56b32aedb 100644 --- a/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart +++ b/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart @@ -2,6 +2,7 @@ import 'package:cake_wallet/core/execution_state.dart'; import 'package:cake_wallet/ionia/ionia_gift_card.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; +import 'package:cake_wallet/src/screens/ionia/widgets/ionia_alert_model.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'; @@ -154,82 +155,33 @@ class IoniaGiftCardDetailPage extends BasePage { showPopUp( 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: [ + return IoniaAlertModal( + title: S.of(context).how_to_use_card, + content: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: viewModel.giftCard.usageInstructions + .map((instruction) { + return [ + Padding( + padding: EdgeInsets.all(10), + child: Text( + instruction.header, + style: textLargeSemiBold( + color: Theme.of(context).textTheme.display2.color, + ), + )), Text( - S.of(context).how_to_use_card, - style: textLargeSemiBold( - color: Theme.of(context).textTheme.body1.color, + instruction.body, + style: textMedium( + color: Theme.of(context).textTheme.display2.color, ), - ), - Align( - alignment: Alignment.bottomLeft, - child: Container( - constraints: BoxConstraints( - maxHeight: MediaQuery.of(context).size.height * 0.5), - child: SingleChildScrollView( - child: Column(children: viewModel.giftCard.usageInstructions.map((instruction) { - return [ - Padding( - padding: EdgeInsets.all(10), - child: Text( - instruction.header, - style: textLargeSemiBold( - color: Theme.of(context).textTheme.display2.color, - ), - )), - Text( - instruction.body, - style: textMedium( - color: Theme.of(context).textTheme.display2.color, - ), - ) - ]; - }).expand((e) => e).toList()) - ) - )), - SizedBox(height: 35), - PrimaryButton( - onPressed: () => Navigator.pop(context), - text: S.of(context).send_got_it, - color: Theme.of(context).accentTextTheme.caption.color, - textColor: Theme.of(context).primaryTextTheme.title.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, - ), - ), - ) - ], - ), - ), - ); + ) + ]; + }) + .expand((e) => e) + .toList()), + actionTitle: S.of(context).send_got_it, + ); }); } } diff --git a/lib/src/screens/ionia/widgets/ionia_alert_model.dart b/lib/src/screens/ionia/widgets/ionia_alert_model.dart new file mode 100644 index 000000000..abe442d8e --- /dev/null +++ b/lib/src/screens/ionia/widgets/ionia_alert_model.dart @@ -0,0 +1,86 @@ +import 'package:cake_wallet/src/widgets/alert_background.dart'; +import 'package:cake_wallet/src/widgets/primary_button.dart'; +import 'package:cake_wallet/typography.dart'; +import 'package:flutter/material.dart'; + +class IoniaAlertModal extends StatelessWidget { + const IoniaAlertModal({ + Key key, + @required this.title, + @required this.content, + @required this.actionTitle, + this.heightFactor = 0.4, + this.showCloseButton = true, + }) : super(key: key); + + final String title; + final Widget content; + final String actionTitle; + final bool showCloseButton; + final double heightFactor; + + @override + Widget build(BuildContext context) { + return AlertBackground( + child: Material( + color: Colors.transparent, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Spacer(), + 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: [ + if (title.isNotEmpty) + Text( + title, + style: textLargeSemiBold( + color: Theme.of(context).textTheme.body1.color, + ), + ), + Container( + constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * heightFactor), + child: ListView( + children: [ + content, + SizedBox(height: 35), + ], + ), + ), + PrimaryButton( + onPressed: () => Navigator.pop(context), + text: actionTitle, + color: Theme.of(context).accentTextTheme.caption.color, + textColor: Theme.of(context).primaryTextTheme.title.color, + ), + SizedBox(height: 21), + ], + ), + ), + Spacer(), + if(showCloseButton) + InkWell( + onTap: () => Navigator.pop(context), + child: Container( + margin: EdgeInsets.only(bottom: 40), + child: CircleAvatar( + child: Icon( + Icons.close, + color: Colors.black, + ), + backgroundColor: Colors.white, + ), + ), + ) + ], + ), + ), + ); + } +} \ No newline at end of file