Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Program tag components #133

Merged
merged 7 commits into from
May 2, 2020
Merged

Program tag components #133

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
765c59d
componentalizing tags
thumn Apr 20, 2020
f5fe5e0
finished tag componentalization
thumn Apr 27, 2020
0b1c723
added no programs accepted text
thumn Apr 27, 2020
6341cce
merge conflict
thumn Apr 27, 2020
1469925
refactored filter chips in store list screen
thumn Apr 30, 2020
8950908
fixed null selectedFunc issue
thumn Apr 30, 2020
e88ffbe
Adjust filter chip text top margin alignment
wangannie Apr 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions components/store/ProgramTag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { FontAwesome5 } from '@expo/vector-icons';
import PropTypes from 'prop-types';
import React from 'react';
import { Chip } from 'react-native-paper';
import Colors from '../../constants/Colors';
import { styles } from '../../styled/store';
import { Caption } from '../BaseComponents';

/**
* @prop
* */

// Capitalizes the first letter of every word in a phrase.
// Note: catch special cases like certain words that are all uppercase.
function capitalizeFirstLetters(word) {
// Separate each individual word in phrase.

// Special case since SNAP is all uppercase
if (word.toLowerCase() === 'snap match') {
return 'SNAP Match';
}

const splitWord = word.toLowerCase().split(' ');

for (var i = 0; i < splitWord.length; i++) {
splitWord[i] =
splitWord[i].charAt(0).toUpperCase() + splitWord[i].substring(1);
}

return splitWord.join(' ');
}

