payments list

Author: sofiaromorales

api/schema/resolvers/PaymentResolver.js

@@ -41,6 +41,13 @@ module.exports = {
             if (payment.external_uuid && payment.external_uuid_type === 'bitcoin') {
                 return apiModules.paymentManagement.getBitcoinCheckoutUrl(payment.external_uuid)
             }
+        },
+        contributor: (payment, args, { models }) => {
+            return models.Contributor.findOne({
+                where: {
+                    id: payment.contributor_id
+                }
+            })
         }
     },
     Query: {

api/schema/resolvers/ProjectResolver.js

@@ -47,6 +47,13 @@ module.exports = {
                 ]
             })
         },
+        payments: (project, args, { models }) => {
+            return models.Payment.findAll({
+                where: {
+                    project_id: project.id
+                }
+            })
+        },
         averageHourlyPaid: async (project, args, { models }) => {
             validateDatesFormat({
                 fromDate: args.fromDate,

api/schema/types/PaymentType.js

@@ -18,6 +18,7 @@ module.exports = gql`
         allocations: [Allocation]
         isBitcoinInvoiceExpired: Boolean
         bitcoinCheckoutUrl: String
+        contributor: Contributor
     }
     
 

api/schema/types/ProjectType.js

@@ -19,6 +19,7 @@ module.exports = gql`
         expected_budget_currency: String
         allocations(contributorId: Int): [Allocation]
         allocatedPayments: [Payment]
+        payments: [Payment]
         averageHourlyPaid(fromDate: String, toDate: String): Int
         averageIssueCost(fromDate: String, toDate: String): AverageIssueCost
         client: Client

srcv2/operations/mutations/PaymentMutations.js

@@ -1,13 +1,14 @@
 import { gql } from '@apollo/client'
 
 export const CREATE_PAYMENT = gql`
-    mutation CreatePayment($project_id: Int!, $amount: Int!, $date_incurred: String!, $date_paid: String, $currency: String) {
+    mutation CreatePayment($project_id: Int!, $amount: Int!, $date_incurred: String!, $date_paid: String, $currency: String, $contributor_id: Int) {
         createPayment(createFields: {
             amount: $amount
             project_id: $project_id
             date_incurred: $date_incurred
             date_paid: $date_paid
             currency: $currency
+            contributor_id: $contributor_id
         }){
             id
             amount

srcv2/operations/queries/ProjectQueries.js

@@ -39,6 +39,16 @@ export const GET_PROJECT = gql`
                     name
                 }
             }
+            payments {
+                id
+                amount
+                currency
+                contributor {
+                    id
+                    name
+                    github_handle
+                }
+            }
         }
     }
 `

srcv2/pages/AddPaymentPage.js

@@ -16,6 +16,8 @@ import { selectCurrencyInformation } from '../scripts/selectors'
 import { GET_PROJECT } from '../operations/queries/ProjectQueries'
 import { CREATE_PAYMENT } from '../operations/mutations/PaymentMutations'
 
+import { sessionUser } from '../reactivities/variables'
+
 const AddPaymentPage = () => {
 
     const { projectId } = useParams()
@@ -63,7 +65,8 @@ const AddPaymentPage = () => {
             project_id: Number(projectId),
             date_incurred: paymentIncurred,
             date_paid: paymentPaid,
-            currency: project.expected_budget_currency
+            currency: project.expected_budget_currency,
+            contributor_id: sessionUser().id
         }
         const newPayment = await createPayment({ variables })
         if (loadingNewPayment) return 'Loading...'

srcv2/pages/DashboardPage.js

@@ -10,6 +10,8 @@ import Section from '../components/Section'
 
 import { sessionUser } from '../reactivities/variables'
 
+import { getHandle } from '../scripts/selectors'
+
 const DashboardPage = () => {
 
     const walletSetupPrototypeLink = 'https://www.figma.com/proto/qgGWXmprU7vTv7guzWzvML/Project-Trinary?node-id=4561%3A17974&scaling=scale-down&page-id=4076%3A12706&starting-point-node-id=4552%3A15225&show-proto-sidebar=1'
@@ -19,7 +21,7 @@ const DashboardPage = () => {
             <Section backgroundColor={'bg-white'} className={'rounded-b-[70px]'}>
                 <div className='grid grid-flow-row auto-rows-max gap-8'>
                     <p className='text-2xl text-left font-bold'>
-                        {`Welcome, @${sessionUser().github_handle.split('/').pop()}`}
+                        {`Welcome, @${getHandle(sessionUser().github_handle)}`}
                     </p>
                     <div className={`${sessionUser().totalPaid ? 'bg-setlife px-8' : 'bg-white'} rounded grid grid-flow-row auto-rows-max gap-2 py-4`}>
                         {!!sessionUser().totalPaid &&

srcv2/pages/ProjectDetailPage.js

@@ -10,6 +10,8 @@ import Section from '../components/Section'
 
 import { GET_PROJECT } from '../operations/queries/ProjectQueries'
 
+import { getHandle, selectCurrencyInformation } from '../scripts/selectors'
+
 const ProjectDetailPage = (props) => {
 
     const { projectId } = useParams()
@@ -31,6 +33,9 @@ const ProjectDetailPage = (props) => {
 
     const project = dataProject.getProjectById
 
+    console.log('project')
+    console.log(project)
+
     const renderContributors = (contributors) => {
         return contributors.map(contributor => {
             return (
@@ -46,6 +51,37 @@ const ProjectDetailPage = (props) => {
         })
     }
 
+    const renderPayments = (payments) => {
+        return payments.map(payment => {
+            return (
+                <div className='payment bg-white-light rounded-lg p-4 grid grid-flow-row auto-rows-max'>
+                    <div className='flex grid grid-cols-2 gap-4 '>
+                        <div className='text-left'>
+                            {payment.contributor &&
+                                <>
+                                    <p className='text-xl font-bold'>
+                                        {payment.contributor.name}
+                                    </p>
+                                    <p>
+                                        {`@${getHandle(payment.contributor.github_handle)}`}
+                                    </p>
+                                </>
+                            }
+                        </div>
+                        <div>
+                            <p className='text-xl font-bold text-right'>
+                                {`${selectCurrencyInformation({ currency: payment.currency }).symbol} ${payment.amount}`}
+                            </p>
+                        </div>
+                    </div>
+                    <button type='button' className='text-right w-fit ml-auto' onClick={() => history.push(`/payments/edit/${payment.id}`)}>
+                        <Icon className='fas fa-pen text-grey' fontSize='small'/>
+                    </button>
+                </div>
+            )
+        })
+    }
+
     return (
         <div className='ProjectDetailPage mb-10'>
             <button type='button' className='w-fit' onClick={() => history.push('/dashboard')}>
@@ -140,7 +176,7 @@ const ProjectDetailPage = (props) => {
                 </div>
             </Section>
             <Section>
-                <p className='font-bold text-xl mb-4'>
+                <p className='font-bold text-xl mb-2'>
                     Issues
                 </p>
                 <div className='rounded-lg bg-white-light p-4'>
@@ -184,6 +220,14 @@ const ProjectDetailPage = (props) => {
                 </div>
             </Section>
             <OpenInGithubButton url={`${project.github_url}/pulls`}/>
+            <Section>
+                <p className='font-bold text-xl mb-2'>
+                    Payments
+                </p>
+                <div className='grid gap-4'>
+                    {renderPayments(project.payments)}
+                </div>
+            </Section>
             <CreatePaymentFloatingBadge projectId={projectId} />
         </div>
     )

srcv2/scripts/selectors.js

@@ -1,5 +1,9 @@
 import { CURRENCIES } from '../constants'
 
+export const getHandle = (url) => {
+    return url.split('/').pop()
+}
+
 export const selectCurrencyInformation = (props) => {
     return CURRENCIES.find(c => c.name == props.currency)
 }