feat: Update Matching expense card to display exact amount #3375
Conversation
WalkthroughSuperstar, listen up! This pull request is a stylish transformation of our expense tracking components. We've revamped the personal cards matched expenses page with sleek text casing updates and a new currency formatting approach. The changes span across HTML, SCSS, and test files, introducing the Changes
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss (1)
Line range hint
139-145: Style like a superstar! But let's handle long text betterThe purpose text needs better overflow handling for those extra-long descriptions!
&--purpose { line-height: 23px; color: $black-2; font-size: 14px; font-weight: 500; max-width: 60%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html(1 hunks)src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss(4 hunks)src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts(3 hunks)src/app/shared/components/expense-card-lite/expense-card-lite.component.html(2 hunks)src/app/shared/components/expense-card-lite/expense-card-lite.component.scss(8 hunks)src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts(2 hunks)
🔇 Additional comments (4)
src/app/shared/components/expense-card-lite/expense-card-lite.component.html (1)
38-40: Superstar move using exactCurrency pipe! But verify the implementation
The currency formatting looks sharp as a knife, but we need to ensure the exactCurrency pipe is properly tested.
✅ Verification successful
Mind it! The exactCurrency pipe is tested like a boss!
Listen here, partner! I checked the codebase with the style of a superstar, and what did I find? The exactCurrency pipe is tested with the precision of a perfectly choreographed action sequence!
The test file at src/app/shared/pipes/exact-currency.pipe.spec.ts is packed with test cases that would make even a villain sweat:
- Tests positive values with style ✨
- Handles negative numbers like a hero 💪
- Checks decimal places with surgical precision 🎯
- Verifies currency symbol skipping with swagger 😎
- Even tests large numbers that could make a calculator dizzy!
So, my friend, you can use this pipe with the confidence of a superstar making a grand entry! The code is tested, verified, and ready to rock and roll! flips sunglasses
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if exactCurrency pipe is properly tested
rg -l "exactCurrency" --type spec
Length of output: 182
Script:
#!/bin/bash
# Let's find all spec files first to ensure we're searching in the right place
fd "\.spec\."
# Then let's search for exactCurrency in all files to understand its implementation
rg "exactCurrency" -A 5
Length of output: 32715
src/app/shared/components/expense-card-lite/expense-card-lite.component.scss (1)
101-101: 🧹 Nitpick (assertive)
Watch out! Font sizes might be too small for some users
Mind it! The font sizes have been reduced to 12px and 14px. Let's ensure they meet accessibility guidelines for readability.
Consider defining minimum font size variables in the theme to maintain consistency and accessibility across the app.
Also applies to: 111-111, 139-139
src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html (2)
13-13: Mind it! The text case changes are spot on, macha!
The shift from uppercase to title/sentence case makes the UI more friendly and readable:
- "Transaction Details"
- "Select a matching expense"
- "In case there is no match"
Also applies to: 49-49, 59-59
23-44: Style ah? Currency display block is looking sharp!
The new currency block structure with exactCurrency pipe is clean and well-organized:
- Proper separation of currency symbol, amount, and type (DR/CR)
- Smart conditional styling for credit transactions
- Excellent use of the new exactCurrency pipe for precise amount display
But remember one thing! Let's verify the exactCurrency pipe implementation:
✅ Verification successful
Mind it! The exactCurrency pipe is a blockbuster implementation, fully tested and ready to rock!
What a performance by this pipe, I tell you! The implementation is style-ah style:
- Handles positive and negative numbers like a boss
- Gives perfect control over currency symbol display
- Fraction digits? No problem, machan!
- Test coverage is mass - covering all scenarios from zero to negative lakhs!
The pipe is working exactly as shown in your template. You've used it perfectly for the transaction amount display. Simply superb!
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the exactCurrency pipe is properly tested
rg -g "*.spec.ts" "exactCurrency"
# Verify the pipe's currency formatting logic
ast-grep --pattern 'class ExactCurrencyPipe {
$$$
transform($_) {
$$$
}
}'
Length of output: 1598
Script:
#!/bin/bash
# Let's check the exact implementation of the pipe, macha!
rg -g "*.ts" -A 15 "class ExactCurrencyPipe"
# And let's see what tests we're running, thalaiva!
cat src/app/shared/pipes/exact-currency.pipe.spec.ts
Length of output: 6721
src/app/shared/components/expense-card-lite/expense-card-lite.component.html
Show resolved
Hide resolved
src/app/shared/components/expense-card-lite/expense-card-lite.component.scss
Show resolved
Hide resolved
src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss
Show resolved
Hide resolved
src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts
Show resolved
Hide resolved
src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts
Show resolved
Hide resolved
|
Clickup
clickup link
UI Preview
Summary by CodeRabbit
New Features
Bug Fixes
Style
Tests