Merge branch 'jtan/add-new-text' into dev

package.json

@@ -57,6 +57,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
+    "react-countdown": "^2.3.5",
     "react-dom": "^17.0.2",
     "react-firebaseui": "^5.0.2",
     "react-relay": "^12.0.0",

src/components/groupImpactComponents/GroupGoalNotification.js

@@ -7,6 +7,7 @@ import { ArrowForwardIos } from '@material-ui/icons'
 import { GROUP_IMPACT_SIDEBAR_STATE } from 'src/utils/constants'
 import gtag from 'ga-gtag'
 import Handlebars from 'handlebars'
+import moment from 'moment'
 import Notification from '../Notification'
 
 const useStyles = makeStyles((theme) => ({
@@ -64,6 +65,7 @@ const GroupGoalNotification = ({
   onGoalStarted,
   impactTitle,
   impactCountPerMetric,
+  dateStarted,
 }) => {
   const impactTitleTemplate = Handlebars.compile(impactTitle)
   const impactTitleCompiled = impactTitleTemplate({
@@ -93,6 +95,10 @@ const GroupGoalNotification = ({
     onGoalStarted()
   }, [mode, onGoalStarted])
 
+  const dateStartedMoment = dateStarted && moment(dateStarted).format('l')
+  const startingString = `${
+    mode === GROUP_IMPACT_SIDEBAR_STATE.COMPLETED ? 'COMPLETED' : 'GOAL STARTED'
+  }${dateStarted ? ` - Week of ${dateStartedMoment}` : ''}`
   return (
     <div className={classes.wrapper}>
       <Notification
@@ -101,10 +107,7 @@ const GroupGoalNotification = ({
         open={open}
         text={
           <Typography className={classes.notificationText} variant="body2">
-            {mode === GROUP_IMPACT_SIDEBAR_STATE.COMPLETED
-              ? 'COMPLETED'
-              : 'GOAL STARTED'}
-            : {impactTitleCompiled}
+            {startingString}: {impactTitleCompiled}
           </Typography>
         }
         buttons={
@@ -151,6 +154,11 @@ GroupGoalNotification.propTypes = {
   onGoalStarted: PropTypes.func.isRequired,
   impactTitle: PropTypes.string.isRequired,
   impactCountPerMetric: PropTypes.number.isRequired,
+  dateStarted: PropTypes.string,
+}
+
+GroupGoalNotification.defaultProps = {
+  dateStarted: null,
 }
 
 export default GroupGoalNotification

src/components/groupImpactComponents/GroupGoalNotification.stories.jsx

@@ -22,4 +22,5 @@ started.args = {
   mode: GROUP_IMPACT_SIDEBAR_STATE.NEW,
   impactTitle: 'Fund {{count}} visits from a community healthworker',
   impactCountPerMetric: 3,
+  dateStarted: '2020-01-10T10:00:00.000Z',
 }

src/components/groupImpactComponents/GroupImpact.js

@@ -58,8 +58,14 @@ const GroupImpact = ({ user }) => {
     GROUP_IMPACT_SIDEBAR_STATE.NORMAL
   )
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const { id, dollarGoal, dollarProgressFromSearch, impactMetric } =
-    groupImpactMetric
+  const {
+    id,
+    dollarGoal,
+    dollarProgressFromSearch,
+    impactMetric,
+    dateStarted,
+    dateExpires,
+  } = groupImpactMetric
   const { impactTitle, impactCountPerMetric, whyValuableDescription } =
     impactMetric
 
@@ -192,6 +198,7 @@ const GroupImpact = ({ user }) => {
                 onNextGoal={beginNewGoal}
                 onGoalStarted={onGoalStarted}
                 impactCountPerMetric={impactCountPerMetric}
+                dateStarted={dateExpires ? dateStarted : null}
               />
             </div>
           </Fade>
@@ -215,6 +222,8 @@ GroupImpact.propTypes = {
           whyValuableDescription: PropTypes.string.isRequired,
           impactCountPerMetric: PropTypes.number.isRequired,
         }),
+        dateStarted: PropTypes.string,
+        dateExpires: PropTypes.string,
       }).isRequired,
       groupImpactMetricCount: PropTypes.number,
     }).isRequired,
@@ -260,6 +269,8 @@ GroupImpactWrapper.propTypes = {
           whyValuableDescription: PropTypes.string.isRequired,
           impactCountPerMetric: PropTypes.number,
         }),
+        dateStarted: PropTypes.string,
+        dateExpires: PropTypes.string,
       }),
       groupImpactMetricCount: PropTypes.number,
     }).isRequired,

src/components/groupImpactComponents/GroupImpact.stories.jsx

@@ -154,6 +154,8 @@ standardView.args = {
             'Community health workers provide quality health care to those who might not otherwise have access.',
           impactCountPerMetric: 3,
         },
+        dateStarted: '2020-01-10T10:00:00.000Z',
+        dateExpires: '2020-07-10T10:00:00.000Z',
       },
     },
   },

