added after spin screen

src/config/locales/en-US.json

@@ -333,7 +333,10 @@
     "next": "NEXT"
   },
   "free_estm": {
-    "title": "Free ESTM"
+    "title": "Free ESTM",
+    "button": "SPIN & WIN",
+    "get_spin": "5 SPIN",
+    "timer_text": "Next free spin in"
   },
   "promote": {
     "title": "Promote",

src/screens/freeEstm/screen/freeEstmScreen.js

@@ -7,7 +7,7 @@ import { PointsContainer } from '../../../containers';
 
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
-import { BoostIndicatorAnimation, MainButton } from '../../../components';
+import { BoostIndicatorAnimation, MainButton, Icon } from '../../../components';
 
 import ESTM_TAGS from '../../../assets/estmTags.png';
 
@@ -25,6 +25,7 @@ class FreeEstmScreen extends PureComponent {
     this.state = {
       isSpinning: false,
       spinRight: 1,
+      earnedPoints: null,
     };
   }
 
@@ -35,11 +36,19 @@ class FreeEstmScreen extends PureComponent {
       isSpinning: true,
       spinRight: spinRight - 1,
     });
+
+    setTimeout(() => {
+      this.setState({ isSpinning: false, earnedPoints: 10 });
+    }, 8000);
+  };
+
+  _buySpinRight = () => {
+    alert('buy me');
   };
 
   render() {
     const { intl } = this.props;
-    const { isSpinning, spinRight } = this.state;
+    const { isSpinning, spinRight, earnedPoints } = this.state;
 
     return (
       <PointsContainer>
@@ -56,16 +65,39 @@ class FreeEstmScreen extends PureComponent {
                 )}
               </View>
               <View style={styles.spinnerWrapper}>
-                {!isSpinning && <Image source={ESTM_TAGS} style={styles.backgroundTags} />}
-                <BoostIndicatorAnimation isSpinning={isSpinning} />
+                {!isSpinning && spinRight > 0 && (
+                  <Image source={ESTM_TAGS} style={styles.backgroundTags} />
+                )}
+                <BoostIndicatorAnimation key={spinRight} isSpinning={isSpinning} />
+
+                {earnedPoints && (
+                  <View style={styles.descriptionWrapper}>
+                    <Fragment>
+                      <Text style={styles.description}>{`${earnedPoints} ESTM`}</Text>
+                      <View style={styles.triangle} />
+                    </Fragment>
+                  </View>
+                )}
 
                 <View style={{ flex: 1 }}>
                   {!isSpinning && (
                     <MainButton
-                      style={{ marginTop: 50 }}
-                      onPress={this._handleOnSpinPress}
-                      text="SPIN & WIN"
-                    />
+                      style={styles.button}
+                      onPress={spinRight > 0 ? this._handleOnSpinPress : this._buySpinRight}
+                    >
+                      <View style={styles.buttonContent}>
+                        <Text style={styles.buttonText}>
+                          {intl.formatMessage({
+                            id: spinRight > 0 ? 'free_estm.button' : 'free_estm.get_spin',
+                          })}
+                        </Text>
+                        {spinRight <= 0 && (
+                          <View style={styles.buttonIconWrapper}>
+                            <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+                          </View>
+                        )}
+                      </View>
+                    </MainButton>
                   )}
                 </View>
               </View>

src/screens/freeEstm/screen/freeEstmStyles.js

@@ -34,4 +34,65 @@ export default EStyleSheet.create({
     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,
+    height: 30,
+    justifyContent: 'center',
+    paddingHorizontal: 5,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    position: 'absolute',
+    top: '$deviceHeight / 6',
+    left: '$deviceWidth / 1.87',
+  },
+  description: {
+    fontSize: 10,
+    color: '$pureWhite',
+    fontWeight: 'bold',
+  },
+  triangle: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderLeftWidth: 15,
+    borderRightWidth: 15,
+    borderBottomWidth: 15,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: '$primaryDarkBlue',
+    transform: [{ rotate: '-90deg' }],
+    position: 'absolute',
+    left: -22,
+  },
 });