diff --git a/src/components/index.js b/src/components/index.js index 62d54a14c..001c417b1 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -50,6 +50,7 @@ import Logo from './logo/logo'; import PostButton from './postButton/postButtonView'; import ProfileEditForm from './profileEditForm/profileEditFormView'; import ScaleSlider from './scaleSlider/scaleSliderView'; +import { ProductItemLine } from './productItemLine/productItemLineView'; // View import { Comment } from './comment'; @@ -66,7 +67,7 @@ import { WalletDetails } from './walletDetails'; import PostBoost from './postBoost/postBoostView'; import Profile from './profile/profileView'; import Promote from './promote/promoteView'; -import SpinGame from './spinGame/spinGameView'; +import { SpinGame } from './spinGame/spinGameView'; // Basic UI Elements import { @@ -147,6 +148,7 @@ export { PostListItem, PostPlaceHolder, Posts, + ProductItemLine, Profile, ProfileEditForm, ProfileSummary, diff --git a/src/components/mainButton/view/mainButtonStyles.js b/src/components/mainButton/view/mainButtonStyles.js index 4c2cf0ff4..843df2d4c 100644 --- a/src/components/mainButton/view/mainButtonStyles.js +++ b/src/components/mainButton/view/mainButtonStyles.js @@ -26,7 +26,7 @@ export default EStyleSheet.create({ alignSelf: 'center', fontSize: 14, paddingLeft: 10, - paddingRight: 20, + paddingRight: 10, }, secondText: { fontWeight: 'bold', diff --git a/src/components/mainButton/view/mainButtonView.js b/src/components/mainButton/view/mainButtonView.js index a04a0ec99..cd395fdcc 100644 --- a/src/components/mainButton/view/mainButtonView.js +++ b/src/components/mainButton/view/mainButtonView.js @@ -41,7 +41,9 @@ class MainButton extends Component { _handleOnPress = () => { const { onPress } = this.props; - if (onPress) onPress(); + if (onPress) { + onPress(); + } }; _getBody = () => { @@ -57,12 +59,14 @@ class MainButton extends Component { {source ? ( ) : ( - + iconName && ( + + ) )} {text} @@ -92,7 +96,7 @@ class MainButton extends Component { this._handleOnPress()} + onPress={this._handleOnPress} style={[ styles.touchable, isDisable && styles.disableTouchable, diff --git a/src/screens/boost/screen/boostScreenStyles.js b/src/components/productItemLine/productItemLineStyles.js similarity index 94% rename from src/screens/boost/screen/boostScreenStyles.js rename to src/components/productItemLine/productItemLineStyles.js index 61a5eae61..d226ee46b 100644 --- a/src/screens/boost/screen/boostScreenStyles.js +++ b/src/components/productItemLine/productItemLineStyles.js @@ -1,10 +1,11 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ - wrapper: { + buttonWrapper: { + minWidth: '$deviceWidth / 2.4', + flexDirection: 'row', + justifyContent: 'flex-end', flex: 1, - position: 'absolute', - top: '$deviceHeight / 3', }, boostLine: { flexDirection: 'row', @@ -14,16 +15,12 @@ export default EStyleSheet.create({ button: { marginVertical: 12, paddingHorizontal: 18, + justifyContent: 'center', + alignItems: 'center', }, buttonContent: { flexDirection: 'row', }, - buttonWrapper: { - minWidth: '$deviceWidth / 2.4', - flexDirection: 'row', - justifyContent: 'flex-end', - flex: 1, - }, buttonText: { color: '$pureWhite', fontSize: 14, diff --git a/src/components/productItemLine/productItemLineView.js b/src/components/productItemLine/productItemLineView.js new file mode 100644 index 000000000..191433d5c --- /dev/null +++ b/src/components/productItemLine/productItemLineView.js @@ -0,0 +1,59 @@ +import React from 'react'; +import { View, Text } from 'react-native'; +import get from 'lodash/get'; +import { useIntl } from 'react-intl'; + +// Components +import { MainButton, Icon } from '..'; + +import styles from './productItemLineStyles'; + +// TODO: move to translation +const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' }; + +const ProductItemLineView = ({ disabled, handleOnButtonPress, product, title }) => { + const intl = useIntl(); + + return ( + + {_renderDeal(product)} + + handleOnButtonPress(get(product, 'productId'))} + height={50} + isDisable={disabled} + isLoading={false} + > + + {title} + + + + + + + + + {get(product, 'localizedPrice', null) && ( + {get(product, 'localizedPrice', 0)} + )} + + + ); +}; + +const _renderDeal = item => { + if (DEALS[item.productId]) { + return ( + + {DEALS[item.productId]} + + + ); + } + + return null; +}; + +export { ProductItemLineView as ProductItemLine }; diff --git a/src/components/spinGame/spinGameStyles.js b/src/components/spinGame/spinGameStyles.js index 6218027e0..69055c443 100644 --- a/src/components/spinGame/spinGameStyles.js +++ b/src/components/spinGame/spinGameStyles.js @@ -29,40 +29,11 @@ export default EStyleSheet.create({ position: 'absolute', width: '$deviceWidth', height: 320, - left: -120, - top: -8, + left: -150, + top: 20, right: 0, zIndex: 999, }, - buttonContent: { - flexDirection: 'row', - }, - buttonWrapper: { - minWidth: '$deviceWidth / 2.4', - flexDirection: 'row', - justifyContent: 'flex-end', - flex: 1, - }, - buttonText: { - color: '$pureWhite', - fontSize: 14, - fontWeight: 'bold', - alignSelf: 'center', - minWidth: 70, - textAlign: 'center', - }, - buttonIconWrapper: { - backgroundColor: '$pureWhite', - borderRadius: 20, - width: 24, - height: 24, - }, - button: { - marginVertical: 12, - paddingHorizontal: 18, - marginTop: 50, - }, - descriptionWrapper: { backgroundColor: '$primaryDarkBlue', width: 75, @@ -95,4 +66,19 @@ export default EStyleSheet.create({ position: 'absolute', left: -22, }, + productWrapper: { + flex: 0.8, + alignItems: 'center', + }, + spinButton: { + width: 150, + justifyContent: 'center', + alignItems: 'center', + }, + nextDate: { + marginTop: 50, + color: '$primaryDarkGray', + fontSize: 16, + fontWeight: '600', + }, }); diff --git a/src/components/spinGame/spinGameView.js b/src/components/spinGame/spinGameView.js index c994d170e..cfd374eac 100644 --- a/src/components/spinGame/spinGameView.js +++ b/src/components/spinGame/spinGameView.js @@ -1,116 +1,100 @@ -import React, { PureComponent, Fragment } from 'react'; -import { injectIntl } from 'react-intl'; +import React, { useState, Fragment } from 'react'; import { Image, Text, View } from 'react-native'; -import get from 'lodash/get'; +import moment from 'moment'; +import { useIntl } from 'react-intl'; // Components -import { BoostIndicatorAnimation, MainButton, Icon, BasicHeader } from '..'; - +import { BoostIndicatorAnimation, MainButton, BasicHeader, ProductItemLine } from '..'; import ESTM_TAGS from '../../assets/estmTags.png'; // Styles import styles from './spinGameStyles'; -class SpinGameView extends PureComponent { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ +const SpinGameView = ({ + gameRight, + score, + isLoading, + spinProduct, + isProcessing, + buyItem, + nextDate, + startGame, +}) => { + const intl = useIntl(); + const [isSpinning, setIsSpinning] = useState(false); - constructor(props) { - super(props); - this.state = { - isSpinning: false, - }; - } - - componentDidMount() { - const { getItems } = this.props; - getItems(['499spins']); - } - - _handleOnSpinPress = () => { - const { startGame } = this.props; + const _handleOnSpinPress = () => { startGame('spin'); this.setState({ isSpinning: true, }); - setTimeout(() => { - this.setState({ isSpinning: false }); - }, 8000); + this.spinTimeout = setTimeout(() => { + clearTimeout(this.spinTimeout); + setIsSpinning(false); + }, 8 * 1000); }; - _buySpinRight = () => { - alert('buy me'); - }; + return ( + + + + + {!isSpinning && !isLoading && ( + + {gameRight} + + {intl.formatMessage({ id: 'free_estm.spin_right' })} + + + )} + + + {!isSpinning && !isLoading && gameRight > 0 && ( + + )} + - render() { - const { intl, gameRight, score, isLoading, spinProduct } = this.props; - const { isSpinning } = this.state; - - return ( - - - - - {!isSpinning && !isLoading && ( + {!isSpinning && score > 0 && ( + - {gameRight} - Spin Left + {`${score} ESTM`} + - )} - - - {!isSpinning && !isLoading && gameRight > 0 && ( - - )} - - - {!isSpinning && score > 0 && ( - + + )} + + + {!isSpinning && !isLoading && ( + + {gameRight > 0 ? ( + + ) : ( - {`${score} ESTM`} - - - - )} - - - {!isSpinning && !isLoading && ( - - 0 ? this._handleOnSpinPress : this._buySpinRight} - > - - - {intl.formatMessage({ - id: gameRight > 0 ? 'free_estm.button' : 'free_estm.get_spin', - })} - - {gameRight <= 0 && ( - - - - )} - - - - - {get(spinProduct, 'localizedPrice', null) && ( - {get(spinProduct, 'localizedPrice', 0)} - )} - + {spinProduct.map(product => ( + buyItem(id)} + /> + ))} + {`${intl.formatMessage({ + id: 'free_estm.timer_text', + })} ${moment(moment(nextDate).diff(moment())).format('H:m')}`} )} - - + + )} - - ); - } -} + + + ); +}; -export default injectIntl(SpinGameView); +export { SpinGameView as SpinGame }; diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 23bf2795c..c2c6c6618 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -336,7 +336,8 @@ "free_estm": { "title": "Free ESTM", "button": "SPIN & WIN", - "get_spin": "5 SPIN", + "get_spin": "5 SPINS", + "spin_right": "Spin Left", "timer_text": "Next free spin in" }, "promote": { diff --git a/src/containers/inAppPurchaseContainer.js b/src/containers/inAppPurchaseContainer.js index 7973df352..852c8367e 100644 --- a/src/containers/inAppPurchaseContainer.js +++ b/src/containers/inAppPurchaseContainer.js @@ -48,6 +48,7 @@ class InAppPurchaseContainer extends Component { const { currentAccount: { name }, intl, + fetchData, } = this.props; this.purchaseUpdateSubscription = purchaseUpdatedListener(purchase => { @@ -70,6 +71,10 @@ class InAppPurchaseContainer extends Component { RNIap.consumePurchaseAndroid(token); } this.setState({ isProcessing: false }); + + if (fetchData) { + fetchData(); + } }) .catch(err => bugsnag.notify(err, report => { @@ -157,7 +162,7 @@ class InAppPurchaseContainer extends Component { isLoading, isProcessing, getItems: this._getItems, - spinProduct: productList.filter(item => item.productId === '499spins'), + spinProduct: productList.filter(item => item.productId.includes('spins')), }) ); } diff --git a/src/containers/spinGameContainer.js b/src/containers/spinGameContainer.js index ebb307e92..fd562f217 100644 --- a/src/containers/spinGameContainer.js +++ b/src/containers/spinGameContainer.js @@ -22,6 +22,11 @@ class RedeemContainer extends Component { // Component Life Cycle Functions async componentDidMount() { + this._statusCheck(); + } + + // Component Functions + _statusCheck = async () => { const { username } = this.props; await gameStatusCheck(username, 'spin') @@ -37,9 +42,7 @@ class RedeemContainer extends Component { Alert.alert(get(err, 'message') || err.toString()); } }); - } - - // Component Functions + }; _startGame = async type => { const { username } = this.props; diff --git a/src/screens/boost/screen/boostScreen.js b/src/screens/boost/screen/boostScreen.js index bc83d2246..566c5290b 100644 --- a/src/screens/boost/screen/boostScreen.js +++ b/src/screens/boost/screen/boostScreen.js @@ -1,39 +1,22 @@ -import React, { Fragment } from 'react'; -import { View, Text, Platform } from 'react-native'; +import React from 'react'; +import { View, Platform } from 'react-native'; import get from 'lodash/get'; import { useIntl } from 'react-intl'; // Components -import { BasicHeader, Icon, MainButton, BoostPlaceHolder } from '../../../components'; +import { BasicHeader, BoostPlaceHolder, ProductItemLine } from '../../../components'; // Container import { InAppPurchaseContainer } from '../../../containers'; // Styles import globalStyles from '../../../globalStyles'; -import styles from './boostScreenStyles'; -const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' }; const ITEM_SKUS = Platform.select({ ios: ['099points', '199points', '499points', '999points', '4999points', '9999points'], android: ['099points', '199points', '499points', '999points', '4999points', '9999points'], }); -const _renderDeal = item => { - if (DEALS[item.productId]) { - return ( - - - {DEALS[item.productId]} - - - - ); - } - - return null; -}; - const _getTitle = title => { let _title = title.toUpperCase(); @@ -61,35 +44,14 @@ const BoostScreen = () => { {isLoading ? ( ) : ( - productList.map(item => ( - - {_renderDeal(item)} - - buyItem(item.productId)} - height={50} - text={intl.formatMessage({ - id: 'boost.buy', - })} - isDisable={isProcessing} - isLoading={false} - > - - {_getTitle(get(item, 'title'))} - - - - - - - - - {get(item, 'localizedPrice', null) && ( - {get(item, 'localizedPrice', 0)} - )} - - + productList.map(product => ( + buyItem(id)} + /> )) )} diff --git a/src/screens/index.js b/src/screens/index.js index c6e9570d1..d717c6ad1 100755 --- a/src/screens/index.js +++ b/src/screens/index.js @@ -11,6 +11,7 @@ import { Points } from './points'; import { Post } from './post'; import { SearchResult } from './searchResult'; import { Settings } from './settings'; +import { SpinGame } from './spinGame/screen/spinGameScreen'; import Boost from './boost/screen/boostScreen'; import Profile from './profile/screen/profileScreen'; import ProfileEdit from './profileEdit/screen/profileEditScreen'; @@ -18,7 +19,6 @@ import Reblogs from './reblogs'; import Redeem from './redeem/screen/redeemScreen'; import SteemConnect from './steem-connect/steemConnect'; import Transfer from './transfer'; -import SpinGame from './spinGame/screen/spinGameScreen'; import Voters from './voters'; export { diff --git a/src/screens/spinGame/screen/spinGameScreen.js b/src/screens/spinGame/screen/spinGameScreen.js index e52a10b7c..41246dcd6 100644 --- a/src/screens/spinGame/screen/spinGameScreen.js +++ b/src/screens/spinGame/screen/spinGameScreen.js @@ -1,43 +1,32 @@ -import React, { PureComponent } from 'react'; +import React from 'react'; // Container import { SpinGameContainer, InAppPurchaseContainer } from '../../../containers'; import { SpinGame } from '../../../components'; -class FreeEstmScreen extends PureComponent { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ +const SpinGameScreen = () => { + return ( + + {({ startGame, score, gameRight, nextDate, isLoading, statusCheck }) => ( + + {({ buyItem, getItems, spinProduct, isProcessing }) => ( + + )} + + )} + + ); +}; - constructor(props) { - super(props); - this.state = {}; - } - - render() { - return ( - - {({ startGame, score, gameRight, nextDate, isLoading }) => ( - - {({ buyItem, getItems, spinProduct }) => ( - - )} - - )} - - ); - } -} - -export default FreeEstmScreen; +export { SpinGameScreen as SpinGame }; diff --git a/src/utils/time.js b/src/utils/time.js index c5b9bed6c..ff0aab270 100644 --- a/src/utils/time.js +++ b/src/utils/time.js @@ -12,15 +12,21 @@ const THIS_MONTH = moment() .startOf('day'); export const getTimeFromNow = (value, isWithoutUtc) => { - if (!value) return null; + if (!value) { + return null; + } - if (isWithoutUtc) return moment(value).fromNow(); + if (isWithoutUtc) { + return moment(value).fromNow(); + } return moment.utc(value).fromNow(); }; export const getFormatedCreatedDate = value => { - if (!value) return null; + if (!value) { + return null; + } return moment(value).format('DD MMM, YYYY'); }; @@ -36,7 +42,9 @@ export const isThisWeek = value => moment(value).isSameOrAfter(THIS_WEEK); export const isThisMonth = value => moment(value).isSameOrAfter(THIS_MONTH); export const isEmptyContentDate = value => { - if (!value) return false; + if (!value) { + return false; + } return parseInt(value.split('-')[0], 10) < 1980; };