From 1fa3ce4e50a3cbcafb9f608e58a01c537763d74c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 4 May 2020 12:55:10 -0400
Subject: [PATCH] basic checkout page prototype

---
 ui/component/router/view.jsx  |  2 ++
 ui/constants/pages.js         |  1 +
 ui/page/checkoutPage/index.js |  2 ++
 ui/page/checkoutPage/view.jsx | 26 ++++++++++++++++++++++++++
 ui/scss/component/_card.scss  |  4 ++++
 5 files changed, 35 insertions(+)
 create mode 100644 ui/page/checkoutPage/index.js
 create mode 100644 ui/page/checkoutPage/view.jsx

diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 03da65f1e..e178c8df5 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -35,6 +35,7 @@ import TopPage from 'page/top';
 import Welcome from 'page/welcome';
 import CreatorDashboard from 'page/creatorDashboard';
 import RewardsVerifyPage from 'page/rewardsVerify';
+import CheckoutPage from 'page/checkoutPage';
 import { parseURI } from 'lbry-redux';
 import { SITE_TITLE, WELCOME_VERSION } from 'config';
 
@@ -174,6 +175,7 @@ function AppRouter(props: Props) {
       <Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
       <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
       <Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
+      <Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
 
       <PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
       <PrivateRoute {...props} path={`/$/${PAGES.PUBLISHED}`} component={FileListPublished} />
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 5e646c0b8..612f1afe1 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -35,3 +35,4 @@ exports.EMBED = 'embed';
 exports.TOP = 'top';
 exports.WELCOME = 'welcome';
 exports.CREATOR_DASHBOARD = 'dashboard';
+exports.CHECKOUT = 'checkout';
diff --git a/ui/page/checkoutPage/index.js b/ui/page/checkoutPage/index.js
new file mode 100644
index 000000000..7b7809fef
--- /dev/null
+++ b/ui/page/checkoutPage/index.js
@@ -0,0 +1,2 @@
+import CheckoutPage from './view';
+export default CheckoutPage;
diff --git a/ui/page/checkoutPage/view.jsx b/ui/page/checkoutPage/view.jsx
new file mode 100644
index 000000000..d7a2747a3
--- /dev/null
+++ b/ui/page/checkoutPage/view.jsx
@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+import Page from 'component/page';
+import Button from 'component/button';
+import Card from 'component/common/card';
+
+export default function CheckoutPage() {
+  return (
+    <Page authPage className="main--auth-page">
+      <Card
+        title={__('Checkout')}
+        subtitle={__('Your card contains 1 item.')}
+        body={
+          <div className="card--inline card--section card--highlighted">
+            <strong>{__('lbry.tv Premium - 1 month')}</strong>
+          </div>
+        }
+        actions={
+          <div className="section__actions">
+            <Button button="primary" label={__('Checkout')} />
+          </div>
+        }
+      />
+    </Page>
+  );
+}
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 5ac4ec099..0ea6fc37e 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -38,6 +38,10 @@
   }
 }
 
+.card--highlighted {
+  background-color: var(--color-card-background-highlighted);
+}
+
 .card--claim-preview-wrap {
   @extend .card;
   margin: var(--spacing-xlarge) 0;