From fac5b52d72f39d154a43b3f2a4f0fc490d6ab70a Mon Sep 17 00:00:00 2001 From: anniero98 Date: Thu, 30 Apr 2020 00:19:50 -0700 Subject: [PATCH] Add participating stores to Rewards screen (#129) * Add participating stores * Add testing bypass back in dev mode * Fix child key warning * Wrap store names in TouchableOpacity * Update for design changes * Styling switches on guest mode --- components/rewards/ParticipatingStores.js | 37 +++++++++++++++++++ components/rewards/RewardsHome.js | 6 +++- components/rewards/Transaction.js | 15 ++++---- components/store/StoreMarker.js | 1 + lib/mapUtils.js | 4 +-- screens/auth/LogInScreen.js | 1 - screens/auth/SignUpScreen.js | 9 +++-- screens/map/MapScreen.js | 1 - screens/map/ProductsScreen.js | 1 - screens/map/StoreListScreen.js | 4 +-- screens/rewards/RewardsScreen.js | 43 ++++++++++++++++++----- 11 files changed, 95 insertions(+), 27 deletions(-) create mode 100644 components/rewards/ParticipatingStores.js diff --git a/components/rewards/ParticipatingStores.js b/components/rewards/ParticipatingStores.js new file mode 100644 index 00000000..41633ea6 --- /dev/null +++ b/components/rewards/ParticipatingStores.js @@ -0,0 +1,37 @@ +import { useNavigation } from '@react-navigation/native'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { TouchableOpacity } from 'react-native'; +import { ColumnContainer } from '../../styled/shared'; +import { Overline, Subhead } from '../BaseComponents'; + +export default function ParticipatingStores({ participating, guest }) { + const navigation = useNavigation(); + return ( + + Participating Stores + {participating.map((store) => { + return ( + + + navigation.navigate('Stores', { + currentStore: store, + }) + }> + {store.storeName} + + + ); + })} + More stores coming soon! + + ); +} + +ParticipatingStores.propTypes = { + participating: PropTypes.array.isRequired, + guest: PropTypes.bool.isRequired, +}; diff --git a/components/rewards/RewardsHome.js b/components/rewards/RewardsHome.js index 6685d3cf..ed37f7e3 100644 --- a/components/rewards/RewardsHome.js +++ b/components/rewards/RewardsHome.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { FlatList, Image, 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'; @@ -11,6 +12,7 @@ import { RewardsProgressContainer, } from '../../styled/rewards'; import { Body, Overline, Title } from '../BaseComponents'; +import ParticipatingStores from './ParticipatingStores'; import RewardsCard from './RewardsCard'; /** @@ -25,7 +27,7 @@ function createList(n) { return list; } -function RewardsHome({ customer }) { +function RewardsHome({ customer, participating }) { const rewardsAvailable = parseInt(customer.points, 10) / rewardPointValue; const pointsToNext = parseInt(customer.points, 10) % rewardPointValue; return ( @@ -87,6 +89,7 @@ function RewardsHome({ customer }) { } /> + {/* Display rewards unlocked */} - {[...Array(rewardsUnlocked).keys()].map(() => ( - + {[...Array(rewardsUnlocked).keys()].map((i) => ( + {`${date.toLocaleDateString('en-US', options)} • ${storeName}`} - $5 reward unlocked + {`$${rewardDollarValue} reward unlocked`} - for 500 earned points + {`for ${rewardPointValue} earned points`} @@ -67,8 +68,8 @@ function Transaction(props) { {/* Display rewards applied */} - {[...Array(rewardsApplied).keys()].map(() => ( - + {[...Array(rewardsApplied).keys()].map((i) => ( + {`${date.toLocaleDateString('en-US', options)} • ${storeName}`} - $5 reward redeemed + {`$${rewardDollarValue} reward redeemed`} ))} diff --git a/components/store/StoreMarker.js b/components/store/StoreMarker.js index 08170fcc..5177edc9 100644 --- a/components/store/StoreMarker.js +++ b/components/store/StoreMarker.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Image } from 'react-native'; + import { MarkerContainer, MarkerStoreName } from '../../styled/store'; function StoreMarker({ storeName, focused }) { diff --git a/lib/mapUtils.js b/lib/mapUtils.js index 7ff390c2..ac85f9c0 100644 --- a/lib/mapUtils.js +++ b/lib/mapUtils.js @@ -240,8 +240,8 @@ function updateProductData(record) { // Gets all records in Airtable from the Stores table // Returns a promise that resolves to an array of Store objects -export async function getStoreData() { - const records = await getAllStores(); +export async function getStoreData(filterByFormula = '') { + const records = await getAllStores(filterByFormula); // Filter out the Clerk Training store const stores = records .filter((record) => record.id !== RecordIds.clerkTrainingStoreId) diff --git a/screens/auth/LogInScreen.js b/screens/auth/LogInScreen.js index e48c939e..cbdd3f0b 100644 --- a/screens/auth/LogInScreen.js +++ b/screens/auth/LogInScreen.js @@ -7,7 +7,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import { AsyncStorage } from 'react-native'; import * as Sentry from 'sentry-expo'; - import AuthTextField from '../../components/AuthTextField'; import { BigTitle, diff --git a/screens/auth/SignUpScreen.js b/screens/auth/SignUpScreen.js index 9deb1c2c..cffef156 100644 --- a/screens/auth/SignUpScreen.js +++ b/screens/auth/SignUpScreen.js @@ -5,7 +5,7 @@ import * as Analytics from 'expo-firebase-analytics'; import * as Permissions from 'expo-permissions'; import PropTypes from 'prop-types'; import React from 'react'; -import { AsyncStorage, Keyboard } from 'react-native'; +import { AsyncStorage, Button, Keyboard } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; import * as Sentry from 'sentry-expo'; import AuthTextField from '../../components/AuthTextField'; @@ -16,6 +16,7 @@ import { } from '../../components/BaseComponents'; import Colors from '../../constants/Colors'; import RecordIds from '../../constants/RecordIds'; +import { env } from '../../environment'; import { createCustomers, createPushTokens, @@ -87,7 +88,7 @@ export default class SignUpScreen extends React.Component { // Configures to use David Ro's test account _devBypass = async () => { // Doesn't enforce any resolution for this async call - await AsyncStorage.setItem('customerId', RecordIds.customerId); + await AsyncStorage.setItem('customerId', RecordIds.testCustomerId); this.props.navigation.navigate('App'); }; @@ -342,7 +343,9 @@ export default class SignUpScreen extends React.Component { disabled={!signUpPermission}> Sign Up - {/*