Additional reward cards for point history (#93)

* Implement additional reward cards for point history. * PR change requests: change reward card order, cleanup.
calblueprint · Apr 18, 2020 · 036b191 · 036b191
1 parent 0fd2f50
commit 036b191
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 18 deletions.
diff --git a/components/rewards/PointsHistory.js b/components/rewards/PointsHistory.js
@@ -29,6 +29,8 @@ function PointsHistory({ transactions }) {
             storeName={item.storeName}
             subtotal={item.subtotal}
             totalSale={item.totalSale}
+            rewardsUnlocked={item.rewardsUnlocked}
+            rewardsApplied={item.rewardsApplied}
           />
         )}
         keyExtractor={item => item.id}

diff --git a/components/rewards/Transaction.js b/components/rewards/Transaction.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { View } from 'react-native';
 import Colors from '../../constants/Colors';
 import { displayDollarValue } from '../../lib/common';
 import { ContentContainer, TransactionCard } from '../../styled/transaction';
@@ -11,30 +12,77 @@ import CircleIcon from '../CircleIcon';
  * */
 
 function Transaction(props) {
-  const { date, storeName, pointsEarned, totalSale } = props;
+  const {
+    date,
+    storeName,
+    pointsEarned,
+    totalSale,
+    rewardsUnlocked,
+    rewardsApplied,
+  } = props;
   const options = {
     weekday: 'short',
     year: 'numeric',
     month: 'short',
     day: 'numeric',
   };
   return (
-    <TransactionCard>
-      <CircleIcon
-        icon="check"
-        iconColor={Colors.primaryGreen}
-        circleColor={Colors.lightestGreen}
-      />
-      <ContentContainer>
-        <Caption color={Colors.secondaryText}>
-          {`${date.toLocaleDateString('en-US', options)} • ${storeName}`}
-        </Caption>
-        <Subhead>{`${pointsEarned} points earned`}</Subhead>
-        <Caption color={Colors.secondaryText}>
-          {`for ${displayDollarValue(totalSale || 0)} of healthy products`}
-        </Caption>
-      </ContentContainer>
-    </TransactionCard>
+    <View>
+      {/* Display rewards unlocked */}
+      {[...Array(rewardsUnlocked).keys()].map(() => (
+        <TransactionCard>
+          <CircleIcon
+            icon="star"
+            iconColor={Colors.primaryGreen}
+            circleColor={Colors.lightestGreen}
+          />
+          <ContentContainer>
+            <Caption color={Colors.secondaryText}>
+              {`${date.toLocaleDateString('en-US', options)} • ${storeName}`}
+            </Caption>
+            <Subhead>{`$5 reward unlocked`}</Subhead>
+            <Caption color={Colors.secondaryText}>
+              {`for 500 earned points`}
+            </Caption>
+          </ContentContainer>
+        </TransactionCard>
+      ))}
+
+      {/* Display points earned */}
+      <TransactionCard>
+        <CircleIcon
+          icon="check"
+          iconColor={Colors.primaryGreen}
+          circleColor={Colors.lightestGreen}
+        />
+        <ContentContainer>
+          <Caption color={Colors.secondaryText}>
+            {`${date.toLocaleDateString('en-US', options)} • ${storeName}`}
+          </Caption>
+          <Subhead>{`${pointsEarned} points earned`}</Subhead>
+          <Caption color={Colors.secondaryText}>
+            {`for ${displayDollarValue(totalSale || 0)} of healthy products`}
+          </Caption>
+        </ContentContainer>
+      </TransactionCard>
+
+      {/* Display rewards applied */}
+      {[...Array(rewardsApplied).keys()].map(() => (
+        <TransactionCard>
+          <CircleIcon
+            icon="star"
+            iconColor={Colors.primaryOrange}
+            circleColor={Colors.lightestOrange}
+          />
+          <ContentContainer>
+            <Caption color={Colors.secondaryText}>
+              {`${date.toLocaleDateString('en-US', options)} • ${storeName}`}
+            </Caption>
+            <Subhead>{`$5 reward redeemed`}</Subhead>
+          </ContentContainer>
+        </TransactionCard>
+      ))}
+    </View>
   );
 }
 
@@ -43,12 +91,16 @@ Transaction.propTypes = {
   storeName: PropTypes.array,
   pointsEarned: PropTypes.number,
   totalSale: PropTypes.number,
+  rewardsUnlocked: PropTypes.number,
+  rewardsApplied: PropTypes.number,
 };
 
 Transaction.defaultProps = {
   storeName: null,
   pointsEarned: 0,
   totalSale: 0,
+  rewardsUnlocked: null,
+  rewardsApplied: 0,
 };
 
 export default Transaction;
diff --git a/lib/rewardsUtils.js b/lib/rewardsUtils.js
@@ -1,8 +1,13 @@
+import { rewardPointValue } from '../constants/Rewards';
 import { getAllTransactions } from './airtable/request';
 
 // Transform date to Date object
 function updateTransactionData(record) {
-  return { ...record, date: new Date(record.date) };
+  const rewardsUnlocked = parseInt(
+    ((record.currentPoints % rewardPointValue) + record.pointsEarned) /
+      rewardPointValue
+  );
+  return { ...record, rewardsUnlocked, date: new Date(record.date) };
 }
 
 export async function getCustomerTransactions(customerId) {