created payout details popover

2024-12-25 14:22:14 +03:00 · 2019-01-14 17:50:18 +03:00 · 2019-01-14 17:50:18 +03:00 · 265e510496
commit 265e510496
parent 36c0795284
6 changed files with 179 additions and 55 deletions
--- a/src/components/upvote/container/upvoteContainer.js
+++ b/src/components/upvote/container/upvoteContainer.js
@ -7,6 +7,10 @@ import { setUpvotePercent } from '../../../realm/realm';
 // Services and Actions
 import { setUpvotePercent as upvoteAction } from '../../../redux/actions/applicationActions';

+// Utils
+import parseToken from '../../../utils/parseToken';
+import { getTimeFromNow } from '../../../utils/time';
+
 // Component
 import UpvoteView from '../view/upvoteView';

@ -42,13 +46,18 @@ class UpvoteContainer extends PureComponent {
      fetchPost,
      isLoggedIn,
      isShowPayoutValue,
-      upvotePercent,
      pinCode,
+      upvotePercent,
    } = this.props;
    let author;
+    let authorPayout;
+    let curationPayout;
    let isDecinedPayout;
    let isVoted;
+    let payoutDate;
+    let pendingPayout;
    let permlink;
+    let promotedPayout;
    let totalPayout;

    if (content) {
@ -57,11 +66,20 @@ class UpvoteContainer extends PureComponent {
      totalPayout = content.total_payout;
      isDecinedPayout = content.is_declined_payout;
      ({ permlink } = content);
+      pendingPayout = parseToken(content.pending_payout_value).toFixed(3);
+      promotedPayout = parseToken(content.promoted).toFixed(3);
+      authorPayout = parseToken(content.total_payout_value).toFixed(3);
+      curationPayout = parseToken(content.curator_payout_value).toFixed(3);
+      payoutDate = getTimeFromNow(
+        content.last_payout === '1970-01-01T00:00:00' ? content.cashout_time : content.last_payout,
+      );
    }

    return (
      <UpvoteView
        author={author}
+        authorPayout={authorPayout}
+        curationPayout={curationPayout}
        currentAccount={currentAccount}
        fetchPost={fetchPost}
        handleSetUpvotePercent={this._setUpvotePercent}
@ -69,8 +87,11 @@ class UpvoteContainer extends PureComponent {
        isLoggedIn={isLoggedIn}
        isShowPayoutValue={isShowPayoutValue}
        isVoted={isVoted}
+        payoutDate={payoutDate}
+        pendingPayout={pendingPayout}
        permlink={permlink}
        pinCode={pinCode}
+        promotedPayout={promotedPayout}
        totalPayout={totalPayout}
        upvotePercent={upvotePercent}
      />
--- a/src/components/upvote/view/upvoteStyles.js
+++ b/src/components/upvote/view/upvoteStyles.js
@ -4,13 +4,15 @@ export default EStyleSheet.create({
  upvoteButton: {
    flexDirection: 'row',
    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  upvoteIcon: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
    fontSize: 20,
    color: '$primaryBlue',
  },
-  popover: {
+  popoverSlider: {
    flexDirection: 'row',
    width: '$deviceWidth - 20',
    height: 48,
@ -18,6 +20,13 @@ export default EStyleSheet.create({
    paddingHorizontal: 16,
    backgroundColor: '$primaryBackgroundColor',
  },
+  popoverDetails: {
+    flexDirection: 'row',
+    height: 100,
+    borderRadius: 20,
+    paddingHorizontal: 26,
+    backgroundColor: '$primaryBackgroundColor',
+  },
  track: {
    height: 2,
    borderRadius: 1,
@ -53,6 +62,13 @@ export default EStyleSheet.create({
    alignItems: 'center',
  },
  arrow: {
+    borderTopColor: '$primaryBackgroundColor',
+    marginLeft: 25,
+  },
+  payoutTextButton: {
+    alignSelf: 'center',
+  },
+  hideArrow: {
    borderTopColor: 'transparent',
  },
  overlay: {
@ -68,4 +84,8 @@ export default EStyleSheet.create({
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
  },
+  detailsText: {
+    color: '$primaryDarkGray',
+    fontSize: 10,
+  },
 });
--- a/src/components/upvote/view/upvoteView.js
+++ b/src/components/upvote/view/upvoteView.js
@ -1,14 +1,15 @@
 import React, { Component, Fragment } from 'react';
 import {
-  View, TouchableOpacity, ActivityIndicator, Text, Alert,
+  View, TouchableOpacity, Text, Alert,
 } from 'react-native';
+import { injectIntl } from 'react-intl';
 import { Popover, PopoverController } from 'react-native-modal-popover';
 import Slider from 'react-native-slider';
-// Constants

 // Components
 import { Icon } from '../../icon';
 import { PulseAnimation } from '../../animations';
+import { TextButton } from '../../buttons';
 // STEEM
 import { upvoteAmount, vote } from '../../../providers/steem/dsteem';

@ -28,6 +29,7 @@ class UpvoteView extends Component {
      isVoting: false,
      isVoted: props.isVoted,
      amount: '0.00000',
+      isShowDetails: false,
    };
  }

@ -75,7 +77,12 @@ class UpvoteView extends Component {

  _upvoteContent = async () => {
    const {
-      author, currentAccount, fetchPost, handleSetUpvotePercent, permlink, pinCode,
+      author,
+      currentAccount,
+      fetchPost,
+      handleSetUpvotePercent,
+      permlink,
+      pinCode,
    } = this.props;
    const { sliderValue } = this.state;

@ -90,13 +97,7 @@ class UpvoteView extends Component {

    const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 : 0;

-    vote(
-      currentAccount,
-      pinCode,
-      author,
-      permlink,
-      weight,
-    )
+    vote(currentAccount, pinCode, author, permlink, weight)
      .then(() => {
        this.setState(
          {
@ -119,11 +120,31 @@ class UpvoteView extends Component {
      });
  };

+  _handleOnPopoverClose = () => {
+    this.popoverOnClose = setTimeout(() => {
+      this.setState({ isShowDetails: false }, () => {
+        clearTimeout(this.popoverOnClose);
+      });
+    }, 300);
+  };
+
  render() {
-    const { isDecinedPayout, isLoggedIn, isShowPayoutValue, totalPayout } = this.props;
    const {
-      isVoting, amount, sliderValue, isVoted,
+      isDecinedPayout,
+      isLoggedIn,
+      isShowPayoutValue,
+      totalPayout,
+      pendingPayout,
+      promotedPayout,
+      authorPayout,
+      curationPayout,
+      payoutDate,
+      intl,
+    } = this.props;
+    const {
+      isVoting, amount, sliderValue, isVoted, isShowDetails,
    } = this.state;
+
    let iconName = 'ios-arrow-dropup';
    let iconType;

@ -169,57 +190,98 @@ class UpvoteView extends Component {
                    name={iconName}
                  />
                )}
-                {isShowPayoutValue && (
-                <Text style={[styles.payoutValue, isDecinedPayout && styles.declinedPayout]}>{`$${_totalPayout}`}</Text>
-                )}
              </Fragment>
            </TouchableOpacity>
+            <View style={styles.payoutTextButton}>
+              {isShowPayoutValue && (
+              <TextButton
+                style={styles.payoutTextButton}
+                textStyle={[styles.payoutValue, isDecinedPayout && styles.declinedPayout]}
+                text={`$${_totalPayout}`}
+                onPress={() => {
+                  openPopover();
+                  this.setState({ isShowDetails: true });
+                }}
+              />
+              )}
+            </View>

            <Popover
-              contentStyle={styles.popover}
-              arrowStyle={styles.arrow}
+              contentStyle={isShowDetails ? styles.popoverDetails : styles.popoverSlider}
+              arrowStyle={isShowDetails ? styles.arrow : styles.hideArrow}
              backgroundStyle={styles.overlay}
              visible={popoverVisible}
-              onClose={closePopover}
+              onClose={() => {
+                closePopover();
+                this._handleOnPopoverClose();
+              }}
              fromRect={popoverAnchorRect}
              placement="top"
              supportedOrientations={['portrait', 'landscape']}
            >
              <View style={styles.popoverWrapper}>
-                <TouchableOpacity
-                  onPress={() => {
-                    closePopover();
-                    this._upvoteContent();
-                  }}
-                  style={styles.upvoteButton}
-                >
-                  {isVoting ? (
-                    <ActivityIndicator />
-                  ) : (
-                    <Icon
-                      size={20}
-                      style={[styles.upvoteIcon, { color: '#007ee5' }]}
-                      active={!isLoggedIn}
-                      iconType={iconType}
-                      name={iconName}
+                {isShowDetails ? (
+                  <View>
+                    <Text style={styles.detailsText}>
+                      {`${intl.formatMessage({
+                        id: 'payout.promoted',
+                      })} $${promotedPayout}`}
+                    </Text>
+                    <Text style={styles.detailsText}>
+                      {`${intl.formatMessage({
+                        id: 'payout.potential_payout',
+                      })} $${pendingPayout}`}
+                    </Text>
+                    <Text style={styles.detailsText}>
+                      {`${intl.formatMessage({
+                        id: 'payout.author_payout',
+                      })} $${authorPayout}`}
+                    </Text>
+                    <Text style={styles.detailsText}>
+                      {`${intl.formatMessage({
+                        id: 'payout.curation_payout',
+                      })} $${curationPayout}`}
+                    </Text>
+                    <Text style={styles.detailsText}>
+                      {`${intl.formatMessage({
+                        id: 'payout.payout_date',
+                      })} ${payoutDate}`}
+                    </Text>
+                  </View>
+                ) : (
+                  <Fragment>
+                    <TouchableOpacity
+                      onPress={() => {
+                closePopover();
+                this._upvoteContent();
+              }}
+                      style={styles.upvoteButton}
+                    >
+                      <Icon
+                size={20}
+                style={[styles.upvoteIcon, { color: '#007ee5' }]}
+                active={!isLoggedIn}
+                iconType={iconType}
+                name={iconName}
+              />
+                    </TouchableOpacity>
+                    <Text style={styles.amount}>{_amount}</Text>
+                    <Slider
+                      style={styles.slider}
+                      minimumTrackTintColor="#357ce6"
+                      trackStyle={styles.track}
+                      thumbStyle={styles.thumb}
+                      thumbTintColor="#007ee5"
+                      value={sliderValue}
+                      onValueChange={(value) => {
+                this.setState({ sliderValue: value }, () => {
+                  this._calculateEstimatedAmount();
+                });
+              }}
                    />
-                  )}
-                </TouchableOpacity>
-                <Text style={styles.amount}>{_amount}</Text>
-                <Slider
-                  style={styles.slider}
-                  minimumTrackTintColor="#357ce6"
-                  trackStyle={styles.track}
-                  thumbStyle={styles.thumb}
-                  thumbTintColor="#007ee5"
-                  value={sliderValue}
-                  onValueChange={(value) => {
-                    this.setState({ sliderValue: value }, () => {
-                      this._calculateEstimatedAmount();
-                    });
-                  }}
-                />
-                <Text style={styles.percent}>{_percent}</Text>
+                    <Text style={styles.percent}>{_percent}</Text>
+                  </Fragment>
+                )}
              </View>
            </Popover>
          </Fragment>
@ -229,4 +291,4 @@ class UpvoteView extends Component {
  }
 }

-export default UpvoteView;
+export default injectIntl(UpvoteView);
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@ -172,5 +172,12 @@
    "already_logged": "You are already logged in, please try to add another account",
    "invalid_credentials": "Invalid credentials, please check and try again",
    "unknow_error": "Unknown error, please contact us at support@esteem.app"
+  },
+  "payout": {
+    "potential_payout": "Potential Payout",
+    "promoted": "Promoted",
+    "author_payout": "Author Payout",
+    "curation_payout": "Curation Payout",
+    "payout_date": "Payout"
  }
 }
--- a/src/config/locales/ru-RU.json
+++ b/src/config/locales/ru-RU.json
@ -172,5 +172,12 @@
    "already_logged": "Вы уже вошли, пожалуйста, попробуйте добавить другой аккаунт",
    "invalid_credentials": "Некорректные данные, пожалуйста, проверьте и повторите снова",
    "unknow_error": "Неизвестная ошибка, пожалуйста, напишите на support@esteem.app"
+  },
+  "payout": {
+    "potential_payout": "Потенциальная выплата",
+    "promoted": "Продвижение",
+    "author_payout": "Автору",
+    "curation_payout": "Кураторам",
+    "payout_date": "Выплата"
  }
 }
--- a/src/config/locales/tr-TR.json
+++ b/src/config/locales/tr-TR.json
@ -172,5 +172,12 @@
    "already_logged": "You are already logged in, please try to add another account",
    "invalid_credentials": "Invalid credentials, please check and try again",
    "unknow_error": "Unknown error, please contact us at support@esteem.app"
+  },
+  "payout": {
+    "potential_payout": "Tahmini Ödeme",
+    "promoted": "Sponsor Ödemeleri",
+    "author_payout": "Yazar Ödemeleri",
+    "curation_payout": "Küratör Ödemeleri",
+    "payout_date": "Ödeme"
  }
 }