replaced similar components (#1177)

src/components/GrantRequest/TeamMemberItem.css → src/components/GrantRequest/BreakdownItem.css

@@ -1,4 +1,4 @@
-.TeamMemberItem {
+.BreakdownItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,15 +12,15 @@
   cursor: pointer;
 }
 
-.TeamMemberItem__Concept {
+.BreakdownItem__Title {
   margin: 0;
   font-weight: var(--weight-semi-bold);
   font-size: 15px;
   letter-spacing: 0.4px;
   color: var(--black-700);
 }
 
-.TeamMemberItem__Duration {
+.BreakdownItem__Subtitle {
   margin: 0;
   font-weight: var(--weight-normal);
   font-size: 11px;
@@ -29,14 +29,14 @@
   color: var(--black-600);
 }
 
-.TeamMemberItem__BudgetContainer {
+.BreakdownItem__Container {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 18px;
 }
 
-.TeamMemberItem__Budget {
+.BreakdownItem__Extra {
   font-weight: var(--weight-normal);
   font-size: 15px;
   line-height: 28px;

src/components/GrantRequest/BreakdownItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
+
+import './BreakdownItem.css'
+
+interface Props {
+  title: string
+  subtitle: string
+  extra?: string
+  onClick: () => void
+}
+
+function BreakdownItem({ title, subtitle, extra, onClick }: Props) {
+  return (
+    <div role="button" className="BreakdownItem" onClick={onClick}>
+      <div>
+        <h3 className="BreakdownItem__Title">{title}</h3>
+        <span className="BreakdownItem__Subtitle">{subtitle}</span>
+      </div>
+      <div className="BreakdownItem__Container">
+        {extra && <span className="BreakdownItem__Extra">{extra}</span>}
+        <ChevronRightCircleOutline />
+      </div>
+    </div>
+  )
+}
+
+export default BreakdownItem

src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx

@@ -8,14 +8,15 @@ import {
   GrantRequestDueDiligence,
 } from '../../entities/Grant/types'
 import { userModifiedForm } from '../../entities/Proposal/utils'
+import { CURRENCY_FORMAT_OPTIONS } from '../../helpers'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import SubLabel from '../Common/SubLabel'
 import Label from '../Common/Typography/Label'
 import ProjectRequestSection from '../ProjectRequest/ProjectRequestSection'
 
 import AddBox from './AddBox'
 import AddBudgetBreakdownModal from './AddBudgetBreakdownModal'
-import BudgetBreakdownConcept from './BudgetBreakdownConcept'
+import BreakdownItem from './BreakdownItem'
 import './GrantRequestDueDiligenceSection.css'
 
 export const INITIAL_GRANT_REQUEST_DUE_DILIGENCE_STATE: GrantRequestDueDiligence = {
@@ -97,9 +98,11 @@ export default function GrantRequestDueDiligenceSection({
         {t('page.submit_grant.due_diligence.budget_breakdown_detail', { value: fundingLeftToDisclose })}
       </SubLabel>
       {dueDiligenceState.budgetBreakdown.map((item, index) => (
-        <BudgetBreakdownConcept
+        <BreakdownItem
           key={`${item.concept}-${index}`}
-          item={item}
+          title={item.concept}
+          subtitle={t('page.proposal_view.grant.breakdown_subtitle', { duration: item.duration })}
+          extra={Number(item.estimatedBudget).toLocaleString(undefined, CURRENCY_FORMAT_OPTIONS)}
           onClick={() => {
             setSelectedBudgetBreakdownConcept(item)
             setModalOpen(true)

src/components/GrantRequest/GrantRequestTeamSection.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
-import { GrantRequest, GrantRequestTeam, TeamMember } from '../../entities/Grant/types'
+import { GrantRequestTeam, TeamMember } from '../../entities/Grant/types'
 import { userModifiedForm } from '../../entities/Proposal/utils'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import SubLabel from '../Common/SubLabel'
@@ -11,7 +11,7 @@ import ProjectRequestSection from '../ProjectRequest/ProjectRequestSection'
 
 import AddBox from './AddBox'
 import AddTeamMemberModal from './AddTeamMemberModal'
-import TeamMemberItem from './TeamMemberItem'
+import BreakdownItem from './BreakdownItem'
 
 export const INITIAL_GRANT_REQUEST_TEAM_STATE: GrantRequestTeam = {
   members: [],
@@ -76,9 +76,10 @@ export default function GrantRequestTeamSection({ sectionNumber, onValidation, i
       <Label>{t('page.submit_grant.team.members_label')}</Label>
       <SubLabel>{t('page.submit_grant.team.members_detail')}</SubLabel>
       {teamState.members.map((item, index) => (
-        <TeamMemberItem
+        <BreakdownItem
           key={`${item.name}-${index}`}
-          item={item}
+          title={item.name}
+          subtitle={item.role}
           onClick={() => {
             setSelectedTeamMember(item)
             setModalOpen(true)