From 3c8e7d13e09551a8a3b8a143c1865307518d3382 Mon Sep 17 00:00:00 2001
From: akinwale <akinwale@gmail.com>
Date: Fri, 25 May 2018 08:16:01 +0100
Subject: [PATCH] enable purchases for paid content (#133)

---
 app/src/page/file/view.js     |  4 ++-
 app/src/redux/actions/file.js | 46 +++++++++++++++++++++++------------
 app/src/styles/filePage.js    | 16 ++++++++++++
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 4df31452..d5ee3487 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -14,8 +14,9 @@ import {
 } from 'react-native';
 import Colors from '../../styles/colors';
 import ChannelPage from '../channel';
-import FileItemMedia from '../../component/fileItemMedia';
 import FileDownloadButton from '../../component/fileDownloadButton';
+import FileItemMedia from '../../component/fileItemMedia';
+import FilePrice from '../../component/filePrice';
 import MediaPlayer from '../../component/mediaPlayer';
 import UriBar from '../../component/uriBar';
 import Video from 'react-native-video';
@@ -182,6 +183,7 @@ class FilePage extends React.PureComponent {
               <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
             {isPlayable && !this.state.mediaLoaded && <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />}
             {!completed && !canLoadMedia && <FileDownloadButton uri={uri} style={filePageStyle.downloadButton} />}
+            {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}
           </View>
           {canLoadMedia && <View style={playerBgStyle} />}
           {canLoadMedia && <MediaPlayer fileInfo={fileInfo}
diff --git a/app/src/redux/actions/file.js b/app/src/redux/actions/file.js
index 0a1461c5..871f1ee5 100644
--- a/app/src/redux/actions/file.js
+++ b/app/src/redux/actions/file.js
@@ -1,12 +1,15 @@
 import {
     ACTIONS,
     Lbry,
+    doNotify,
+    formatCredits,
     selectBalance,
     makeSelectCostInfoForUri,
     makeSelectFileInfoForUri,
+    makeSelectMetadataForUri,
     selectDownloadingByOutpoint,
 } from 'lbry-redux';
-import { NativeModules } from 'react-native';
+import { Alert, NativeModules } from 'react-native';
 
 const DOWNLOAD_POLL_INTERVAL = 250;
 
@@ -169,8 +172,10 @@ export function doLoadVideo(uri) {
             data: { uri },
           });
 
-          console.log(`File timeout for uri ${uri}`);
-          //dispatch(doOpenModal(MODALS.FILE_TIMEOUT, { uri }));
+          dispatch(doNotify({
+            message: `File timeout for uri ${uri}`,
+            displayType: ['toast']
+          }));
         } else {
           dispatch(doDownloadFile(uri, streamInfo));
         }
@@ -182,12 +187,10 @@ export function doLoadVideo(uri) {
           data: { uri },
         });
         
-        console.log(`Failed to download ${uri}`);
-        /*dispatch(
-          doAlertError(
-            `Failed to download ${uri}, please try again. If this problem persists, visit https://lbry.io/faq/support for support.`
-          )
-        );*/
+        dispatch(doNotify({
+          message: `Failed to download ${uri}, please try again. If this problem persists, visit https://lbry.io/faq/support for support.`,
+          displayType: ['toast']
+        }));
       });
   };
 }
@@ -197,13 +200,23 @@ export function doPurchaseUri(uri, specificCostInfo) {
     const state = getState();
     const balance = selectBalance(state);
     const fileInfo = makeSelectFileInfoForUri(uri)(state);
+    const metadata = makeSelectMetadataForUri(uri)(state);
+    const title = metadata ? metadata.title : uri;
     const downloadingByOutpoint = selectDownloadingByOutpoint(state);
     const alreadyDownloading = fileInfo && !!downloadingByOutpoint[fileInfo.outpoint];
 
     function attemptPlay(cost, instantPurchaseMax = null) {
       if (cost > 0 && (!instantPurchaseMax || cost > instantPurchaseMax)) {
-        //dispatch(doOpenModal(MODALS.AFFIRM_PURCHASE, { uri }));
-        console.log('Affirm purchase...');
+        // display alert
+        const formattedCost = formatCredits(cost, 2);
+        const unit = cost === 1 ? 'credit' : 'credits';
+        Alert.alert('Confirm purchase',
+          `This will purchase "${title}" for ${formattedCost} ${unit}`,
+          [
+            { text: 'OK', onPress: () => dispatch(doLoadVideo(uri)) },
+            { text: 'Cancel', style: 'cancel' }
+          ],
+          { cancelable: true });
       } else {
         dispatch(doLoadVideo(uri));
       }
@@ -231,15 +244,18 @@ export function doPurchaseUri(uri, specificCostInfo) {
 
     if (cost > balance) {
       dispatch(doSetPlayingUri(null));
-      //dispatch(doOpenModal(MODALS.INSUFFICIENT_CREDITS));
+      dispatch(doNotify({
+        message: 'Insufficient credits',
+        displayType: ['toast']
+      }));
       Promise.resolve();
       return;
     }
 
-    if (cost === 0/* || !makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED)(state)*/) {
+    attemptPlay(cost);
+    /*if (cost === 0 || !makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED)(state)) {
       attemptPlay(cost);
-    }
-    /*} else {
+    } else {
       const instantPurchaseMax = makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_MAX)(state);
       if (instantPurchaseMax.currency === 'LBC') {
         attemptPlay(cost, instantPurchaseMax.amount);
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index aa9c1aaa..9ae2c197 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -100,6 +100,22 @@ const filePageStyle = StyleSheet.create({
     right: 0,
     bottom: 0
   },
+  filePriceContainer: {
+    backgroundColor: '#61fcd8',
+    justifyContent: 'center',
+    position: 'absolute',
+    right: 16,
+    top: 16,
+    width: 56,
+    height: 24,
+    borderRadius: 4 
+  },
+  filePriceText: {
+    fontFamily: 'Metropolis-Bold',
+    fontSize: 12,
+    textAlign: 'center',
+    color: '#0c604b'
+  },
   actions: {
     paddingLeft: 16,
     paddingRight: 16,