// program: a string representing the program name (valid programs are keys in programToIcon)
function ProgramTag({ program }) {
let programLabel = program;

// Error checking: We'll fix the program label if it was somehow entered incorrectly
annieyro marked this conversation as resolved.
Show resolved Hide resolved
// i.e. "WIC" was entered as "WIc" or "SNAP Match" was entered as "snap Match"
// Hopefully ensures that chips will work most of the time, only not displaying if
// they enter the wrong string of words
if (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice that you considered these cases, but wouldn't this input only come from within our code? Why would we need this here?

Copy link
Contributor Author

@thumn thumn Apr 30, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured that the program name gets passed from so many sources (i.e. store card, store details, store list and maybe more in the future) so if there's ever a case someone spells it wrong or something it would still work ?? it's a bit extra but i guess it ensures that the chips still function correctly even if there's a small capitalization error in the code

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i agree with this sentiment much human error

(program.toLowerCase() === 'wic' && program !== 'WIC') ||
(program.toLowerCase() === 'ebt' && program !== 'EBT')
) {
programLabel = program.toUpperCase();
}

if (
(program.toLowerCase() === 'snap match' && program !== 'SNAP Match') ||
(program.toLowerCase() === 'healthy rewards' &&
program !== 'Healthy Rewards')
) {
programLabel = capitalizeFirstLetters(program);
}

const programToIcon = {
EBT: 'credit-card',
WIC: 'heart',
'SNAP Match': 'carrot',
'Healthy Rewards': 'star',
};

if (!Object.keys(programToIcon).includes(program)) {
return null;
}

return (
<Chip
icon={() => (
<FontAwesome5
name={programToIcon[program]}
solid
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>{programLabel}</Caption>
</Chip>
);
}

ProgramTag.propTypes = {
program: PropTypes.string.isRequired,
};

export default ProgramTag;
69 changes: 5 additions & 64 deletions components/store/StoreCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useNavigation } from '@react-navigation/native';
import PropTypes from 'prop-types';
import React from 'react';
import { Dimensions, TouchableOpacity } from 'react-native';
import { Chip } from 'react-native-paper';
import Colors from '../../constants/Colors';
import {
getMaxWidth,
Expand All @@ -19,9 +18,9 @@ import {
DividerBar,
StoreCardContainer,
StoreDetailText,
styles,
} from '../../styled/store';
import { Caption, Title } from '../BaseComponents';
import ProgramTag from './ProgramTag';

/**
* @prop
Expand Down Expand Up @@ -90,68 +89,10 @@ export default function StoreCard({ store, storeList, seeDistance }) {
flexWrap: 'wrap',
marginTop: 6,
}}>
{snapOrEbtAccepted && (
<Chip
icon={() => (
<FontAwesome5
name="credit-card"
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>EBT</Caption>
</Chip>
)}
{wic && (
<Chip
icon={() => (
<FontAwesome5
name="heart"
solid
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>WIC</Caption>
</Chip>
)}
{couponProgramPartner && (
<Chip
icon={() => (
<FontAwesome5
name="carrot"
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>SNAP Match</Caption>
</Chip>
)}
{rewardsAccepted && (
<Chip
icon={() => (
<FontAwesome5
name="star"
solid
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>Healthy Rewards</Caption>
</Chip>
)}
{snapOrEbtAccepted && <ProgramTag program="EBT" />}
annieyro marked this conversation as resolved.
Show resolved Hide resolved
{wic && <ProgramTag program="WIC" />}
{couponProgramPartner && <ProgramTag program="SNAP Match" />}
{rewardsAccepted && <ProgramTag program="Healthy Rewards" />}
</InLineContainer>
)}
{seeDistance && (
Expand Down
169 changes: 61 additions & 108 deletions screens/map/StoreDetailsScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Linking } from 'expo';
import PropTypes from 'prop-types';
import React from 'react';
import { ScrollView, TouchableOpacity, View } from 'react-native';
import { Chip } from 'react-native-paper';
import {
Body,
Caption,
Expand All @@ -12,6 +11,7 @@ import {
NavTitle,
TabSelected,
} from '../../components/BaseComponents';
import ProgramTag from '../../components/store/ProgramTag';
import StoreHours from '../../components/store/StoreHours';
import Colors from '../../constants/Colors';
import { openDirections, writeToClipboard } from '../../lib/mapUtils';
Expand Down Expand Up @@ -162,113 +162,66 @@ export default class StoreDetailsScreen extends React.Component {
<ColumnContainer style={{ width: '100%' }}>
<Body style={{ marginBottom: 8 }}>Accepted Programs</Body>
{/* Chips */}
<RowContainer>
<View
style={{
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-evenly',
width: '40%',
}}>
{snapOrEbtAccepted && (
<Chip
icon={() => (
<FontAwesome5
name="credit-card"
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>EBT</Caption>
</Chip>
)}
{wic && (
<Chip
icon={() => (
<FontAwesome5
name="heart"
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>WIC</Caption>
</Chip>
)}
{couponProgramPartner && (
<Chip
icon={() => (
<FontAwesome5
name="carrot"
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>SNAP Match</Caption>
</Chip>
)}

{rewardsAccepted && (
<Chip
icon={() => (
<FontAwesome5
name="star"
solid
size={10}
color={Colors.darkerGreen}
style={{ marginTop: -1 }}
/>
)}
textStyle={styles.tagChipText}
style={styles.tagChip}>
<Caption color={Colors.darkerGreen}>
Healthy Rewards
</Caption>
</Chip>
)}
</View>
<View
style={{
flexDirection: 'column',
flexWrap: 'wrap',
maxWidth: '60%',
}}>
{snapOrEbtAccepted && (
<View style={styles.tagChipDesc}>
<Body>Accepts SNAP/EBT</Body>
</View>
)}
{wic && (
<View style={styles.tagChipDesc}>
<Body numberOfLines={1} ellipsizeMode="tail">
WIC approved
</Body>
</View>
)}
{couponProgramPartner && (
<View style={styles.tagChipDesc}>
<Body numberOfLines={1} ellipsizeMode="tail">
Accepts SNAP Matching
</Body>
</View>
)}
{rewardsAccepted && (
<View style={styles.tagChipDesc}>
<Body numberOfLines={1} ellipsizeMode="tail">
Accepts Healthy Rewards
</Body>
</View>
)}
</View>
</RowContainer>
{snapOrEbtAccepted ||
wic ||
couponProgramPartner ||
rewardsAccepted ? (
<RowContainer>
<View
style={{
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-evenly',
width: '40%',
}}>
{snapOrEbtAccepted && <ProgramTag program="EBT" />}
{wic && <ProgramTag program="WIC" />}
{couponProgramPartner && (
<ProgramTag program="SNAP Match" />
)}
{rewardsAccepted && (
<ProgramTag program="Healthy Rewards" />
)}
</View>
<View
style={{
flexDirection: 'column',
flexWrap: 'wrap',
maxWidth: '60%',
}}>
{snapOrEbtAccepted && (
<View style={styles.tagChipDesc}>
<Body>Accepts SNAP/EBT</Body>
</View>
)}
{wic && (
<View style={styles.tagChipDesc}>
<Body numberOfLines={1} ellipsizeMode="tail">
WIC approved
</Body>
</View>
)}
{couponProgramPartner && (
<View style={styles.tagChipDesc}>
<Body numberOfLines={1} ellipsizeMode="tail">
Accepts SNAP Matching
</Body>
</View>
)}
{rewardsAccepted && (
<View style={styles.tagChipDesc}>
<Body numberOfLines={1} ellipsizeMode="tail">
Accepts Healthy Rewards
</Body>
</View>
)}
</View>
</RowContainer>
) : (
<Body color={Colors.secondaryText}>
No programs accepted at this time
</Body>
)}
</ColumnContainer>
</InLineContainer>
</ScrollView>
Expand Down