Added multi-bounties to Fund Panel

apps/allocations/app/components/Panel/NewAllocation.js

@@ -152,7 +152,7 @@ class NewAllocation extends React.Component {
       tokenValue
     } = this.state
     const allocation = {
-      budgetId: this.props.budgetId,
+      budgetId: budgetValue.id,
       budgetName: budgetValue,
       balance: BigNumber(amountValue).times(BigNumber(10).pow(tokenValue.decimals)).toString(10),
       description: descriptionValue,

apps/projects/app/components/Form/Field/FieldTitle.js

@@ -20,6 +20,8 @@ const Title = styled(Text.Block)`
   font-weight: bold;
   color: ${props => props.color};
   margin-bottom: ${GU}px;
+  display: flex;
+  align-items: center;
 `
 
 export default FieldTitle

apps/projects/app/components/Form/Field/FormField.js

@@ -4,7 +4,7 @@ import { GU, Text, useTheme, SidePanelSeparator } from '@aragon/ui'
 
 import { FieldTitle } from '.'
 
-const FormField = ({ input, label, required, separator }) => {
+const FormField = ({ input, label, required, separator, help }) => {
   const theme = useTheme()
   // TODO: Currently it will only work with 1 required child
   // const isRequired = React.Children.toArray(children).some(
@@ -20,11 +20,12 @@ const FormField = ({ input, label, required, separator }) => {
             size="xsmall"
             color={`${theme.accent}`}
             title="Required"
-            css={`margin-left: ${GU}px}`}
+            css={`margin-left: ${.5 * GU}px}`}
           >
             *
           </Text>
         )}
+        {help && help}
       </FieldTitle>
       {input}
       {separator && <SidePanelSeparator css="margin-top: 1rem" />}
@@ -34,9 +35,10 @@ const FormField = ({ input, label, required, separator }) => {
 
 FormField.propTypes = {
   children: PropTypes.node,
+  help: PropTypes.node,
+  input: PropTypes.element,
   label: PropTypes.string,
   required: PropTypes.bool,
-  input: PropTypes.element,
   separator: PropTypes.bool,
 }
 

apps/projects/app/components/Panel/FundIssues/EditBounty.js

@@ -5,13 +5,14 @@ import BigNumber from 'bignumber.js'
 import { useAragonApi } from '../../../api-react'
 import { issueShape } from '../../../utils/shapes.js'
 import { IconOpen, IconCollapse } from '../../../assets'
-import { Box, DropDown, GU, useTheme } from '@aragon/ui'
+import { Box, DropDown, GU, Help, useTheme } from '@aragon/ui'
 import { FormField, FieldTitle, DateInput } from '../../Form'
 import {
   AmountInput,
   HorizontalInputGroup,
   HoursInput,
   IssueTitleCompact,
+  NumericInput,
   TokenInput,
 } from './styled'
 
@@ -20,11 +21,12 @@ const DetailsArrow = styled.div`
   margin-right: 12px;
 `
 
-const Deadline = styled.div`
+const Details = styled.div`
   grid-area: deadline;
   background: ${p => p.theme.background};
   border-top: 1px solid ${p => p.theme.border};
-  padding: 0 ${2 * GU}px;
+  padding: ${2 * GU}px;
+  padding-bottom: 0;
   display: ${p => p.detailsOpen ? 'block' : 'none'};
 `
 
@@ -62,7 +64,7 @@ const EditBounty = ({
               grid-template-rows: auto;
               grid-template-areas:
                 "hours exp"
-                "deadline deadline";
+                ${detailsOpen ? '"deadline deadline"' : ''};
               grid-gap: 12px;
               align-items: stretch;
             `}>
@@ -113,19 +115,44 @@ const EditBounty = ({
           />
         </div>
 
-        <Deadline theme={theme} detailsOpen={detailsOpen}>
+        <Details theme={theme} detailsOpen={detailsOpen}>
+          <FormField
+            label="Number of Bounties"
+            required
+            help={
+              <>
+              &nbsp;<Help hint="The work terms">
+              By default, the issues in this funding proposal will not require
+              applications to work on a bounty before work is submitted.
+              To require applications, click on the switch to enable this term.
+              </Help>
+              </>
+            }
+            input={
+              <NumericInput
+                step="1"
+                min="1"
+                type="number"
+                name="bounties"
+                value={bounty.bounties}
+                onChange={e => updateBounty({ bounties: e.target.value })}
+                wide
+              />
+            }
+          />
           <FormField
             label="Deadline"
             input={
               <DateInput
-                name='deadline'
+                name="deadline"
                 value={bounty.deadline}
                 onChange={deadline => updateBounty({ deadline })}
-                width="100%"
+                wide
               />
             }
+            css="margin-bottom: 0"
           />
-        </Deadline>
+        </Details>
       </div>
     </Box>
   )

apps/projects/app/components/Panel/FundIssues/FundIssues.js

@@ -59,8 +59,7 @@ const bountiesFor = ({ bountySettings, issues, tokens }) => issues.reduce(
       deadline: issue.deadline
         ?  new Date(issue.deadline)
         : addHours(new Date(), bountySettings.bountyDeadline),
-      slots: 1,
-      slotsIndex: 0,
+      bounties: issue.bounties || 1,
       payout: issue.payout || 0,
       token: tokens.find(t => t.symbol === issue.symbol) || tokens[0],
     }
@@ -220,6 +219,8 @@ BountyUpdate.propTypes = {
   updateBounty: PropTypes.func.isRequired,
 }
 
+const isFixed = bountySettings => bountySettings.fundingModel === 'Fixed'
+
 const FundForm = ({
   issues,
   bounties,
@@ -316,12 +317,10 @@ const FundForm = ({
               justify-content: space-between;
               margin: ${GU}px 0 ${2 * GU}px 0;
             `}>
-              <Text css="display: flex">
+              <Text css="display: flex; align-items: center">
                 Applications required to work on issues&nbsp;
-                <Help hint="The work terms" css={`margin-left: ${.5 * GU}`}>
-                  By default, the issues in this funding proposal will not require
-                  applications to work on a bounty before work is submitted.
-                  To require applications, click on the switch to enable this term.
+                <Help hint="TDB">
+                TBD
                 </Help>
               </Text>
               <Switch
@@ -338,7 +337,7 @@ const FundForm = ({
           input={
             <>
               <Text css={`display: flex; display: block; margin: ${GU}px 0 ${2 * GU}px 0`}>
-                Enter the estimated hours per issue
+                Enter the {isFixed(bountySettings) ? 'amount' : 'estimated hours'} per issue
               </Text>
               <React.Fragment>
                 {issues.map(issue => (
@@ -362,7 +361,7 @@ const FundForm = ({
       {!!zeroError.length &&
         <ErrorMessage text={
           errorMessages.amount({
-            sayAmount: bountySettings.fundingModel === 'Fixed',
+            sayAmount: isFixed(bountySettings),
             plural: issues.length > 1,
           })}
         />
@@ -428,9 +427,9 @@ const FundIssues = ({ issues, mode }) => {
     }
 
     if (update.hours !== undefined || update.exp) {
-      const { exp, hours } = newBounties[issueId]
+      const { exp, hours, bounties } = newBounties[issueId]
       const { baseRate, expLvls } = bountySettings
-      newBounties[issueId].payout = hours * baseRate * expLvls[exp].mul
+      newBounties[issueId].payout = bounties * hours * baseRate * expLvls[exp].mul
     }
 
     setBounties(newBounties)
@@ -460,6 +459,7 @@ const FundIssues = ({ issues, mode }) => {
       ipfsData.push({
         issueId: bounty.issueId,
         exp: bounty.exp,
+        bounties: bounty.bounties,
         fundingHistory: [
           ...bounty.fundingHistory,
           {
@@ -472,8 +472,8 @@ const FundIssues = ({ issues, mode }) => {
         repo: bounty.repo,
       })
     })
-    const ipfsAddresses = await computeIpfsString(ipfsData)
 
+    const ipfsAddresses = await computeIpfsString(ipfsData)
     const addBountiesF = openSubmission ? api.addBountiesNoAssignment : api.addBounties
     await addBountiesF(
       repoIds,
@@ -487,7 +487,7 @@ const FundIssues = ({ issues, mode }) => {
     ).toPromise()
 
     closePanel()
-  }, [bounties])
+  }, [ bounties, openSubmission ])
 
   if (fundsAvailable.toString() === '0') {
     return (

apps/projects/app/components/Panel/FundIssues/styled.js

@@ -35,8 +35,10 @@ export const HoursInput = styled(TextInput.Number).attrs({
   step: '0.25',
   min: '0',
 })`
-  width: 100%;
-  display: inline-block;
+  padding-top: 3px;
+`
+
+export const NumericInput = styled(TextInput)`
   padding-top: 3px;
 `
 

apps/projects/app/store/helpers/issues.js

@@ -68,13 +68,15 @@ export const loadIpfsData = async ipfsHash => {
     fundingHistory,
     hours,
     repo,
+    bounties,
   } = await ipfsGet(ipfsHash)
   return {
     issueId,
     exp,
     fundingHistory,
     hours,
     repo,
+    bounties,
   }
 }