src/components/groupImpactComponents/GroupImpactContainer.js

@@ -16,6 +16,8 @@ export default createFragmentContainer(GroupImpact, {
             whyValuableDescription
             impactCountPerMetric
           }
+          dateStarted
+          dateExpires
         }
         groupImpactMetricCount
       }

src/components/groupImpactComponents/GroupImpactSidebar.js

@@ -30,6 +30,7 @@ import SearchIcon from '@material-ui/icons/Search'
 import TabIcon from '@material-ui/icons/Tab'
 import ToggleButton from '@material-ui/lab/ToggleButton'
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+import Countdown from 'react-countdown'
 import VerticalLinearProgress from '../VerticalLinearProgress'
 import GroupImpactLeaderboard from './GroupImpactLeaderboard'
 import GroupImpactContributionWidget from './GroupImpactContributionWidget'
@@ -253,8 +254,15 @@ const GroupImpactSidebar = ({
     setSelectedMode(newValue)
     event.stopPropagation()
   }
-  const { dollarProgress, dollarGoal, dollarProgressFromSearch, impactMetric } =
-    displayingOldGoal ? lastGroupImpactMetric : groupImpactMetric
+
+  const {
+    dollarProgress,
+    dollarGoal,
+    dollarProgressFromSearch,
+    impactMetric,
+    dateExpires,
+  } = displayingOldGoal ? lastGroupImpactMetric : groupImpactMetric
+
   const { impactTitle, whyValuableDescription, impactCountPerMetric } =
     impactMetric
   const classes = useStyles()
@@ -406,7 +414,7 @@ const GroupImpactSidebar = ({
               <div className={classes.sidebarText}>
                 <div className={classes.goalText}>
                   <Typography className={classes.robotoBold} variant="h5">
-                    GROUP GOAL
+                    {`${dateExpires ? 'WEEKLY ' : ''}GROUP GOAL`}
                   </Typography>
                   {groupImpactSidebarState ? (
                     <span className={classes.badge}>
@@ -422,6 +430,19 @@ const GroupImpactSidebar = ({
                     </Button>
                   )}
                 </div>
+                {dateExpires && (
+                  <Countdown
+                    date={dateExpires}
+                    intervalDelay={0}
+                    precision={3}
+                    renderer={({ hours, days }) => (
+                      <Typography>
+                        `${days > 0 ? `${days}days` : ``} $
+                        {hours > 0 ? `${hours}hours` : ``}`
+                      </Typography>
+                    )}
+                  />
+                )}
                 <Typography variant="body2">{impactTitleCompiled}</Typography>
                 <Typography className={classes.robotoBold} variant="h3">
                   {absoluteProgress}%

yarn.lock

@@ -13643,6 +13643,13 @@ react-color@^2.19.3:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-countdown@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.5.tgz#70c035b5cbc7e8fdb4ad91fe5f44afd7a7933a68"
+  integrity sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-docgen-typescript@^2.1.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"