fixed styles added iap still wip

src/screens/boost/container/boostContainer.js

@@ -1,5 +1,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { Platform } from 'react-native';
+import RNIap, {
+  purchaseErrorListener,
+  purchaseUpdatedListener,
+  ProductPurchase,
+  PurchaseError,
+} from 'react-native-iap';
 // import { Alert } from 'react-native';
 import { injectIntl } from 'react-intl';
 
@@ -28,11 +35,52 @@ class BoostContainer extends Component {
   }
 
   // Component Life Cycle Functions
+  async componentDidMount() {
+    try {
+      const itemSkus = Platform.select({
+        ios: ['app.esteem.mobile.ios.099_points'],
+        android: ['com.example.099points'],
+      });
+      // await RNIap.prepare();
+      const products = await RNIap.getProducts([
+        '099points',
+        '199points',
+        '499points',
+        '999points',
+        '4999points',
+        '9999points',
+      ]);
+      // this.setState({ items });
+      console.log(products);
+    } catch (err) {
+      console.warn(err);
+    }
+
+    this.purchaseUpdateSubscription = purchaseUpdatedListener((purchase: ProductPurchase) => {
+      console.log('purchaseUpdatedListener', purchase);
+      const receipt = purchase.transactionReceipt;
+      if (receipt) {
+        alert('done');
+      }
+    });
+
+    this.purchaseErrorSubscription = purchaseErrorListener((error: PurchaseError) => {
+      console.warn('purchaseErrorListener', error);
+    });
+  }
 
   // Component Functions
 
+  _purchase = async sku => {
+    try {
+      await RNIap.requestPurchase('099points', false);
+    } catch (err) {
+      console.warn(err.code, err.message);
+    }
+  };
+
   render() {
-    return <BoostScreen />;
+    return <BoostScreen purchase={this._purchase} />;
   }
 }
 

src/screens/boost/screen/boostScreen.js

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { injectIntl } from 'react-intl';
 import { View, Text } from 'react-native';
+import get from 'lodash/get';
 
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
@@ -13,19 +14,20 @@ import styles from './boostScreenStyles';
 
 const BOOST_DATA = [
   {
+    id: 0,
     name: '10000 ESTM',
     priceText: '100$',
     price: 100,
     description: 'BEST DEAL!',
   },
-  { name: '5000 ESTM', priceText: '50.00$', price: 50, description: 'POPULAR' },
-  { name: '1000 ESTM', priceText: '10.00$', price: 10, description: '' },
-  { name: '500 ESTM', priceText: '5.00$', price: 5, description: '' },
-  { name: '200 ESTM', priceText: '2.00$', price: 2, description: '' },
-  { name: '100 ESTM', priceText: '1.00$', price: 1, description: '' },
+  { id: 1, name: '5000 ESTM', quantity: 500, price: 50, description: 'POPULAR' },
+  { id: 2, name: '1000 ESTM', quantity: 10000, price: 10, description: '' },
+  { id: 3, name: '500 ESTM', quantity: 500, price: 5, description: '' },
+  { id: 4, name: '200 ESTM', quantity: 200, price: 2, description: '' },
+  { id: 5, name: '100 ESTM', quantity: 100, price: 1, description: '' },
 ];
 
-class BoostScreen extends Component {
+class BoostScreen extends PureComponent {
   /* Props
    * ------------------------------------------------
    *   @prop { type }    name                - Description....
@@ -43,7 +45,7 @@ class BoostScreen extends Component {
   // Component Functions
 
   render() {
-    const { intl } = this.props;
+    const { intl, purchase } = this.props;
     const { selectedBoost } = this.state;
 
     return (
@@ -55,33 +57,37 @@ class BoostScreen extends Component {
         />
 
         {BOOST_DATA.map(item => (
-          <View style={styles.boostLine}>
-            {item.description && (
+          <View style={styles.boostLine} key={get(item, 'id')}>
+            {!!get(item, 'description', null) && (
               <View style={styles.descriptionWrapper}>
-                <Text>{item.description}</Text>
+                <Fragment>
+                  <Text style={styles.description}>{get(item, 'description')}</Text>
+                  <View style={styles.triangle} />
+                </Fragment>
               </View>
             )}
-
-            <MainButton
-              style={styles.button}
-              onPress={() => alert(selectedBoost)}
-              height={50}
-              text={intl.formatMessage({
-                id: 'boost.buy',
-              })}
-              isDisable={false}
-              isLoading={false}
-            >
-              <View style={styles.buttonContent}>
-                <Text style={styles.buttonText}>{item.name}</Text>
-                <View style={styles.buttonIconWrapper}>
-                  <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+            <View style={styles.buttonWrapper}>
+              <MainButton
+                style={styles.button}
+                onPress={() => purchase()}
+                height={50}
+                text={intl.formatMessage({
+                  id: 'boost.buy',
+                })}
+                isDisable={false}
+                isLoading={false}
+              >
+                <View style={styles.buttonContent}>
+                  <Text style={styles.buttonText}>{get(item, 'name')}</Text>
+                  <View style={styles.buttonIconWrapper}>
+                    <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+                  </View>
                 </View>
-              </View>
-            </MainButton>
+              </MainButton>
+            </View>
 
             <View style={styles.priceWrapper}>
-              <Text>{item.priceText}</Text>
+              <Text style={styles.priceText}>{`$${get(item, 'price', 0).toFixed(2)}`}</Text>
             </View>
           </View>
         ))}

src/screens/boost/screen/boostScreenStyles.js

@@ -13,13 +13,18 @@ export default EStyleSheet.create({
   },
   button: {
     marginVertical: 12,
-    alignSelf: 'center',
     paddingHorizontal: 18,
-    minWidth: '$deviceWidth / 2.4',
+    // alignSelf: 'flex-start',
   },
   buttonContent: {
     flexDirection: 'row',
   },
+  buttonWrapper: {
+    minWidth: '$deviceWidth / 2.4',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    flex: 1,
+  },
   buttonText: {
     color: '$pureWhite',
     fontSize: 14,
@@ -37,9 +42,41 @@ export default EStyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'center',
+    width: '$deviceWidth / 4',
+  },
+  priceText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '$primaryBlue',
   },
   descriptionWrapper: {
-    backgroundColor: '#c10000',
-    width: '$deviceWidth / 3',
+    backgroundColor: '$companyRed',
+    width: 90,
+    height: 40,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    borderTopRightRadius: 5,
+    borderBottomRightRadius: 5,
+  },
+  description: {
+    fontSize: 10,
+    color: '$white',
+    fontWeight: 'bold',
+  },
+  triangle: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderLeftWidth: 18,
+    borderRightWidth: 18,
+    borderBottomWidth: 14,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: '$primaryBackgroundColor',
+    borderRadius: 5,
+    transform: [{ rotate: '-90deg' }],
+    position: 'absolute',
+    right: -12,
   },
 });

src/themes/darkTheme.js

@@ -16,6 +16,7 @@ export default {
   $primaryDarkGray: '#c1c5c7',
   $primaryLightGray: '#f6f6f6',
   $primaryRed: '#e63535',
+  $companyRed: '#e63535',
   $primaryBlack: '#c1c5c7',
   $primaryDarkText: '#526d91',
 

src/themes/lightTheme.js

@@ -16,6 +16,7 @@ export default {
   $primaryDarkGray: '#788187',
   $primaryLightGray: '#f6f6f6',
   $primaryRed: '#e63535',
+  $companyRed: '#e63535',
   $primaryBlack: '#3c4449',
   $primaryDarkText: '#788187',