LF-3761: Implement crop sales expandable content

[SayakaOno]

Description

• create CropSale transaction table
• pass mobileView currencySymbol to ExpandedContent (mobileView is for the future, and the style for the desktop view will not be shown and has not been finalized)

Some other improvements

• remove unused properties in TableV2 stories
• remove accessor prop that is incompatible with sorting from V2 table
• fix ExpandableItem's key. (index was being used, and it was expanding a different transaction after the date range is updated)
• remove hovered colour of the expandable item when expanding
• update transactionDate's tag to h4 (the title of the page "Finances" is h3 so I chose h4)

Jira link: https://lite-farm.atlassian.net/browse/LF-3761

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[antsgar]

It's working/looking great! 🎉

[antsgar]

NIT, but I'd probably keep quantityTotal a constant and make the following line another const named something like quantityWithUnit to make it a bit easier to read and make both immutable

[antsgar]

I kinda liked the hover effect on the expanded item because it showcases more clearly that the item can be clicked on to collapse, but not sure if Figma calls for anything specific in this situation

[SayakaOno]

I'll confirm with Loïc!

[SayakaOno]

Loïc's input:
It should not change colour on hover when the row is expanded, the reason is that it can be distracting when you process the info inside the expanded row.

[kathyavini]

Looks really good! I just saw one mobile view issue when I was trying to investigate the right way to use shouldFixTableLayout.

Edit: Sorry I didn't realize that my branch was out of date! I think you fixed this exact thing last night!

Also I noticed one bug -- code isn't from this PR, but the functionality is:

const componentKey = typeLabel === 'Crop Sale' ? 'CROP_SALE' : transactionType;

typeLabel is translated so this will only work in English. But maybe the componentKeys are due to be revisited in the next PR? I think association of custom crop-associated revenues with this table still has to be set up too, is that right?

[SayakaOno]

Thank you for reviewing!
All comments should be addressed, and I fixed the transaction amount format ⬇️ to be "XXX.XX".

Also, I updated mapSalesToRevenueItems to fix the bug Joyce found, and the test file has also been updated.

Re-review would be appreciated, thank you!

@kathyavini

association of custom crop-associated revenues with this table still has to be set up too

True...! Thank you so much for catching this!!! I added cropGenerated to the transaction!

[SayakaOno]

I'll confirm with Loïc!

[kathyavini]

I got a bit nervous when I noticed transactions weren't storing crop_generated but you fixed everything so easily!! Looks great!