Weekly Timebox Frontend Changes

package.json

@@ -56,6 +56,8 @@
     "next-transpile-modules": "^8.0.0",
     "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/BackgroundColorPicker.js

@@ -0,0 +1,71 @@
+import React, { useCallback, useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { SketchPicker } from 'react-color'
+import { Typography } from '@material-ui/core'
+import PropTypes from 'prop-types'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  gridList: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+  },
+  previewContainer: {
+    marginTop: 0,
+    margin: theme.spacing(2),
+    width: '100%',
+    height: '60%',
+  },
+  header: {
+    paddingLeft: 0,
+  },
+  divider: {
+    marginBottom: 10,
+  },
+}))
+const BackgroundColorPicker = ({ user, onBackgroundColorSelection }) => {
+  const classes = useStyles()
+  const [selectedColor, setSelectedColor] = useState(
+    user.backgroundColor || '#000'
+  )
+
+  const onColorChanged = useCallback(
+    (color) => {
+      setSelectedColor(color.hex)
+      onBackgroundColorSelection(color.hex)
+    },
+    [onBackgroundColorSelection]
+  )
+
+  return (
+    <div className={classes.root}>
+      <Typography>Select your color</Typography>
+      <div className={classes.gridList}>
+        <SketchPicker
+          color={selectedColor}
+          disableAlpha
+          onChangeComplete={onColorChanged}
+        />
+        <div
+          className={classes.previewContainer}
+          style={{
+            backgroundColor: selectedColor,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+BackgroundColorPicker.propTypes = {
+  user: PropTypes.shape({
+    backgroundColor: PropTypes.string.isRequired,
+  }).isRequired,
+  onBackgroundColorSelection: PropTypes.func.isRequired,
+}
+
+export default BackgroundColorPicker

src/components/BackgroundColorPicker.stories.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import blue from '@material-ui/core/colors/blue'
+import BackgroundColorPicker from './BackgroundColorPicker'
+
+export default {
+  title: 'Components/BackgroundColorPicker',
+  component: BackgroundColorPicker,
+}
+
+const useStyles = makeStyles(() => ({
+  templateContainer: {
+    background: blue['200'],
+    height: 700,
+  },
+}))
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = (args) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.templateContainer}>
+      <BackgroundColorPicker {...args} />
+    </div>
+  )
+}
+
+export const normal = Template.bind({})
+normal.args = {
+  user: {
+    backgroundColor: '#138',
+  },
+  onBackgroundColorSelection: () => {
+    // eslint-disable-next-line no-console
+    console.log('onBackgroundColorSelection')
+  },
+}

src/components/__tests__/BackgroundColorPicker.test.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { SketchPicker } from 'react-color'
+
+jest.mock('react-color')
+
+const mockOnBackgroundColorSelection = jest.fn()
+const mockProps = {
+  user: {
+    backgroundColor: '#FF0000',
+  },
+  onBackgroundColorSelection: mockOnBackgroundColorSelection,
+}
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('Background color picker component', () => {
+  it('renders without error', () => {
+    const BackgroundColorPicker =
+      require('src/components/BackgroundColorPicker').default
+    expect(() =>
+      shallow(<BackgroundColorPicker {...mockProps} />)
+    ).not.toThrow()
+  })
+
+  it('calls onBackgroundColorSelection callback when the color changes', () => {
+    const BackgroundColorPicker =
+      require('src/components/BackgroundColorPicker').default
+    const wrapper = shallow(<BackgroundColorPicker {...mockProps} />)
+
+    // Mock that our color picker fires its change callback
+    const colorData = {
+      hex: '#CDCDCD',
+    }
+    wrapper.find(SketchPicker).prop('onChangeComplete')(colorData)
+    expect(mockOnBackgroundColorSelection).toHaveBeenCalledWith('#CDCDCD')
+  })
+})

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}%