calblueprint · wangannie · Apr 3, 2020 · Mar 23, 2020 · Mar 23, 2020 · Mar 24, 2020
diff --git a/.env.example b/.env.example
@@ -1,3 +1,7 @@
-AIRTABLE_BASE_ID='your-API-key-here'
-AIRTABLE_API_KEY='keyioENo5dwh9Czt9'
+REACT_APP_AIRTABLE_API_KEY={AIRTABLE API KEY}
+AIRTABLE_BASE_ID='app4fXK49bqcjDMEo'
+
+AIRTABLE_EMAIL='your-airtable-email'
+AIRTABLE_PASSWORD='your-airtable-password'
+
 IMG_API_KEY='image-API-key-here'
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,16 @@
 .expo/*
 node_modules/**/*
 
-# Deprecated env file
+# Deprecated env files
 environment.js
+.airtable-schema-generator.env
+# Only used for manual
+schemaRaw.json
 # env files
 .env.development
 .env.production
-.airtable-schema-generator.env
+
+
 package-lock.json
 *.DS_Store
 

diff --git a/components/AuthTextField.js b/components/AuthTextField.js
@@ -1,54 +1,40 @@
 import React from 'react';
 import Colors from '../assets/Colors';
 import { fieldStateColors } from '../lib/authUtils';
-import {
-  InputNoticeContainer,
-  TextField,
-  TextFieldContainer
-} from '../styled/auth';
+import { InputNoticeContainer, TextField, TextFieldContainer } from '../styled/auth';
 import { Caption } from './BaseComponents';
 
 /**
  * @prop
  * */
 
