Updated How It Works

components/rewards/HowItWorks.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Image, ScrollView, View } from 'react-native';
+import { rewardDollarValue, rewardPointValue } from '../../constants/Rewards';
+import { BigTitle, Title } from '../BaseComponents';
+
+/**
+ * @prop
+ * */
+
+function HowItWorks() {
+  return (
+    <ScrollView style={{ display: 'flex', marginLeft: 16, paddingRight: 16 }}>
+      <View style={{ display: 'flex', alignItems: 'center', maxHeight: 1750 }}>
+        <Image
+          source={require('../../assets/images/1Shop.png')}
+          style={{
+            maxWidth: '100%',
+            resizeMode: 'contain',
+            maxHeight: 400,
+          }}
+        />
+        <BigTitle>Shop</BigTitle>
+        <Title style={{ textAlign: 'center' }}>
+          Buy Healthy Corners products at participating stores!
+        </Title>
+
+        <Image
+          source={require('../../assets/images/2Earn.png')}
+          style={{
+            maxWidth: '100%',
+            resizeMode: 'contain',
+            maxHeight: 400,
+          }}
+        />
+        <BigTitle>Earn</BigTitle>
+        <Title style={{ textAlign: 'center' }}>
+          {`Every dollar you spend on healthy products earns you points!\n $1 = 100 points`}
+        </Title>
+
+        <Image
+          source={require('../../assets/images/3Save.png')}
+          style={{
+            maxWidth: '100%',
+            resizeMode: 'contain',
+            maxHeight: 400,
+          }}
+        />
+        <BigTitle>Save</BigTitle>
+        <Title style={{ textAlign: 'center' }}>
+          {`Every ${rewardPointValue} points you earn unlocks a $${rewardDollarValue} reward!\n\nRedeem on Healthy Corners products at participating stores!`}
+        </Title>
+      </View>
+    </ScrollView>
+  );
+}
+
+export default React.memo(HowItWorks);

components/rewards/ParticipatingStores.js

@@ -9,7 +9,7 @@ export default function ParticipatingStores({ participating, guest }) {
   const navigation = useNavigation();
   return (
     <ColumnContainer
-      style={guest ? { marginLeft: 16, marginBottom: 24 } : { marginTop: 28 }}>
+      style={guest ? { marginLeft: 16, marginBottom: 40 } : { marginTop: 28 }}>
       <Overline style={{}}>Participating Stores</Overline>
       {participating.map((store) => {
         return (

components/rewards/RewardsHome.js

@@ -1,9 +1,8 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { FlatList, Image, ScrollView, View } from 'react-native';
+import { FlatList, ScrollView, View } from 'react-native';
 import { ProgressBar } from 'react-native-paper';
-
 import Colors from '../../constants/Colors';
 import Window from '../../constants/Layout';
 import { rewardDollarValue, rewardPointValue } from '../../constants/Rewards';
@@ -89,17 +88,7 @@ function RewardsHome({ customer, participating }) {
           }
         />
       </AvailableRewardsContainer>
-      <ParticipatingStores participating={participating} guest={false} />
-      <View style={{ maxHeight: 600, marginTop: 12 }}>
-        <Image
-          source={require('../../assets/images/HowItWorks.png')}
-          style={{
-            maxWidth: '100%',
-            resizeMode: 'contain',
-            maxHeight: 600,
-          }}
-        />
-      </View>
+      <ParticipatingStores participating={participating} guest />
     </ScrollView>
   );
 }

screens/rewards/RewardsScreen.js

@@ -1,13 +1,7 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  AsyncStorage,
-  Dimensions,
-  Image,
-  ScrollView,
-  View,
-} from 'react-native';
+import { AsyncStorage, Dimensions, ScrollView, View } from 'react-native';
 import { TabBar, TabView } from 'react-native-tab-view';
 import {
   BigTitle,
@@ -16,6 +10,7 @@ import {
   NavButton,
   NavHeaderContainer,
 } from '../../components/BaseComponents';
+import HowItWorks from '../../components/rewards/HowItWorks';
 import ParticipatingStores from '../../components/rewards/ParticipatingStores';
 import PointsHistory from '../../components/rewards/PointsHistory';
 import RewardsHome from '../../components/rewards/RewardsHome';
@@ -30,6 +25,7 @@ import { styles } from '../../styled/rewards';
 const routes = [
   { key: 'home', title: 'My Rewards' },
   { key: 'history', title: 'Points History' },
+  { key: 'howitworks', title: 'How It Works' },
 ];
 
 export default class RewardsScreen extends React.Component {
@@ -92,6 +88,13 @@ export default class RewardsScreen extends React.Component {
         );
       case 'history':
         return <PointsHistory transactions={this.state.transactions} />;
+      case 'howitworks':
+        return (
+          <HowItWorks
+            isGuest={this.state.isGuest}
+            participating={this.state.participating}
+          />
+        );
       default:
         return null;
     }
@@ -106,6 +109,7 @@ export default class RewardsScreen extends React.Component {
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         indicatorStyle={styles.tabBarIndicator}
+        scrollEnabled
       />
     );
   };
@@ -132,22 +136,10 @@ export default class RewardsScreen extends React.Component {
             </BigTitle>
           </NavHeaderContainer>
           <ScrollView>
-            <View
-              style={{
-                marginRight: 16,
-                marginLeft: 16,
-                maxHeight: 600,
-                marginTop: 12,
-              }}>
-              <Image
-                source={require('../../assets/images/HowItWorks.png')}
-                style={{
-                  width: '100%',
-                  maxHeight: 600,
-                  resizeMode: 'contain',
-                }}
-              />
-            </View>
+            <HowItWorks
+              isGuest={this.state.isGuest}
+              participating={this.state.participating}
+            />
             <ParticipatingStores
               participating={this.state.participating}
               guest