[WIP] Weekly Timebox Frontend Changes

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

@@ -12,14 +12,25 @@ export default {
 const Template = (args) => <GroupGoalNotification {...args} />
 export const completed = Template.bind({})
 completed.args = {
+  open: true,
   mode: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
   impactTitle: 'Fund {{count}} visits from a community healthworker',
   impactCountPerMetric: 3,
 }
 
 export const started = Template.bind({})
 started.args = {
+  open: true,
   mode: GROUP_IMPACT_SIDEBAR_STATE.NEW,
   impactTitle: 'Fund {{count}} visits from a community healthworker',
   impactCountPerMetric: 3,
 }
+
+export const startedWithDate = Template.bind({})
+startedWithDate.args = {
+  open: true,
+  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
 
@@ -179,6 +185,7 @@ const GroupImpact = ({ user }) => {
         leaderboard={leaderboard}
         userId={userId}
         groupImpactHistory={groupImpactHistory}
+        dateExpires={dateExpires}
       />
       {sidebarMode !== GROUP_IMPACT_SIDEBAR_STATE.NORMAL && (
         <Slide direction="right" in={!sidebarOpen}>
@@ -192,6 +199,7 @@ const GroupImpact = ({ user }) => {
                 onNextGoal={beginNewGoal}
                 onGoalStarted={onGoalStarted}
                 impactCountPerMetric={impactCountPerMetric}
+                dateStarted={dateExpires ? dateStarted : null}
               />
             </div>
           </Fade>
@@ -215,6 +223,8 @@ GroupImpact.propTypes = {
           whyValuableDescription: PropTypes.string.isRequired,
           impactCountPerMetric: PropTypes.number.isRequired,
         }),
+        dateStarted: PropTypes.string,
+        dateExpires: PropTypes.string,
       }).isRequired,
       groupImpactMetricCount: PropTypes.number,
     }).isRequired,
@@ -260,6 +270,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
       }
@@ -35,6 +37,14 @@ export default createFragmentContainer(GroupImpact, {
           referralDollarContribution
         }
       }
