mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-24 13:53:23 +03:00
Merge pull request #1012 from esteemapp/feature/freeESTM
first part Feature/free estm
This commit is contained in:
commit
6a88e27050
@ -18,6 +18,7 @@ import ProfileSummaryPlaceHolder from './view/placeHolder/profileSummaryPlaceHol
|
||||
import WalletDetailsPlaceHolder from './view/placeHolder/walletDetailsPlaceHolder';
|
||||
import WalletUnclaimedPlaceHolder from './view/placeHolder/walletUnclaimedPlaceHolder';
|
||||
import ListPlaceHolder from './view/placeHolder/listPlaceHolderView';
|
||||
import BoostPlaceHolder from './view/placeHolder/boostPlaceHolderView';
|
||||
|
||||
export {
|
||||
Card,
|
||||
@ -26,6 +27,7 @@ export {
|
||||
LineBreak,
|
||||
ListItemPlaceHolder,
|
||||
ListPlaceHolder,
|
||||
BoostPlaceHolder,
|
||||
NoInternetConnection,
|
||||
NoPost,
|
||||
PostCardPlaceHolder,
|
||||
|
@ -0,0 +1,24 @@
|
||||
import EStyleSheet from 'react-native-extended-stylesheet';
|
||||
|
||||
export default EStyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '$primaryBackgroundColor',
|
||||
borderColor: '$primaryLightBackground',
|
||||
marginRight: 0,
|
||||
marginLeft: 0,
|
||||
flexDirection: 'column',
|
||||
},
|
||||
paragraphWrapper: {
|
||||
marginLeft: 30,
|
||||
},
|
||||
line: {
|
||||
flexDirection: 'row',
|
||||
marginVertical: 10,
|
||||
alignContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
rightBox: {
|
||||
marginRight: 20,
|
||||
},
|
||||
});
|
@ -0,0 +1,44 @@
|
||||
/* eslint-disable radix */
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Dimensions, View } from 'react-native';
|
||||
import times from 'lodash/times';
|
||||
import Placeholder from 'rn-placeholder';
|
||||
|
||||
import styles from './boostPlaceHolderStyles';
|
||||
|
||||
const HEIGHT = Dimensions.get('window').height;
|
||||
|
||||
const BoostPlaceHolder = ({ isDarkTheme }) => {
|
||||
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
|
||||
const ratio = (HEIGHT - 300) / 50 / 1.3;
|
||||
const listElements = [];
|
||||
|
||||
times(parseInt(ratio), i => {
|
||||
listElements.push(
|
||||
<View style={styles.container} key={i}>
|
||||
<View style={styles.line}>
|
||||
<Placeholder.Box color={color} width={90} height={40} animate="fade" />
|
||||
<View style={styles.paragraphWrapper}>
|
||||
<Placeholder.Box color={color} width={140} radius={25} height={50} animate="fade" />
|
||||
</View>
|
||||
<Placeholder.Box
|
||||
style={styles.rightBox}
|
||||
color={color}
|
||||
width={20}
|
||||
height={10}
|
||||
animate="fade"
|
||||
/>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
});
|
||||
|
||||
return <View style={styles.container}>{listElements}</View>;
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isDarkTheme: state.application.isDarkTheme,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(BoostPlaceHolder);
|
@ -22,6 +22,7 @@ export default {
|
||||
BOOST: `Boost${SCREEN_SUFFIX}`,
|
||||
BOOST_POST: `BoostPost${SCREEN_SUFFIX}`,
|
||||
PROMOTE: `Promote${SCREEN_SUFFIX}`,
|
||||
FREE_ESTM: `FreeEstm${SCREEN_SUFFIX}`,
|
||||
},
|
||||
DRAWER: {
|
||||
MAIN: `Main${DRAWER_SUFFIX}`,
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Platform, Alert } from 'react-native';
|
||||
import { withNavigation } from 'react-navigation';
|
||||
import RNIap, {
|
||||
purchaseErrorListener,
|
||||
purchaseUpdatedListener,
|
||||
@ -12,12 +13,8 @@ import { injectIntl } from 'react-intl';
|
||||
|
||||
// import { toastNotification } from '../../../redux/actions/uiAction';
|
||||
|
||||
// Middleware
|
||||
|
||||
// Constants
|
||||
// import { default as ROUTES } from '../../../constants/routeNames';
|
||||
|
||||
// Utilities
|
||||
import { default as ROUTES } from '../../../constants/routeNames';
|
||||
|
||||
// Component
|
||||
import BoostScreen from '../screen/boostScreen';
|
||||
@ -39,6 +36,8 @@ class BoostContainer extends Component {
|
||||
this.state = {
|
||||
receipt: '',
|
||||
productList: [],
|
||||
isLoading: true,
|
||||
isProccesing: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -67,20 +66,39 @@ class BoostContainer extends Component {
|
||||
_getItems = async () => {
|
||||
try {
|
||||
const products = await RNIap.getProducts(ITEM_SKUS);
|
||||
console.log('Products', products);
|
||||
|
||||
products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)).reverse();
|
||||
this.setState({ productList: products });
|
||||
await this.setState({ productList: products });
|
||||
} catch (err) {
|
||||
console.warn(err.code, err.message);
|
||||
Alert.alert(
|
||||
`Fetching data from server failed, please try again or notify us at info@esteem.app \n${err.message.substr(
|
||||
0,
|
||||
20,
|
||||
)}`,
|
||||
);
|
||||
}
|
||||
|
||||
await this.setState({ isLoading: false });
|
||||
};
|
||||
|
||||
_buyItem = async sku => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
await this.setState({ isProccesing: true });
|
||||
|
||||
if (sku !== 'freePoints') {
|
||||
try {
|
||||
RNIap.requestPurchase(sku);
|
||||
await RNIap.requestPurchase(sku);
|
||||
} catch (err) {
|
||||
console.warn(err.code, err.message);
|
||||
}
|
||||
} else {
|
||||
navigation.navigate({
|
||||
routeName: ROUTES.SCREENS.FREE_ESTM,
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({ isProccesing: false });
|
||||
};
|
||||
|
||||
// _buyItem = async sku => {
|
||||
@ -103,9 +121,18 @@ class BoostContainer extends Component {
|
||||
// };
|
||||
|
||||
render() {
|
||||
const { productList } = this.state;
|
||||
const { productList, isLoading, isProccesing } = this.state;
|
||||
// const FREE_ESTM = { productId: 'freePoints', title: 'free estm' };
|
||||
|
||||
return <BoostScreen boostData={productList} buyItem={this._buyItem} />;
|
||||
return (
|
||||
<BoostScreen
|
||||
// productList={[...productList, FREE_ESTM]}
|
||||
productList={productList}
|
||||
buyItem={this._buyItem}
|
||||
isLoading={isLoading}
|
||||
isProccesing={isProccesing}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,4 +140,4 @@ const mapStateToProps = state => ({
|
||||
currentAccount: state.account.currentAccount,
|
||||
});
|
||||
|
||||
export default injectIntl(connect(mapStateToProps)(BoostContainer));
|
||||
export default withNavigation(injectIntl(connect(mapStateToProps)(BoostContainer)));
|
||||
|
@ -7,6 +7,7 @@ import get from 'lodash/get';
|
||||
import { BasicHeader } from '../../../components/basicHeader';
|
||||
import { MainButton } from '../../../components/mainButton';
|
||||
import { Icon } from '../../../components/icon';
|
||||
import { BoostPlaceHolder } from '../../../components/basicUIElements';
|
||||
|
||||
// Styles
|
||||
import globalStyles from '../../../globalStyles';
|
||||
@ -50,7 +51,7 @@ class BoostScreen extends PureComponent {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { intl, buyItem, boostData } = this.props;
|
||||
const { intl, buyItem, productList, isLoading, isProccesing } = this.props;
|
||||
const { selectedBoost } = this.state;
|
||||
|
||||
return (
|
||||
@ -61,7 +62,10 @@ class BoostScreen extends PureComponent {
|
||||
})}
|
||||
/>
|
||||
|
||||
{boostData.map(item => (
|
||||
{isLoading ? (
|
||||
<BoostPlaceHolder />
|
||||
) : (
|
||||
productList.map(item => (
|
||||
<View style={styles.boostLine} key={get(item, 'productId')}>
|
||||
{this._renderDeal(item)}
|
||||
<View style={styles.buttonWrapper}>
|
||||
@ -72,11 +76,11 @@ class BoostScreen extends PureComponent {
|
||||
text={intl.formatMessage({
|
||||
id: 'boost.buy',
|
||||
})}
|
||||
isDisable={false}
|
||||
isDisable={isProccesing}
|
||||
isLoading={false}
|
||||
>
|
||||
<View style={styles.buttonContent}>
|
||||
<Text style={styles.buttonText}>{this._getTitle(get(item, 'title'))}</Text>
|
||||
<Text style={styles.buttonText}>{get(item, 'title', '').toUpperCase()}</Text>
|
||||
<View style={styles.buttonIconWrapper}>
|
||||
<Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
|
||||
</View>
|
||||
@ -85,10 +89,13 @@ class BoostScreen extends PureComponent {
|
||||
</View>
|
||||
|
||||
<View style={styles.priceWrapper}>
|
||||
{get(item, 'localizedPrice', null) && (
|
||||
<Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user