Notes

InvoiceSummaryPage.jsx

lineNo: 14 — for complex ternary operators move each case to its own methods
for instance, instead of incoTerms ? (/**Ten lines of code*/) : (/**Ten Lines of code*/)
break it down to its own methods like incoTerms ? this.methodTrue : this.methodFalse.

lineNo: 18 — Change the variable name for ‘incoTerms’ can’t understand what it means.
lineNo: 23 — ‘CODE’ must be accessed through translation and not hardcoded.
lineNo: 25, 26, — destructure the ‘rowDetails’ object at the top

lineNo: 28 — Instead of
data ? (
<SecondaryCard>
<DocDetails>{data.replace('~', ' (')})</DocDetails>
</SecondaryCard>
) : (
<SecondaryCard>-</SecondaryCard>
)

we can change it to

<SecondaryCard>
data ? (<DocDetails>{data.replace('~', ' (')})</DocDetails>) : ‘-’
</SecondaryCard>

lineNo: 52 — same as previous comment, since <SecondaryCard> is used in both the true and false scenarios, move it outside the ternary operator.

lineNo: 47, 48 — Use translations and don’t hardcode data

lineNo: 82 — Do not hard code css in the jsx file, please declare the color in COLOR_NAMES and then use it.
lineNo : 82 — Do not use inline styling. Use StyledComponents.

lineNo: 96, 99 — From what I can understand, line no 96 and 99 are the truth and false scenarios of the ternary function in line no 14, so instead of using the same function with an unnecessary ternary operator, we an create two separate methods, for example this.getInvoiceWithIncoTerms for LN 96 and this.getInvoiceWithDocumentReference for LN 99
and avoid branches in our code.

lineNo: 111 — Please add comments for PropTypes.