diff --git a/assets/images/img-expand-purchase.png b/assets/images/img-expand-purchase.png new file mode 100644 index 0000000..a9fcd66 Binary files /dev/null and b/assets/images/img-expand-purchase.png differ diff --git a/lib/application/assets/path_assets.dart b/lib/application/assets/path_assets.dart index 9b760ae..c4ba310 100644 --- a/lib/application/assets/path_assets.dart +++ b/lib/application/assets/path_assets.dart @@ -104,6 +104,8 @@ class PathAssets { 'assets/images/img-payment-success.png'; static const String frameSignature = 'assets/images/frame-signature.png'; static const String imgFinish = 'assets/images/img-finish.png'; + static const String imgExpandPurchase = + 'assets/images/img-expand-purchase.png'; static const String imgEmptyTransaction = 'assets/images/img-empty-transaction.png'; diff --git a/lib/features/transaction/view/subscribe_detail_view.dart b/lib/features/transaction/view/subscribe_detail_view.dart new file mode 100644 index 0000000..6b9a43d --- /dev/null +++ b/lib/features/transaction/view/subscribe_detail_view.dart @@ -0,0 +1,391 @@ +import 'package:cims_apps/application/assets/path_assets.dart'; +import 'package:cims_apps/application/component/button/back_button_view.dart'; +import 'package:cims_apps/application/component/image/image_view.dart'; +import 'package:cims_apps/application/theme/color_palette.dart'; +import 'package:cims_apps/core/utils/size_config.dart'; +import 'package:flutter/material.dart'; + +class SubscribeDetailView extends StatelessWidget { + const SubscribeDetailView({Key? key}) : super(key: key); + + Widget _stepper( + TextTheme textTheme, { + required String description, + String? date, + time, + bool isActive = false, + bool isDone = false, + bool isLast = false, + }) { + return Container( + padding: const EdgeInsets.only(top: 8.0, left: 16.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + children: [ + Padding( + padding: const EdgeInsets.only(left: 2.0, top: 8.0), + child: Icon( + Icons.circle_rounded, + size: 10, + color: isDone + ? ColorPalette.primary + : isActive + ? ColorPalette.primary + : ColorPalette.slate400, + ), + ), + if (!isLast) + ConstrainedBox( + constraints: BoxConstraints.expand( + height: SizeConfig.width * .2, width: 0.0), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: VerticalDivider( + color: + isDone ? ColorPalette.primary : ColorPalette.slate400, + thickness: 2.0, + ), + ), + ), + ], + ), + Padding( + padding: const EdgeInsets.only(left: 16.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Text( + description, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: isDone + ? Colors.black87 + : isActive + ? ColorPalette.primary + : ColorPalette.slate400, + ), + ), + ), + isDone + ? Row( + children: [ + Text(date ?? ''), + const Padding( + padding: EdgeInsets.symmetric(horizontal: 4.0), + child: Icon( + Icons.circle, + size: 6, + color: ColorPalette.slate400, + ), + ), + Text(time ?? ''), + ], + ) + : const SizedBox(), + ], + ), + ) + ], + ), + ); + } + + Widget _listProduct(BuildContext context) { + TextTheme textTheme = Theme.of(context).textTheme; + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), + child: Column( + children: [ + Row( + children: [ + ImageView( + image: PathAssets.imgProduct, + width: SizeConfig.width * .1, + ), + Padding( + padding: const EdgeInsets.only(left: 8.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Gemilang Dana Kas Maxima', + style: textTheme.headlineSmall, + ), + Container( + padding: const EdgeInsets.symmetric( + horizontal: 8.0, vertical: 2.0), + decoration: BoxDecoration( + color: ColorPalette.purple100, + border: Border.all( + width: 1, + color: ColorPalette.purple, + ), + borderRadius: + const BorderRadius.all(Radius.circular(24)), + ), + child: const Text( + 'Money Market', + style: TextStyle( + color: ColorPalette.purple500, + ), + )), + ], + ), + ), + ], + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Text('Investment Amount'), + Text( + 'Rp 2.000.000', + style: textTheme.headlineSmall, + ), + ], + ), + ), + const Divider( + color: ColorPalette.slate200, + ), + ], + ), + ); + } + + Widget _cardContent(BuildContext context) { + TextTheme textTheme = Theme.of(context).textTheme; + List mySteps = const [ + { + 'desc': 'Payment Being Verified', + 'date': '07 Feb 2024 ', + 'time': '21:01', + 'isActive': false, + 'isDone': true, + 'isLast': false, + }, + { + 'desc': 'Successful Payment', + 'date': '07 Feb 2024 ', + 'time': '21:01', + 'isActive': true, + 'isDone': false, + 'isLast': false, + }, + { + 'desc': 'Investment Manager Verification', + 'date': '07 Feb 2024 ', + 'time': '21:01', + 'isActive': false, + 'isDone': false, + 'isLast': false, + }, + { + 'desc': 'Successful Purchase', + 'date': '07 Feb 2024 ', + 'time': '21:01', + 'isActive': false, + 'isDone': false, + 'isLast': true, + }, + ]; + + return SingleChildScrollView( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Icon(Icons.access_time, color: ColorPalette.slate400), + const Padding( + padding: EdgeInsets.symmetric(horizontal: 8.0), + child: Text('Waiting for Payment'), + ), + Text('23:56:42', style: textTheme.headlineSmall), + ], + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 16.0), + child: Text('Purchase Details', style: textTheme.headlineSmall), + ), + Container( + margin: const EdgeInsets.symmetric(vertical: 8.0), + padding: const EdgeInsets.only(bottom: 16.0), + decoration: BoxDecoration( + color: Colors.white, + border: Border.all(width: 1, color: ColorPalette.slate200), + borderRadius: const BorderRadius.all(Radius.circular(12)), + ), + child: ExpansionTile( + shape: ShapeBorder.lerp( + const StadiumBorder(side: BorderSide.none), + InputBorder.none, + 0), + title: Row( + children: [ + ImageView( + image: PathAssets.iconEducation, + width: SizeConfig.width * .08, + ), + const Padding( + padding: EdgeInsets.only(left: 8.0), + child: Text('Education'), + ), + ], + ), + subtitle: Padding( + padding: const EdgeInsets.only(left: 40.0), + child: Text('3 Subscriptions', style: textTheme.bodyMedium), + ), + children: [ + _listProduct(context), + _listProduct(context), + ], + ), + ), + ...mySteps.map((e) { + return _stepper( + textTheme, + description: '${e['desc']}', + date: e['date'], + time: e['time'], + isActive: e['isActive'], + isDone: e['isDone'], + isLast: e['isLast'], + ); + }), + Container( + margin: const EdgeInsets.symmetric(vertical: 8.0), + // padding: const EdgeInsets.only(bottom: 16.0), + decoration: BoxDecoration( + color: Colors.white, + border: Border.all(width: 1, color: ColorPalette.slate200), + borderRadius: const BorderRadius.all(Radius.circular(12)), + ), + child: ExpansionTile( + shape: ShapeBorder.lerp( + const StadiumBorder(side: BorderSide.none), + InputBorder.none, + 0), + title: Row( + children: [ + const Expanded( + child: Text('When Is My Purchase Complete?')), + ImageView( + image: PathAssets.imgExpandPurchase, + width: SizeConfig.width * .15, + ), + ], + ))), + ], + ), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SizedBox( + child: Stack( + children: [ + const ImageView(image: PathAssets.imgDashboardAccount), + Column( + children: [ + SizedBox(height: SizeConfig.height * .05), + Padding( + padding: const EdgeInsets.all(16.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + BackButtonView( + onPress: () => Navigator.pop(context), + ), + const Padding( + padding: EdgeInsets.symmetric(horizontal: 80.0), + child: Text( + 'Subscribe Detail', + style: TextStyle( + fontSize: 18, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + ImageView( + image: PathAssets.imgProduct, + width: SizeConfig.width * .08, + ), + const Padding( + padding: EdgeInsets.only(left: 8.0), + child: Text( + 'Shopping Pay', + style: TextStyle( + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + ), + ], + ), + const Padding( + padding: EdgeInsets.only(top: 8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'No.Subscribe : ', + style: TextStyle( + fontWeight: FontWeight.normal, + color: Colors.white, + ), + ), + Text( + 'PI9393084SDMI1', + style: TextStyle( + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + ], + ), + ), + Expanded( + child: Container( + color: Colors.transparent, + width: SizeConfig.width, + padding: const EdgeInsets.only(top: 32.0), + child: Container( + margin: const EdgeInsets.only(top: 32.0), + padding: const EdgeInsets.only(top: 32.0), + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(24), + topRight: Radius.circular(24)), + ), + child: _cardContent(context)), + ), + ), + ], + ) + ], + ), + ), + ); + } +} diff --git a/lib/features/transaction/view/waiting_view.dart b/lib/features/transaction/view/waiting_view.dart index decce6a..e64dc2a 100644 --- a/lib/features/transaction/view/waiting_view.dart +++ b/lib/features/transaction/view/waiting_view.dart @@ -1,8 +1,10 @@ import 'package:cims_apps/application/assets/path_assets.dart'; import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart'; import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart'; +import 'package:cims_apps/core/route/route.dart'; import 'package:cims_apps/core/utils/number_formatter.dart'; import 'package:cims_apps/core/utils/string_utils.dart'; +import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart'; import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; @@ -19,7 +21,9 @@ class WaitingView extends StatelessWidget { children: [ provider.listWaitingTransaction.isNotEmpty ? CardTransactionView( - onTap: () {}, + onTap: () { + routePush(context, page: const SubscribeDetailView()); + }, iconPath: PathAssets.iconEducation, type: 'Education', amount: NumberFormatter.numberCurrency(