added product item

This commit is contained in:
ue 2019-10-04 18:28:38 +03:00
parent d59f2782bc
commit bab709dfdb
5 changed files with 68 additions and 39 deletions

View File

@ -1,6 +1,7 @@
import React, { PureComponent, Fragment } from 'react';
import { injectIntl } from 'react-intl';
import { Image, Text, View } from 'react-native';
import get from 'lodash/get';
// Components
import { BoostIndicatorAnimation, MainButton, Icon, BasicHeader } from '..';
@ -23,9 +24,14 @@ class SpinGameView extends PureComponent {
};
}
componentDidMount() {
const { getItems } = this.props;
getItems(['499spins']);
}
_handleOnSpinPress = () => {
const { spin } = this.props;
spin();
const { startGame } = this.props;
startGame('spin');
this.setState({
isSpinning: true,
@ -41,7 +47,7 @@ class SpinGameView extends PureComponent {
};
render() {
const { intl, gameRight, score } = this.props;
const { intl, gameRight, score, isLoading, spinProduct } = this.props;
const { isSpinning } = this.state;
return (
@ -49,7 +55,7 @@ class SpinGameView extends PureComponent {
<BasicHeader title={intl.formatMessage({ id: 'free_estm.title' })} />
<View style={styles.container}>
<View style={styles.textWrapper}>
{!isSpinning && (
{!isSpinning && !isLoading && (
<Fragment>
<Text style={styles.count}>{gameRight}</Text>
<Text style={styles.countDesc}>Spin Left</Text>
@ -57,7 +63,7 @@ class SpinGameView extends PureComponent {
)}
</View>
<View style={styles.spinnerWrapper}>
{!isSpinning && gameRight > 0 && (
{!isSpinning && !isLoading && gameRight > 0 && (
<Image source={ESTM_TAGS} style={styles.backgroundTags} />
)}
<BoostIndicatorAnimation key={gameRight} isSpinning={isSpinning} />
@ -72,24 +78,32 @@ class SpinGameView extends PureComponent {
)}
<View style={{ flex: 1 }}>
{!isSpinning && (
<MainButton
style={styles.button}
onPress={gameRight > 0 ? this._handleOnSpinPress : this._buySpinRight}
>
<View style={styles.buttonContent}>
<Text style={styles.buttonText}>
{intl.formatMessage({
id: gameRight > 0 ? 'free_estm.button' : 'free_estm.get_spin',
})}
</Text>
{gameRight <= 0 && (
<View style={styles.buttonIconWrapper}>
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
</View>
{!isSpinning && !isLoading && (
<Fragment>
<MainButton
style={styles.button}
onPress={gameRight > 0 ? this._handleOnSpinPress : this._buySpinRight}
>
<View style={styles.buttonContent}>
<Text style={styles.buttonText}>
{intl.formatMessage({
id: gameRight > 0 ? 'free_estm.button' : 'free_estm.get_spin',
})}
</Text>
{gameRight <= 0 && (
<View style={styles.buttonIconWrapper}>
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
</View>
)}
</View>
</MainButton>
<View style={styles.priceWrapper}>
{get(spinProduct, 'localizedPrice', null) && (
<Text style={styles.priceText}>{get(spinProduct, 'localizedPrice', 0)}</Text>
)}
</View>
</MainButton>
</Fragment>
)}
</View>
</View>

View File

@ -14,11 +14,6 @@ import { purchaseOrder } from '../providers/esteem/esteem';
// Utilities
import { default as ROUTES } from '../constants/routeNames';
const ITEM_SKUS = Platform.select({
ios: ['099points', '199points', '499points', '999points', '4999points', '9999points'],
android: ['099points', '199points', '499points', '999points', '4999points', '9999points'],
});
class InAppPurchaseContainer extends Component {
constructor(props) {
super(props);
@ -109,8 +104,10 @@ class InAppPurchaseContainer extends Component {
};
_getItems = async () => {
const { skus } = this.props;
try {
const products = await RNIap.getProducts(ITEM_SKUS);
const products = await RNIap.getProducts(skus);
products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)).reverse();
await this.setState({ productList: products });
@ -159,6 +156,8 @@ class InAppPurchaseContainer extends Component {
buyItem: this._buyItem,
isLoading,
isProcessing,
getItems: this._getItems,
spinProduct: productList.filter(item => item.productId === '499spins'),
})
);
}

View File

@ -15,6 +15,7 @@ class RedeemContainer extends Component {
score: 0,
nextDate: null,
gameRight: 1,
isLoading: true,
};
}
@ -26,7 +27,9 @@ class RedeemContainer extends Component {
await gameStatusCheck(username, 'spin')
.then(res => {
this.setState({
gameRight: get(res, 'status') !== 3 ? 1 : get(res, 'status') !== 18 ? 5 : 0,
gameRight: get(res, 'remaining', 0),
nextDate: get(res, 'next_date', null),
isLoading: false,
});
})
.catch(err => {
@ -70,22 +73,18 @@ class RedeemContainer extends Component {
}
};
_spin = () => {
this._startGame('spin');
};
render() {
const { children } = this.props;
const { score, gameRight, nextDate } = this.state;
const { score, gameRight, nextDate, isLoading } = this.state;
return (
children &&
children({
score,
spin: () => this._startGame('spin'),
startGame: this._startGame,
gameRight,
nextDate,
isLoading,
})
);
}

View File

@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
import { View, Text } from 'react-native';
import { View, Text, Platform } from 'react-native';
import get from 'lodash/get';
import { useIntl } from 'react-intl';
@ -14,6 +14,10 @@ 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]) {
@ -44,7 +48,7 @@ const BoostScreen = () => {
const intl = useIntl();
return (
<InAppPurchaseContainer>
<InAppPurchaseContainer skus={ITEM_SKUS}>
{({ buyItem, productList, isLoading, isProcessing }) => (
<View style={globalStyles.container}>
<BasicHeader

View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
// Container
import { SpinGameContainer } from '../../../containers';
import { SpinGameContainer, InAppPurchaseContainer } from '../../../containers';
import { SpinGame } from '../../../components';
@ -19,8 +19,21 @@ class FreeEstmScreen extends PureComponent {
render() {
return (
<SpinGameContainer>
{({ spin, score, gameRight, nextDate }) => (
<SpinGame score={score} spin={spin} gameRight={gameRight} nextDate={nextDate} />
{({ startGame, score, gameRight, nextDate, isLoading }) => (
<InAppPurchaseContainer skus={['499spins']}>
{({ buyItem, getItems, spinProduct }) => (
<SpinGame
buyItem={buyItem}
isLoading={isLoading}
score={score}
startGames={startGame}
gameRight={gameRight}
nextDate={nextDate}
getItems={getItems}
spinProduct={spinProduct[0]}
/>
)}
</InAppPurchaseContainer>
)}
</SpinGameContainer>
);