More work

src/components/groupImpactComponents/GroupGoalNotification.stories.jsx

@@ -12,15 +12,26 @@ 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

@@ -185,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}>

src/components/groupImpactComponents/GroupImpactSidebar.js

@@ -436,9 +436,8 @@ const GroupImpactSidebar = ({
                     intervalDelay={0}
                     precision={3}
                     renderer={({ hours, days }) => (
-                      <Typography>
-                        `${days > 0 ? `${days}days` : ``} $
-                        {hours > 0 ? `${hours}hours` : ``}`
+                      <Typography className={classes.robotoBold}>
+                        {`${days > 0 ? `${days} Days` : ``} ${hours > 0 ? `${hours} Hours` : ``} ${days > 0 || hours > 0 ? ` Left`: ``}`}
                       </Typography>
                     )}
                   />
@@ -629,6 +628,7 @@ GroupImpactSidebar.propTypes = {
       whyValuableDescription: PropTypes.string.isRequired,
       impactCountPerMetric: PropTypes.number,
     }),
+    dateExpires: PropTypes.string,
   }).isRequired,
   lastGroupImpactMetric: PropTypes.shape({
     dollarProgress: PropTypes.number.isRequired,
@@ -639,6 +639,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__/GroupImpactSidebar.test.js

@@ -13,6 +13,7 @@ import { windowOpenTop } from 'src/utils/navigation'
 import SearchIcon from '@material-ui/icons/Search'
 import TabIcon from '@material-ui/icons/Tab'
 import GroupImpactLeaderboard from '../GroupImpactLeaderboard'
+import Countdown from 'react-countdown'
 
 jest.mock('ga-gtag')
 jest.mock('src/utils/navigation')
@@ -68,11 +69,12 @@ describe('GroupImpactSidebar component', () => {
     expect(wrapper.find('span').exists()).toBe(false)
   })
 
-  it('displays impactTitle', () => {
+  it('displays group goal and impactTitle', () => {
     const GroupImpactSidebar =
       require('src/components/groupImpactComponents/GroupImpactSidebar').default
     const mockProps = getMockProps()
     const wrapper = shallow(<GroupImpactSidebar {...mockProps} />)
+    expect(wrapper.find(Typography).first().text()).toEqual('GROUP GOAL')
     expect(wrapper.find(Typography).at(1).text()).toEqual(
       mockProps.groupImpactMetric.impactMetric.impactTitle
     )
@@ -480,6 +482,30 @@ describe('GroupImpactSidebar component', () => {
     expect(wrapper.find(GroupImpactLeaderboard).exists()).toEqual(false)
   })
 
+  it('renders weekly group goal text if applicable', () => {
+    const GroupImpactSidebar =
+      require('src/components/groupImpactComponents/GroupImpactSidebar').default
+    const mockProps = {
+      ...getMockProps(),
+      groupImpactMetric: {
+        dollarProgressFromSearch: 125,
+        dollarProgress: 250,
+        dollarGoal: 600,
+        impactMetric: {
+          impactTitle: '{{count}} impact-title {{multiple}}',
+          whyValuableDescription: 'why-valuable-description',
+          impactCountPerMetric: 1,
+        },
+        dateExpires: '2023-09-23T10:00:00.000Z',
+      },
+      groupImpactMetricCount: 1,
+    }
+    const wrapper = shallow(<GroupImpactSidebar {...mockProps} />)
+    expect(wrapper.find(Countdown).exists()).toEqual(true)
+    expect(wrapper.find(Countdown).prop('dateExpires')).toEqual(mockProps.dateExpires)
+    expect(wrapper.find(Typography).first().text()).toEqual('WEEKLY GROUP GOAL')
+  })
+
   it('renders a leaderboard if applicable', () => {
     const GroupImpactSidebar =
       require('src/components/groupImpactComponents/GroupImpactSidebar').default