+      groupImpactHistory {
+        dollarContribution
+        tabDollarContribution
+        searchDollarContribution
+        shopDollarContribution
+        referralDollarContribution
+        dateStarted
+      }
     }
   `,
 })

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,20 @@ const GroupImpactSidebar = ({
                     </Button>
                   )}
                 </div>
+                {dateExpires && (
+                  <Countdown
+                    date={dateExpires}
+                    intervalDelay={0}
+                    precision={3}
+                    renderer={({ hours, days }) => (
+                      <Typography className={classes.robotoBold}>
+                        {`${days > 0 ? `${days} Days` : ``} ${
+                          hours > 0 ? `${hours} Hours` : ``
+                        } ${days > 0 || hours > 0 ? ` Left` : ``}`}
+                      </Typography>
+                    )}
+                  />
+                )}
                 <Typography variant="body2">{impactTitleCompiled}</Typography>
                 <Typography className={classes.robotoBold} variant="h3">
                   {absoluteProgress}%
@@ -608,6 +630,7 @@ GroupImpactSidebar.propTypes = {
       whyValuableDescription: PropTypes.string.isRequired,
       impactCountPerMetric: PropTypes.number,
     }),
+    dateExpires: PropTypes.string,
   }).isRequired,
   lastGroupImpactMetric: PropTypes.shape({
     dollarProgress: PropTypes.number.isRequired,
@@ -618,6 +641,7 @@ GroupImpactSidebar.propTypes = {
       whyValuableDescription: PropTypes.string.isRequired,
       impactCountPerMetric: PropTypes.number,
     }),
+    dateExpires: PropTypes.string,
   }),
   nextGoalButtonClickHandler: PropTypes.func,
   openHandler: PropTypes.func,

src/components/groupImpactComponents/GroupImpactSidebar.stories.jsx

@@ -191,6 +191,26 @@ aboveMax.args = {
   groupImpactSidebarState: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
 }
 
+export const withTimeboxed = Template.bind({})
+withTimeboxed.args = {
+  userId: 'bcde',
+  open: true,
+  groupImpactMetric: {
+    dollarProgress: 5.6e6,
+    dollarProgressFromSearch: 1e5,
+    dollarGoal: 5e6,
+    impactMetric: {
+      impactTitle: 'Provide 2 home visits from a community health worker',
+      whyValuableDescription:
+        'Community health workers provide quality health care to those who might not otherwise have access.',
+    },
+    dateStarted: '2023-09-19T10:00:00.000Z',
+    dateExpires: '2023-09-23T10:00:00.000Z',
+  },
+  groupImpactMetricCount: 5,
+  groupImpactSidebarState: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
+}
+
 export const withLeaderboard = Template.bind({})
 withLeaderboard.args = {
   userId: 'bcde',

src/components/groupImpactComponents/__tests__/GroupGoalNotification.test.js

@@ -100,4 +100,18 @@ describe('GroupGoalNotification component', () => {
       mode: GROUP_IMPACT_SIDEBAR_STATE.NEW,
     })
   })
+
+  it('displays correct string if dateStarted valid is correct', () => {
+    const GroupGoalNotification =
+      require('src/components/groupImpactComponents/GroupGoalNotification').default
+    const mockProps = {
+      ...getMockProps(),
+      dateStarted: '2020-01-10T10:00:00.000Z',
+      mode: GROUP_IMPACT_SIDEBAR_STATE.NEW,
+    }
+    const wrapper = mount(<GroupGoalNotification {...mockProps} />)
+    expect(wrapper.find(Typography).first().text()).toEqual(
+      `GOAL STARTED - Week of 1/10/2020: impact title 5`
+    )
+  })
 })

src/components/groupImpactComponents/__tests__/GroupImpact.test.js

@@ -382,4 +382,77 @@ describe('GroupImpact component', () => {
     const wrapper = mount(<GroupImpact {...mockProps} />)
     expect(wrapper.find(GroupGoalNotification).exists()).toEqual(false)
   })
+
+  it('displays values correctly if timeboxed', () => {
+    const GroupImpact =
+      require('src/components/groupImpactComponents/GroupImpact').default
+    const mockProps = {
+      user: {
+        id: 'user-id',
+        cause: {
+          groupImpactMetric: {
+            id: 'abcd',
+            dollarProgress: 250,
+            dollarProgressFromSearch: 125,
+            dollarGoal: 600,
+            impactMetric: {
+              impactTitle: 'impact-title',
+              whyValuableDescription: 'why-valuable-description',
+              impactCountPerMetric: 5,
+            },
+            dateStarted: '2023-09-19T10:00:00.000Z',
+            dateExpires: '2023-09-23T10:00:00.000Z',
+          },
+        },
+      },
+    }
+
+    localstorageManager.getNumericItem.mockReturnValue(0)
+    localstorageGroupImpactManager.getLastSeenGroupImpactMetric.mockReturnValue(
+      mockProps.user.cause.groupImpactMetric
+    )
+    const wrapper = mount(<GroupImpact {...mockProps} />)
+    expect(
+      wrapper.find(GroupGoalNotification).first().prop('dateStarted')
+    ).toEqual(mockProps.user.cause.groupImpactMetric.dateStarted)
+    expect(wrapper.find(GroupImpactSidebar).prop('dateExpires')).toEqual(
+      mockProps.user.cause.groupImpactMetric.dateExpires
+    )
+  })
+
+  it('displays values correctly if not timeboxed', () => {
+    const GroupImpact =
+      require('src/components/groupImpactComponents/GroupImpact').default
+    const mockProps = {
+      user: {
+        id: 'user-id',
+        cause: {
+          groupImpactMetric: {
+            id: 'abcd',
+            dollarProgress: 250,
+            dollarProgressFromSearch: 125,
+            dollarGoal: 600,
+            impactMetric: {
+              impactTitle: 'impact-title',
+              whyValuableDescription: 'why-valuable-description',
+              impactCountPerMetric: 5,
+            },
+            dateStarted: '2023-09-19T10:00:00.000Z',
+          },
+        },
+      },
+    }
+
+    localstorageManager.getNumericItem.mockReturnValue(0)
+    localstorageGroupImpactManager.getLastSeenGroupImpactMetric.mockReturnValue(
+      mockProps.user.cause.groupImpactMetric
+    )
+    const wrapper = mount(<GroupImpact {...mockProps} />)
+    expect(
+      wrapper.find(GroupGoalNotification).first().prop('dateStarted')
+    ).toEqual(null)
+    expect(wrapper.find(GroupImpactSidebar).prop('dateExpires')).toEqual(
+      undefined
+    )
+  })
 })