calblueprint · wangannie · May 3, 2020 · Apr 20, 2020 · Apr 27, 2020 · Apr 27, 2020
diff --git a/components/store/AcceptedPrograms.js b/components/store/AcceptedPrograms.js
@@ -0,0 +1,86 @@
+import { FontAwesome5 } from '@expo/vector-icons';
+import { Linking } from 'expo';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Colors from '../../constants/Colors';
+import { ColumnContainer, SpaceBetweenRowContainer } from '../../styled/shared';
+import { styles } from '../../styled/store';
+import { Body, TabSelected } from '../BaseComponents';
+import ProgramTag from './ProgramTag';
+
+/**
+ * @prop
+ * */
+
+const programToDesc = {
+  EBT: 'Accepts SNAP/EBT',
+  WIC: 'WIC approved',
+  'SNAP Match':
+    'Spend $5 with SNAP and include fresh produce in purchase to get $5 free on fresh produce',
+  'Healthy Rewards': 'Participates in Healthy Rewards',
+};
+
+const snapURL = 'https://dccentralkitchen.org/5for5/';
+
+function Program({ programName }) {
+  return (
+    <SpaceBetweenRowContainer>
+      <ProgramTag program={programName} />
+      <View style={styles.tagChipDesc}>
+        <Body>{programToDesc[programName]}</Body>
+        {programName === 'SNAP Match' && (
+          <TouchableOpacity
+            style={{ flexDirection: 'row' }}
+            onPress={() => Linking.openURL(snapURL)}>
+            <TabSelected
+              color={Colors.primaryOrange}
+              style={{ marginRight: 4 }}>
+              Learn More
+            </TabSelected>
+            <FontAwesome5
+              name="external-link-alt"
+              size={14}
+              color={Colors.primaryOrange}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    </SpaceBetweenRowContainer>
+  );
+}
+
+export default function AcceptedPrograms({
+  snapOrEbtAccepted,
+  wic,
+  couponProgramPartner,
+  rewardsAccepted,
+}) {
+  return (
+    <ColumnContainer
+      style={{ justifyContent: 'space-between', paddingRight: '20%' }}>
+      {snapOrEbtAccepted && <Program programName="EBT" />}
+      {wic && <Program programName="WIC" />}
+      {couponProgramPartner && <Program programName="SNAP Match" />}
+      {rewardsAccepted && <Program programName="Healthy Rewards" />}
+    </ColumnContainer>
+  );
+}
+
+AcceptedPrograms.propTypes = {
+  snapOrEbtAccepted: PropTypes.bool,
+  wic: PropTypes.bool,
+  couponProgramPartner: PropTypes.bool,
+  rewardsAccepted: PropTypes.bool,
+};
+
+AcceptedPrograms.defaultProps = {
+  snapOrEbtAccepted: false,
+  wic: false,
+  couponProgramPartner: false,
+  rewardsAccepted: false,
+};
+
+Program.propTypes = {
+  programName: PropTypes.string.isRequired,
+};
diff --git a/components/store/ProgramTag.js b/components/store/ProgramTag.js
@@ -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
+  // 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 (
+    (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;
diff --git a/components/store/StoreCard.js b/components/store/StoreCard.js
@@ -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,
@@ -19,9 +18,9 @@ import {
   DividerBar,
   StoreCardContainer,
   StoreDetailText,
-  styles,
 } from '../../styled/store';
 import { Caption, Title } from '../BaseComponents';
+import ProgramTag from './ProgramTag';
 
 /**
  * @prop
@@ -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" />}
+            {wic && <ProgramTag program="WIC" />}
+            {couponProgramPartner && <ProgramTag program="SNAP Match" />}
+            {rewardsAccepted && <ProgramTag program="Healthy Rewards" />}
           </InLineContainer>
         )}
         {seeDistance && (