From b79b7f9bdecf22a235d9fe7a2146b926ba6d9db7 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 8 Apr 2022 00:10:39 +0800
Subject: [PATCH] Re-enable 'Purchases' page

Closes 1284

## Notes
- Re-used the Library page, but disabled the [Downloads | Purchases] tabs.
- Access from Settings > Accounts > Purchases
---
 static/app-strings.json              |  1 +
 ui/component/settingAccount/view.jsx |  4 ++
 ui/constants/pageTitles.js           |  3 +-
 ui/page/fileListDownloaded/view.jsx  | 72 +++++++++++++++-------------
 ui/page/library/view.jsx             |  2 +-
 5 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 0dbe4e431..6820997e5 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -934,6 +934,7 @@
   "Discover Channels": "Discover Channels",
   "Downloads": "Downloads",
   "Purchases": "Purchases",
+  "View your purchased content.": "View your purchased content.",
   "No purchases found.": "No purchases found.",
   "Drop here to publish!": "Drop here to publish!",
   "Trending for %tagName%": "Trending for %tagName%",
diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
index 59279ea4d..fa10a2c9f 100644
--- a/ui/component/settingAccount/view.jsx
+++ b/ui/component/settingAccount/view.jsx
@@ -103,6 +103,10 @@ export default function SettingAccount(props: Props) {
                 />
               </SettingsRow>
             )}
+
+            <SettingsRow title={__('Purchases')} subtitle={__('View your purchased content.')}>
+              <Button button="inverse" label={__('Manage')} icon={ICONS.ARROW_RIGHT} navigate={`/$/${PAGES.LIBRARY}`} />
+            </SettingsRow>
           </>
         }
       />
diff --git a/ui/constants/pageTitles.js b/ui/constants/pageTitles.js
index 030cb7094..d685fe911 100644
--- a/ui/constants/pageTitles.js
+++ b/ui/constants/pageTitles.js
@@ -16,12 +16,12 @@ export const PAGE_TITLE = {
   [PAGES.FINANCE]: 'Finance 2.0',
   [PAGES.GAMING]: 'Gaming',
   [PAGES.GENERAL]: 'Cheese',
-  [PAGES.SPORTS]: 'Sports',
   [PAGES.LAB]: 'Lab',
   [PAGES.MOVIES]: 'Movies',
   [PAGES.MUSIC]: 'Music',
   [PAGES.NEWS]: 'News & Politics',
   [PAGES.POP_CULTURE]: 'Pop Culture',
+  [PAGES.SPORTS]: 'Sports',
   [PAGES.TECH]: 'Tech',
   [PAGES.UNIVERSE]: 'Universe',
   [PAGES.WILD_WEST]: 'Wild West',
@@ -38,6 +38,7 @@ export const PAGE_TITLE = {
   [PAGES.FYP]: 'Recommended Videos (Alpha)',
   [PAGES.HELP]: 'Help',
   [PAGES.INVITE]: 'Invite',
+  [PAGES.LIBRARY]: 'Purchases',
   [PAGES.LISTS]: 'Lists',
   [PAGES.LIVESTREAM]: 'Go Live on Odysee',
   [PAGES.LIVESTREAM_CURRENT]: 'Live (Experimental)',
diff --git a/ui/page/fileListDownloaded/view.jsx b/ui/page/fileListDownloaded/view.jsx
index 2eb7be828..55fc8c1c7 100644
--- a/ui/page/fileListDownloaded/view.jsx
+++ b/ui/page/fileListDownloaded/view.jsx
@@ -31,6 +31,8 @@ type Props = {
 const VIEW_DOWNLOADS = 'view_download';
 const VIEW_PURCHASES = 'view_purchases';
 
+const ENABLE_DOWNLOADS_TAB = false;
+
 function FileListDownloaded(props: Props) {
   const {
     history,
@@ -57,39 +59,29 @@ function FileListDownloaded(props: Props) {
   return (
     <>
       <div className="section__header--actions">
-        <div className="section__actions--inline">
-          <Button
-            icon={ICONS.LIBRARY}
-            button="alt"
-            label={__('Downloads')}
-            className={classnames(`button-toggle`, {
-              'button-toggle--active': viewMode === VIEW_DOWNLOADS,
-            })}
-            onClick={() => setViewMode(VIEW_DOWNLOADS)}
-          />
-          <Button
-            icon={ICONS.PURCHASED}
-            button="alt"
-            label={__('Purchases')}
-            className={classnames(`button-toggle`, {
-              'button-toggle--active': viewMode === VIEW_PURCHASES,
-            })}
-            onClick={() => setViewMode(VIEW_PURCHASES)}
-          />
-          {loading && <Spinner type="small" />}
-        </div>
-
-        <Form onSubmit={() => {}} className="wunderbar--inline">
-          <Icon icon={ICONS.SEARCH} />
-          <FormField
-            className="wunderbar__input--inline"
-            onChange={handleInputChange}
-            value={query}
-            type="text"
-            name="query"
-            placeholder={__('Search')}
-          />
-        </Form>
+        {ENABLE_DOWNLOADS_TAB && (
+          <div className="section__actions--inline">
+            <Button
+              icon={ICONS.LIBRARY}
+              button="alt"
+              label={__('Downloads')}
+              className={classnames(`button-toggle`, {
+                'button-toggle--active': viewMode === VIEW_DOWNLOADS,
+              })}
+              onClick={() => setViewMode(VIEW_DOWNLOADS)}
+            />
+            <Button
+              icon={ICONS.PURCHASED}
+              button="alt"
+              label={__('Purchases')}
+              className={classnames(`button-toggle`, {
+                'button-toggle--active': viewMode === VIEW_PURCHASES,
+              })}
+              onClick={() => setViewMode(VIEW_PURCHASES)}
+            />
+            {loading && <Spinner type="small" />}
+          </div>
+        )}
       </div>
       {IS_WEB && viewMode === VIEW_DOWNLOADS ? (
         <div className="main--empty">
@@ -108,6 +100,20 @@ function FileListDownloaded(props: Props) {
       ) : (
         <div>
           <ClaimList
+            header={<h1 className="section__title">{__('Purchases')}</h1>}
+            headerAltControls={
+              <Form onSubmit={() => {}} className="wunderbar--inline">
+                <Icon icon={ICONS.SEARCH} />
+                <FormField
+                  className="wunderbar__input--inline"
+                  onChange={handleInputChange}
+                  value={query}
+                  type="text"
+                  name="query"
+                  placeholder={__('Search')}
+                />
+              </Form>
+            }
             renderProperties={() => null}
             empty={
               viewMode === VIEW_PURCHASES && !query ? (
diff --git a/ui/page/library/view.jsx b/ui/page/library/view.jsx
index edaf57aab..d6320d491 100644
--- a/ui/page/library/view.jsx
+++ b/ui/page/library/view.jsx
@@ -31,7 +31,7 @@ function LibraryPage(props: Props) {
   }, [doPurchaseList, page]);
 
   return (
-    <Page>
+    <Page noFooter noSideNavigation settingsPage backout={{ title: __('Purchases'), backLabel: __('Back') }}>
       {loading && !hasDownloads && (
         <div className="main--empty">
           <Spinner delayed />