First Iteration of Yearly Purchase

assets/langs/en.yaml

@@ -241,7 +241,5 @@ purchase_screen:
   desc: 'GitJournal is completely open source and is the result of significant development work. It has no venture capital or corporation backing. Your support directly sustains development.
 
 
-Paying a monthly subscription helps you support development and gives you access to
+GitJournal operates on a "pay what you want model". No matter what you pay you will get access to all the Pro features.'
-a number of "Pro" only features. We operate on a "pay what you want model". No matter what you pay
-you will get access to all the Pro features.'
   restore: Restore Purchase

lib/screens/purchase_screen.dart

@@ -30,7 +30,12 @@ class PurchaseScreen extends StatelessWidget {
           style: Theme.of(context).textTheme.bodyText2,
         ),
         const SizedBox(height: 32.0),
+        PurchaseCards(
+          children: [
             const MonthlyRentalWidget(),
+            const YearlyPurchaseWidget(),
+          ],
+        ),
         const SizedBox(height: 32.0),
         Row(
           children: [
@@ -78,23 +83,22 @@ class MonthlyRentalWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     var textTheme = Theme.of(context).textTheme;
 
-    return Card(
+    return PurchaseCard(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(15.0),
-      ),
-      child: Padding(
-        padding: const EdgeInsets.fromLTRB(16.0, 32.0, 16.0, 32.0),
       child: Column(
         children: [
-            Text("Monthly Subscription", style: textTheme.headline5),
+          // TODO: Translate this
+          Text("Monthly Rental", style: textTheme.headline5),
           const SizedBox(height: 32.0),
           PurchaseWidget(
             skus: _generateSkus(),
             defaultSku: "sku_monthly_min3",
             timePeriod: "Month",
           ),
+          const SizedBox(height: 32.0),
+          const Text(
+              "After 12 months of rental or after paying the min yearly amount, you will automatically get all the benefits of a Yearly Purchase."),
         ],
-        ),
+        mainAxisAlignment: MainAxisAlignment.start,
       ),
     );
   }
@@ -117,26 +121,21 @@ class YearlyPurchaseWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     var textTheme = Theme.of(context).textTheme;
 
-    return Card(
+    return PurchaseCard(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(15.0),
-      ),
-      child: Padding(
-        padding: const EdgeInsets.fromLTRB(16.0, 32.0, 16.0, 32.0),
       child: Column(
         children: [
           Text("Yearly Purchase", style: textTheme.headline5),
           const SizedBox(height: 32.0),
           PurchaseWidget(
             skus: _generateSkus(),
-              defaultSku: "sku_sub_yearly_0",
+            defaultSku: "sku_sub_yearly_1",
             timePeriod: "Year",
           ),
-            const SizedBox(height: 8.0),
+          const SizedBox(height: 32.0),
           const Text(
-                "Enables all Pro features currently in GitJournal and new ones added the next year. These features will be yours forever.")
+              "Enables all Pro features currently in GitJournal and new features added in the following 12 months. These features will be yours forever.")
         ],
-        ),
+        mainAxisAlignment: MainAxisAlignment.start,
       ),
     );
   }
@@ -149,3 +148,75 @@ class YearlyPurchaseWidget extends StatelessWidget {
     return list;
   }
 }
+
+class PurchaseCard extends StatelessWidget {
+  final Widget child;
+
+  PurchaseCard({@required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    var mediaQuery = MediaQuery.of(context);
+
+    return Container(
+      width: mediaQuery.size.width * 0.80,
+      child: Card(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(15.0),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
+          child: child,
+        ),
+      ),
+    );
+  }
+}
+
+class PurchaseCards extends StatefulWidget {
+  final List<Widget> children;
+
+  PurchaseCards({@required this.children});
+
+  @override
+  _PurchaseCardsState createState() => _PurchaseCardsState();
+}
+
+class _PurchaseCardsState extends State<PurchaseCards> {
+  @override
+  Widget build(BuildContext context) {
+    return _ScrollViewWithoutAnim(
+      scrollDirection: Axis.horizontal,
+      child: IntrinsicHeight(
+        child: Row(
+          children: widget.children,
+          mainAxisSize: MainAxisSize.min,
+        ),
+      ),
+    );
+  }
+}
+
+class _ScrollViewWithoutAnim extends StatelessWidget {
+  final Widget child;
+  final Axis scrollDirection;
+
+  _ScrollViewWithoutAnim({
+    @required this.child,
+    this.scrollDirection,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return NotificationListener<OverscrollIndicatorNotification>(
+      onNotification: (OverscrollIndicatorNotification overScroll) {
+        overScroll.disallowGlow();
+        return false;
+      },
+      child: SingleChildScrollView(
+        scrollDirection: scrollDirection,
+        child: child,
+      ),
+    );
+  }
+}

lib/widgets/purchase_widget.dart

@@ -265,7 +265,7 @@ class _PurchaseWidgetState extends State<PurchaseWidget> {
           ],
           mainAxisSize: MainAxisSize.max,
         ),
-        const SizedBox(height: 16.0),
+        const SizedBox(height: 32.0),
         PurchaseButton(_selectedProduct, widget.timePeriod),
       ],
       mainAxisAlignment: MainAxisAlignment.spaceAround,