-function AuthTextField({
-  fieldType,
-  color,
-  value,
-  onBlurCallback,
-  onFocusCallback,
-  changeTextCallback
-}) {
+function AuthTextField({ fieldType, errorMsg, color, value, onBlurCallback, onFocusCallback, changeTextCallback }) {
   return (
     <TextFieldContainer>
       <Caption color={color}>{fieldType}</Caption>
       <TextField
         onBlur={onBlurCallback}
         onFocus={onFocusCallback}
-        autoCapitalize={'words'}
+        autoCapitalize="words"
         placeholder={fieldType}
         autoCorrect={false}
         onChangeText={changeTextCallback}
         value={value}
         borderColor={color}
-        returnKeyType={'done'}
+        returnKeyType="done"
         keyboardType={fieldType === 'Phone Number' ? 'numeric' : 'default'}
         maxLength={fieldType === 'Phone Number' ? 10 : null}
         secureTextEntry={fieldType === 'Password'}
       />
       <InputNoticeContainer>
-        {fieldType === 'Name' && (
-          <Caption color={Colors.secondaryText}>
-            Note: this is how clerks will greet you!
-          </Caption>
+        {/* Name */}
+        {color !== fieldStateColors.ERROR && fieldType === 'Name' && (
+          <Caption color={Colors.secondaryText}>Note: this is how clerks will greet you!</Caption>
         )}
-        {color === fieldStateColors.ERROR && fieldType === 'Phone Number' && (
-          <Caption color={color}>Must be a valid phone number</Caption>
-        )}
-        {color === fieldStateColors.ERROR && fieldType === 'Password' && (
+        {color === fieldStateColors.ERROR && <Caption color={color}>{errorMsg}</Caption>}
+        {/* {color === fieldStateColors.ERROR && fieldType === 'Password' && (
           <Caption color={color}>Must be 8-20 characters long</Caption>
-        )}
+        )} */}
       </InputNoticeContainer>
     </TextFieldContainer>
   );

diff --git a/components/news/NewsItem.js b/components/news/NewsItem.js
@@ -29,7 +29,7 @@ class NewsItem extends React.Component {
         }>
         <Card>
           <DateContainer>
-            <DateText>{this.props.newsItem.date.toDateString()}</DateText>
+            <DateText>{this.props.newsItem.postDate.toDateString()}</DateText>
           </DateContainer>
           <ContentContainer>
             <DateText>{this.props.newsItem.title}</DateText>

diff --git a/components/product/ProductCard.js b/components/product/ProductCard.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Image } from 'react-native';
-import { ButtonContainer, Body } from '../BaseComponents';
 import { ColumnContainer } from '../../styled/shared';
+import { Body, ButtonContainer } from '../BaseComponents';
 
 /**
  * @prop
@@ -19,7 +19,7 @@ function ProductCard({ product, store, navigation }) {
       }>
       <ColumnContainer>
         <Image
-          source={{ uri: product.image }}
+          source={{ uri: product.imageUrl }}
           style={{ height: 86, width: 86, borderRadius: 12 }}
         />
         <Body>{product.name}</Body>

diff --git a/components/rewards/PointsHistory.js b/components/rewards/PointsHistory.js
@@ -1,42 +1,32 @@
 import React from 'react';
-import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { Overline } from '../BaseComponents';
 import Transaction from './Transaction';
+
 /**
  * @prop
  * */
 
-const styles = StyleSheet.create({
-  signOutButton: {
-    fontSize: 20,
-    paddingVertical: 15
-  }
-});
-
-function PointsHistory({ transactions, user, updates, navigation }) {
-  // Only display if transactions have mounted
+function PointsHistory({ transactions }) {
   // TODO @kennethlien fix spacing at line 44
-  if (transactions) {
-    return (
+
+  return (
+    <View>
       <View>
-        <View>
-          <ScrollView>
-            <Overline style={{ marginTop: 24 }}>Recent Transactions</Overline>
-            {transactions.map(transaction => (
-              <Transaction
-                key={transaction.id}
-                date={transaction.date}
-                points={transaction.points}
-                storeName={transaction.storeName}
-              />
-            ))}
-          </ScrollView>
-        </View>
+        <ScrollView>
+          <Overline style={{ marginTop: 24 }}>Recent Transactions</Overline>
+          {transactions.map(transaction => (
+            <Transaction
+              key={transaction.id}
+              date={transaction.date}
+              points={transaction.points}
+              storeName={transaction.storeName}
+            />
+          ))}
+        </ScrollView>
       </View>
-    );
-  }
-  // else return
-  return <View />;
+    </View>
+  );
 }
 
 export default React.memo(PointsHistory);
diff --git a/components/rewards/RewardsHome.js b/components/rewards/RewardsHome.js
@@ -1,53 +1,45 @@
 import React from 'react';
-import { View, ScrollView } from 'react-native';
-import { Body, Overline, Title } from '../BaseComponents';
-import {
-  RewardsProgressContainer,
-  AvailiableRewardsContainer
-} from '../../styled/rewards';
+import { ScrollView, View } from 'react-native';
 import { ProgressBar } from 'react-native-paper';
-import RewardsCard from './RewardsCard';
 import Colors from '../../assets/Colors';
+import { AvailiableRewardsContainer, RewardsProgressContainer } from '../../styled/rewards';
+import { Body, Overline, Title } from '../BaseComponents';
+import RewardsCard from './RewardsCard';
 
 /**
  * @prop
  * */
 
-function createList(N) {
-  let list = [];
-  for (var i = 1; i <= N; i++) {
+function createList(n) {
+  const list = [];
+  for (let i = 1; i <= n; i += 1) {
     list.push(i);
   }
   return list;
 }
 
-function RewardsHome({ user }) {
+function RewardsHome({ customer }) {
+  const rewardsAvailable = parseInt(customer.points, 10) / rewardPointValue;
+  const pointsToNext = parseInt(customer.points) % rewardPointValue;
   return (
     <View>
       <ScrollView>
         <RewardsProgressContainer>
-          <Overline style={{ marginTop: 24, marginBottom: 15 }}>
-            REWARD PROGRESS
-          </Overline>
-          <Title style={{ marginBottom: 2 }}>
-            {parseInt(user.points) % 1000} / 1000
-          </Title>
+          <Overline style={{ marginTop: 24, marginBottom: 15 }}>Reward Progress</Overline>
+          <Title style={{ marginBottom: 2 }}>{`${pointsToNext} / ${rewardPointValue}`}</Title>
           <ProgressBar
             style={{ height: 20, borderRadius: 20, marginBottom: 15 }}
-            progress={(parseInt(user.points) % 1000) / 1000}
+            progress={pointsToNext / rewardPointValue}
             color={Colors.primaryGreen}
           />
           <Body style={{ marginBottom: 28 }}>
-            Earn {`${1000 - (parseInt(user.points) % 1000)}`} points to unlock
-            your next $5 reward
+            Earn {`${rewardPointValue - pointsToNext}`} points to unlock your next $5 reward
           </Body>
-          <Overline style={{ marginBottom: 8 }}>
-            AVAILIABLE REWARDS ({Math.floor(parseInt(user.points) / 1000)})
-          </Overline>
+          <Overline style={{ marginBottom: 8 }}>Available Rewards ({Math.floor(rewardsAvailable)}</Overline>
         </RewardsProgressContainer>
         <AvailiableRewardsContainer>
-          {createList(Math.floor(parseInt(user.points) / 1000)).map(a => (
-            <RewardsCard></RewardsCard>
+          {createList(Math.floor(rewardsAvailable)).map(i => (
+            <RewardsCard key={i} />
           ))}
         </AvailiableRewardsContainer>
       </ScrollView>

diff --git a/components/store/StoreCard.js b/components/store/StoreCard.js
@@ -1,17 +1,8 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import React from 'react';
-import { View } from 'react-native';
 import Colors from '../../assets/Colors';
-import { InLineContainer } from '../../styled/shared';
-import {
-  SpaceAroundRowContainer,
-  SpaceBetweenRowContainer
-} from '../../styled/shared';
-import {
-  StoreCardContainer,
-  EBTStatusBar,
-  DividerBar
-} from '../../styled/store';
+import { InLineContainer, SpaceAroundRowContainer, SpaceBetweenRowContainer } from '../../styled/shared';
+import { DividerBar, EBTStatusBar, StoreCardContainer } from '../../styled/store';
 import { Body, Caption, Title } from '../BaseComponents';
 import StoreProductButton from './StoreProductButton';
 
@@ -20,13 +11,13 @@ import StoreProductButton from './StoreProductButton';
  * */
 
 function StoreCard({ store, callBack, seeProduct }) {
-  const { name, hours, address, distance, ebt, rewards } = store;
+  const { storeName, storeHours, address, distance, snapOrEbtAccepted, rewardsAccepted } = store;
   return (
     <StoreCardContainer>
       <SpaceBetweenRowContainer>
         <SpaceAroundRowContainer>
-          <Title color={Colors.activeText}>{name}</Title>
-          {ebt && (
+          <Title color={Colors.activeText}>{storeName}</Title>
+          {snapOrEbtAccepted && (
             <EBTStatusBar>
               <FontAwesome5 name="check" size={10} color={Colors.darkerGreen} />
               <Caption color={Colors.darkerGreen}> EBT</Caption>
@@ -38,35 +29,19 @@ function StoreCard({ store, callBack, seeProduct }) {
       <Caption style={{ marginBottom: 4 }} color={Colors.secondaryText}>
         {distance} miles away
       </Caption>
-      {rewards && (
+      {rewardsAccepted && (
         <InLineContainer style={{ alignItems: 'center' }}>
-          <FontAwesome5
-            name="star"
-            solid
-            size={16}
-            color={Colors.primaryGreen}
-          />
-          <Body color={Colors.primaryGreen}>
-            Earn and redeem Healthy Rewards here
-          </Body>
+          <FontAwesome5 name="star" solid size={16} color={Colors.primaryGreen} />
+          <Body color={Colors.primaryGreen}>Earn and redeem Healthy Rewards here</Body>
         </InLineContainer>
       )}
       <InLineContainer style={{ alignItems: 'center' }}>
-        <FontAwesome5
-          name="directions"
-          size={16}
-          color={Colors.secondaryText}
-        />
+        <FontAwesome5 name="directions" size={16} color={Colors.secondaryText} />
         <Body color={Colors.secondaryText}> {address}</Body>
       </InLineContainer>
       <InLineContainer style={{ alignItems: 'center' }}>
-        <FontAwesome5
-          name="clock"
-          solid
-          size={16}
-          color={Colors.secondaryText}
-        />
-        <Body color={Colors.secondaryText}> {hours}</Body>
+        <FontAwesome5 name="clock" solid size={16} color={Colors.secondaryText} />
+        <Body color={Colors.secondaryText}> {storeHours}</Body>
       </InLineContainer>
       <DividerBar />
     </StoreCardContainer>

diff --git a/components/store/StoreProductButton.js b/components/store/StoreProductButton.js
@@ -1,20 +1,19 @@
 import React from 'react';
-import { FilledButtonContainer, ButtonLabel } from '../BaseComponents';
 import Colors from '../../assets/Colors';
+import { ButtonLabel, FilledButtonContainer } from '../BaseComponents';
 
 /**
  * @prop
  * */
 
 function StoreProductButton({ callBack }) {
-  //   const { name, hours, address, distance, ebt } = store;
   return (
     <FilledButtonContainer
       width="130px"
       height="35px"
       color={Colors.primaryOrange}
       onPress={callBack}>
-      <ButtonLabel color="#fff">See Products</ButtonLabel>
+      <ButtonLabel color={Colors.lightest}>See Products</ButtonLabel>
     </FilledButtonContainer>
   );
 }

diff --git a/constants/Rewards.js b/constants/Rewards.js
@@ -0,0 +1,3 @@
+export const rewardDollarValue = 5;
+
+export const rewardPointValue = 1500;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const rewardDollarValue = 5;

		export const rewardPointValue = 1500;
annieyro marked this conversation as resolved. Show resolved Hide resolved