finished refilc+ purchase page

This commit is contained in:
Kima
2024-01-07 22:20:12 +01:00
parent caee521edd
commit 8bbeb11b59
9 changed files with 1174 additions and 526 deletions

View File

@@ -1,360 +1,360 @@
import 'package:filcnaplo/api/client.dart';
import 'package:filcnaplo/icons/filc_icons.dart';
import 'package:filcnaplo/models/supporter.dart';
import 'package:filcnaplo_mobile_ui/premium/components/active_sponsor_card.dart';
import 'package:filcnaplo_mobile_ui/premium/components/github_card.dart';
import 'package:filcnaplo_mobile_ui/premium/components/github_connect_button.dart';
import 'package:filcnaplo_mobile_ui/premium/components/goal_card.dart';
import 'package:filcnaplo_mobile_ui/premium/components/plan_card.dart';
import 'package:filcnaplo_mobile_ui/premium/components/reward_card.dart';
import 'package:filcnaplo_mobile_ui/premium/components/supporters_button.dart';
import 'package:filcnaplo_mobile_ui/premium/styles/gradients.dart';
import 'package:refilc_plus/providers/premium_provider.dart';
import 'package:refilc_plus/ui/mobile/premium/activation_view/activation_view.dart';
import 'package:refilc_plus/ui/mobile/premium/upsell.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
// import 'package:filcnaplo/api/client.dart';
// import 'package:filcnaplo/icons/filc_icons.dart';
// import 'package:filcnaplo/models/supporter.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/active_sponsor_card.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/github_card.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/github_connect_button.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/goal_card.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/plan_card.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/reward_card.dart';
// import 'package:filcnaplo_mobile_ui/premium/components/supporters_button.dart';
// import 'package:filcnaplo_mobile_ui/premium/styles/gradients.dart';
// import 'package:refilc_plus/providers/premium_provider.dart';
// import 'package:refilc_plus/ui/mobile/premium/activation_view/activation_view.dart';
// import 'package:refilc_plus/ui/mobile/premium/upsell.dart';
// import 'package:flutter/material.dart';
// import 'package:flutter_svg/svg.dart';
// import 'package:provider/provider.dart';
class PremiumScreen extends StatelessWidget {
const PremiumScreen({super.key});
// class PremiumScreen extends StatelessWidget {
// const PremiumScreen({super.key});
@override
Widget build(BuildContext context) {
final middleColor = Theme.of(context).brightness == Brightness.dark
? const Color.fromARGB(255, 20, 33, 57)
: const Color.fromARGB(255, 10, 55, 140);
// @override
// Widget build(BuildContext context) {
// final middleColor = Theme.of(context).brightness == Brightness.dark
// ? const Color.fromARGB(255, 20, 33, 57)
// : const Color.fromARGB(255, 10, 55, 140);
final future = FilcAPI.getSupporters();
// final future = FilcAPI.getSupporters();
return FutureBuilder<Supporters?>(
future: future,
builder: (context, snapshot) {
return Scaffold(
body: CustomScrollView(
physics: const ClampingScrollPhysics(),
slivers: [
SliverAppBar(
surfaceTintColor: Theme.of(context).scaffoldBackgroundColor,
automaticallyImplyLeading: false,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color.fromARGB(255, 65, 51, 143),
middleColor,
],
),
),
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: const Icon(Icons.close, color: Colors.white),
),
),
],
),
SliverPadding(
padding: const EdgeInsets.only(bottom: 25.0),
sliver: SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
middleColor,
Theme.of(context).scaffoldBackgroundColor,
],
),
),
child: Row(
children: [
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 64.0),
Row(
children: [
Image.asset(
"assets/icons/ic_rounded.png",
width: 69.0,
height: 69.0,
),
const SizedBox(
width: 15.0,
),
const Text(
"reFilc+",
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 35.0,
color: Colors.white),
),
],
),
const SizedBox(height: 12.0),
const Text(
"Még több reFilc, olcsóbban, mint bármi más!*",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 25.0,
color: Colors.white),
),
const SizedBox(height: 15.0),
Text(
"Támogasd a QwIT** csapatát, és szerezz cserébe pár kényelmes jutalmat!",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
color: Colors.white.withOpacity(.8)),
),
const SizedBox(height: 25.0),
SupportersButton(supporters: future),
],
),
),
),
],
),
),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 24.0)
.add(const EdgeInsets.only(bottom: 100)),
sliver: SliverToBoxAdapter(
child: Column(
children: [
PremiumPlanCard(
icon: const Icon(FilcIcons.kupak),
title: Text("Kupak",
style: TextStyle(
foreground: GradientStyles.kupakPaint)),
gradient: GradientStyles.kupak,
price: 2,
description: const Text(
"Szabd személyre a filcet és láss részletesebb statisztikákat."),
url:
"https://github.com/sponsors/filc/sponsorships?tier_id=238453&preview=true",
active: ActiveSponsorCard.estimateLevel(
context.watch<PremiumProvider>().scopes) ==
PremiumFeatureLevel.cap,
),
const SizedBox(height: 8.0),
PremiumPlanCard(
icon: const Icon(FilcIcons.tinta),
title: Text("Tinta",
style: TextStyle(
foreground: GradientStyles.tintaPaint)),
gradient: GradientStyles.tinta,
price: 5,
description: const Text(
"Kényelmesebb órarend, asztali alkalmazás és célok kitűzése."),
url:
"https://github.com/sponsors/filc/sponsorships?tier_id=238454&preview=true",
active: ActiveSponsorCard.estimateLevel(
context.watch<PremiumProvider>().scopes) ==
PremiumFeatureLevel.ink,
),
const SizedBox(height: 12.0),
PremiumGoalCard(
progress: snapshot.data?.progress ?? 0,
target: snapshot.data?.max ?? 1),
const SizedBox(height: 12.0),
const GithubConnectButton(),
Padding(
padding: const EdgeInsets.symmetric(vertical: 14.0)
.add(const EdgeInsets.only(top: 12.0)),
child: const Row(
children: [
Icon(FilcIcons.kupak),
SizedBox(width: 12.0),
Expanded(
child: Text(
"Kupak jutalmak",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20),
),
),
],
),
),
PremiumRewardCard(
imageKey: "premium_nickname_showcase",
icon: SvgPicture.asset(
"assets/images/nickname_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Profil személyre szabás"),
description: const Text(
"Állíts be egy saját becenevet és egy profilképet (akár animáltat is!)"),
),
const SizedBox(height: 14.0),
PremiumRewardCard(
imageKey: "premium_theme_showcase",
icon: SvgPicture.asset("assets/images/theme_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Téma+"),
description: const Text(
"Válassz saját háttérszínt és kártyaszínt is, akár saját HEX-kóddal!"),
),
const SizedBox(height: 14.0),
PremiumRewardCard(
imageKey: "premium_stats_showcase",
icon: SvgPicture.asset("assets/images/stats_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Részletes jegy statisztika"),
description: const Text(
"Válassz heti, havi és háromhavi időtartam közül, és pontosan lásd, mennyi jegyed van."),
),
const SizedBox(height: 14.0),
const PremiumRewardCard(
title: Text("Még pár dolog..."),
description: Text(
"🔣\tVálassz ikon témát\n\tPrémium rang és csevegő a discord szerverünkön\n📬\tElsőbbségi segítségnyújtás"),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 14.0)
.add(const EdgeInsets.only(top: 12.0)),
child: const Row(
children: [
Icon(FilcIcons.tinta),
SizedBox(width: 12.0),
Expanded(
child: Text(
"Tinta jutalmak",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20),
),
),
],
),
),
PremiumRewardCard(
imageKey: "premium_timetable_showcase",
icon: SvgPicture.asset(
"assets/images/timetable_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Heti órarend nézet"),
description: const Text(
"Egy órarend, ami a teljes képernyődet kihasználja, csak nem olyan idegesítő, mint az eKRÉTA féle."),
),
const SizedBox(height: 14.0),
PremiumRewardCard(
imageKey: "premium_widget_showcase",
icon: SvgPicture.asset(
"assets/images/widget_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Widget"),
description: const Text(
"Mindig lásd, milyen órád lesz, a kezdőképernyőd kényelméből."),
),
const SizedBox(height: 14.0),
PremiumRewardCard(
soon: true,
imageKey: "premium_goal_showcase",
icon: SvgPicture.asset("assets/images/goal_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Cél követés"),
description: const Text(
"Add meg, mi a célod, és mi majd kiszámoljuk, hogyan juthatsz oda!"),
),
const SizedBox(height: 14.0),
PremiumRewardCard(
soon: true,
imageKey: "premium_desktop_showcase",
icon: SvgPicture.asset(
"assets/images/desktop_icon.svg",
color: Theme.of(context).iconTheme.color),
title: const Text("Asztali verzió"),
description: const Text(
"Érd el a reFilcet a gépeden is, és menekülj meg a csúnya felhasználói felületektől!"),
),
const SizedBox(height: 14.0),
const PremiumRewardCard(
title: Text("Még pár dolog..."),
description: Text(
"🖋️\tMinden kupak jutalom\n\tKorai hozzáférés új verziókhoz"),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 14.0)
.add(const EdgeInsets.only(top: 12.0)),
child: const Row(
children: [
SizedBox(width: 12.0),
Expanded(
child: Text(
"Mire vársz még?",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20),
),
),
],
),
),
GithubCard(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return const PremiumActivationView();
}));
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 14.0)
.add(const EdgeInsets.only(top: 12.0)),
child: const Row(
children: [
SizedBox(width: 12.0),
Expanded(
child: Text(
"Gyakori kérdések",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20),
),
),
],
),
),
const PremiumRewardCard(
title: Text("Mire költitek a pénzt?"),
description: Text(
"A pénz elsősorban az appstore évi \$100-os díját fedezi, a maradék a szerver a weboldal és új funkciók fejlesztésére fordítjuk."),
),
const SizedBox(height: 14.0),
const PremiumRewardCard(
title: Text("Még mindig nyílt a forráskód?"),
description: Text(
"Igen, a reFilc teljesen nyílt forráskódú, és ez így is fog maradni. A prémium funkciók forráskódjához hozzáférnek a támogatók."),
),
const SizedBox(height: 14.0),
const PremiumRewardCard(
title: Text("Hol tudok támogatni?"),
description: Text(
"A támogatáshoz szükséged van egy Github profilra, amit hozzá kell kötnöd a filc naplóhoz. A Github “Sponsors” funkciója segítségével kezeljük az támogatásod."),
),
],
),
),
),
],
),
);
});
}
}
// return FutureBuilder<Supporters?>(
// future: future,
// builder: (context, snapshot) {
// return Scaffold(
// body: CustomScrollView(
// physics: const ClampingScrollPhysics(),
// slivers: [
// SliverAppBar(
// surfaceTintColor: Theme.of(context).scaffoldBackgroundColor,
// automaticallyImplyLeading: false,
// flexibleSpace: Container(
// decoration: BoxDecoration(
// gradient: LinearGradient(
// begin: Alignment.topCenter,
// end: Alignment.bottomCenter,
// colors: [
// const Color.fromARGB(255, 65, 51, 143),
// middleColor,
// ],
// ),
// ),
// ),
// actions: [
// Padding(
// padding: const EdgeInsets.only(right: 8.0),
// child: IconButton(
// onPressed: () {
// Navigator.of(context).pop();
// },
// icon: const Icon(Icons.close, color: Colors.white),
// ),
// ),
// ],
// ),
// SliverPadding(
// padding: const EdgeInsets.only(bottom: 25.0),
// sliver: SliverToBoxAdapter(
// child: Container(
// decoration: BoxDecoration(
// gradient: LinearGradient(
// begin: Alignment.topCenter,
// end: Alignment.bottomCenter,
// colors: [
// middleColor,
// Theme.of(context).scaffoldBackgroundColor,
// ],
// ),
// ),
// child: Row(
// children: [
// Expanded(
// child: Padding(
// padding:
// const EdgeInsets.symmetric(horizontal: 24.0),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// const SizedBox(height: 64.0),
// Row(
// children: [
// Image.asset(
// "assets/icons/ic_rounded.png",
// width: 69.0,
// height: 69.0,
// ),
// const SizedBox(
// width: 15.0,
// ),
// const Text(
// "reFilc+",
// style: TextStyle(
// fontWeight: FontWeight.w800,
// fontSize: 35.0,
// color: Colors.white),
// ),
// ],
// ),
// const SizedBox(height: 12.0),
// const Text(
// "Még több reFilc, olcsóbban, mint bármi más!*",
// style: TextStyle(
// fontWeight: FontWeight.w600,
// fontSize: 25.0,
// color: Colors.white),
// ),
// const SizedBox(height: 15.0),
// Text(
// "Támogasd a QwIT** csapatát, és szerezz cserébe pár kényelmes jutalmat!",
// style: TextStyle(
// fontWeight: FontWeight.w500,
// fontSize: 20,
// color: Colors.white.withOpacity(.8)),
// ),
// const SizedBox(height: 25.0),
// SupportersButton(supporters: future),
// ],
// ),
// ),
// ),
// ],
// ),
// ),
// ),
// ),
// SliverPadding(
// padding: const EdgeInsets.symmetric(horizontal: 24.0)
// .add(const EdgeInsets.only(bottom: 100)),
// sliver: SliverToBoxAdapter(
// child: Column(
// children: [
// // PremiumPlanCard(
// // icon: const Icon(FilcIcons.kupak),
// // title: Text("Kupak",
// // style: TextStyle(
// // foreground: GradientStyles.kupakPaint)),
// // gradient: GradientStyles.kupak,
// // price: 2,
// // description: const Text(
// // "Szabd személyre a filcet és láss részletesebb statisztikákat."),
// // url:
// // "https://github.com/sponsors/filc/sponsorships?tier_id=238453&preview=true",
// // active: ActiveSponsorCard.estimateLevel(
// // context.watch<PremiumProvider>().scopes) ==
// // PremiumFeatureLevel.cap,
// // ),
// // const SizedBox(height: 8.0),
// // PremiumPlanCard(
// // icon: const Icon(FilcIcons.tinta),
// // title: Text("Tinta",
// // style: TextStyle(
// // foreground: GradientStyles.tintaPaint)),
// // gradient: GradientStyles.tinta,
// // price: 5,
// // description: const Text(
// // "Kényelmesebb órarend, asztali alkalmazás és célok kitűzése."),
// // url:
// // "https://github.com/sponsors/filc/sponsorships?tier_id=238454&preview=true",
// // active: ActiveSponsorCard.estimateLevel(
// // context.watch<PremiumProvider>().scopes) ==
// // PremiumFeatureLevel.ink,
// // ),
// const SizedBox(height: 12.0),
// PremiumGoalCard(
// progress: snapshot.data?.progress ?? 0,
// target: snapshot.data?.max ?? 1),
// const SizedBox(height: 12.0),
// const GithubConnectButton(),
// Padding(
// padding: const EdgeInsets.symmetric(vertical: 14.0)
// .add(const EdgeInsets.only(top: 12.0)),
// child: const Row(
// children: [
// Icon(FilcIcons.kupak),
// SizedBox(width: 12.0),
// Expanded(
// child: Text(
// "Kupak jutalmak",
// style: TextStyle(
// fontWeight: FontWeight.w500,
// fontSize: 20),
// ),
// ),
// ],
// ),
// ),
// PremiumRewardCard(
// imageKey: "premium_nickname_showcase",
// icon: SvgPicture.asset(
// "assets/images/nickname_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Profil személyre szabás"),
// description: const Text(
// "Állíts be egy saját becenevet és egy profilképet (akár animáltat is!)"),
// ),
// const SizedBox(height: 14.0),
// PremiumRewardCard(
// imageKey: "premium_theme_showcase",
// icon: SvgPicture.asset("assets/images/theme_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Téma+"),
// description: const Text(
// "Válassz saját háttérszínt és kártyaszínt is, akár saját HEX-kóddal!"),
// ),
// const SizedBox(height: 14.0),
// PremiumRewardCard(
// imageKey: "premium_stats_showcase",
// icon: SvgPicture.asset("assets/images/stats_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Részletes jegy statisztika"),
// description: const Text(
// "Válassz heti, havi és háromhavi időtartam közül, és pontosan lásd, mennyi jegyed van."),
// ),
// const SizedBox(height: 14.0),
// const PremiumRewardCard(
// title: Text("Még pár dolog..."),
// description: Text(
// "🔣\tVálassz ikon témát\n✨\tPrémium rang és csevegő a discord szerverünkön\n📬\tElsőbbségi segítségnyújtás"),
// ),
// Padding(
// padding: const EdgeInsets.symmetric(vertical: 14.0)
// .add(const EdgeInsets.only(top: 12.0)),
// child: const Row(
// children: [
// Icon(FilcIcons.tinta),
// SizedBox(width: 12.0),
// Expanded(
// child: Text(
// "Tinta jutalmak",
// style: TextStyle(
// fontWeight: FontWeight.w500,
// fontSize: 20),
// ),
// ),
// ],
// ),
// ),
// PremiumRewardCard(
// imageKey: "premium_timetable_showcase",
// icon: SvgPicture.asset(
// "assets/images/timetable_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Heti órarend nézet"),
// description: const Text(
// "Egy órarend, ami a teljes képernyődet kihasználja, csak nem olyan idegesítő, mint az eKRÉTA féle."),
// ),
// const SizedBox(height: 14.0),
// PremiumRewardCard(
// imageKey: "premium_widget_showcase",
// icon: SvgPicture.asset(
// "assets/images/widget_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Widget"),
// description: const Text(
// "Mindig lásd, milyen órád lesz, a kezdőképernyőd kényelméből."),
// ),
// const SizedBox(height: 14.0),
// PremiumRewardCard(
// soon: true,
// imageKey: "premium_goal_showcase",
// icon: SvgPicture.asset("assets/images/goal_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Cél követés"),
// description: const Text(
// "Add meg, mi a célod, és mi majd kiszámoljuk, hogyan juthatsz oda!"),
// ),
// const SizedBox(height: 14.0),
// PremiumRewardCard(
// soon: true,
// imageKey: "premium_desktop_showcase",
// icon: SvgPicture.asset(
// "assets/images/desktop_icon.svg",
// color: Theme.of(context).iconTheme.color),
// title: const Text("Asztali verzió"),
// description: const Text(
// "Érd el a reFilcet a gépeden is, és menekülj meg a csúnya felhasználói felületektől!"),
// ),
// const SizedBox(height: 14.0),
// const PremiumRewardCard(
// title: Text("Még pár dolog..."),
// description: Text(
// "🖋️\tMinden kupak jutalom\n✨\tKorai hozzáférés új verziókhoz"),
// ),
// Padding(
// padding: const EdgeInsets.symmetric(vertical: 14.0)
// .add(const EdgeInsets.only(top: 12.0)),
// child: const Row(
// children: [
// SizedBox(width: 12.0),
// Expanded(
// child: Text(
// "Mire vársz még?",
// style: TextStyle(
// fontWeight: FontWeight.w500,
// fontSize: 20),
// ),
// ),
// ],
// ),
// ),
// GithubCard(
// onPressed: () {
// Navigator.of(context)
// .push(MaterialPageRoute(builder: (context) {
// return const PremiumActivationView();
// }));
// },
// ),
// Padding(
// padding: const EdgeInsets.symmetric(vertical: 14.0)
// .add(const EdgeInsets.only(top: 12.0)),
// child: const Row(
// children: [
// SizedBox(width: 12.0),
// Expanded(
// child: Text(
// "Gyakori kérdések",
// style: TextStyle(
// fontWeight: FontWeight.w500,
// fontSize: 20),
// ),
// ),
// ],
// ),
// ),
// const PremiumRewardCard(
// title: Text("Mire költitek a pénzt?"),
// description: Text(
// "A pénz elsősorban az appstore évi \$100-os díját fedezi, a maradék a szerver a weboldal és új funkciók fejlesztésére fordítjuk."),
// ),
// const SizedBox(height: 14.0),
// const PremiumRewardCard(
// title: Text("Még mindig nyílt a forráskód?"),
// description: Text(
// "Igen, a reFilc teljesen nyílt forráskódú, és ez így is fog maradni. A prémium funkciók forráskódjához hozzáférnek a támogatók."),
// ),
// const SizedBox(height: 14.0),
// const PremiumRewardCard(
// title: Text("Hol tudok támogatni?"),
// description: Text(
// "A támogatáshoz szükséged van egy Github profilra, amit hozzá kell kötnöd a filc naplóhoz. A Github “Sponsors” funkciója segítségével kezeljük az támogatásod."),
// ),
// ],
// ),
// ),
// ),
// ],
// ),
// );
// });
// }
// }