[HOLD for payment 2024-12-07] [$250] [Simple AA in NewDot] Show category / tag in Expense preview view

[Beamanator]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/430318 Slack conversation (hyperlinked to channel name): #expense

Action Performed:

Expenses w/ categories should display the category in the expense preview. Like this:

• Note: If the expense has multiple categories, only show the first one in the preview

Expenses w/ tags should display the category in the expense preview like this:

• Note: If the expense has multiple tags, only show the first one in the preview

If an expense has both a category & a tag...

1. Show the category, followed by a tag in the same line
2. If the category has many characters, allow it to take up only half the horizontal space, then show ... at the end
3. Similar ^ for a long tag

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854943091873475619
• Upwork Job ID: 1854943091873475619
• Last Price Increase: 2024-11-15
• Automatic offers:
• mkzie2 | Contributor | 104949097

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot[bot]]

Triggered auto assignment to @kadiealexander (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[melvin-bot[bot]]

:warning: It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time :warning:

[melvin-bot[bot]]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[Beamanator]

cc @garrettmknight can you please make sure the issue looks good & that the correct Project is tagged? 🙏

[Beamanator]

Once that's set up, let's add External to get some help implementing this

[Beamanator]

Ohhhh Design + NewFeature = two design team members assigned 🤦 didn't know that!

[dannymcclain]

BOOM! We're swarming!! 😂

[garrettmknight]

Dropping @dannymcclain since he was last!

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021854943091873475619

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-14 16:47:06 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Show category / tag in Expense preview view

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

1. Get tag and category here

https://github.com/Expensify/App/blob/e4cdb4204bf55bd847e4cc7c07700f2fa1d78872/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L104-L110

2. The tag and category content can be added here

• Add a divider line if tag or category exist

{(!!tag || !!category) && <View style={[styles.threadDividerLine, styles.ml0, styles.mr0]}></View>}

• Add tag and category data in the same line

<View style={[styles.gap1, styles.flexRow]}>
    {!!category && (
        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, tag && styles.mw50, tag && styles.pr1, styles.flexShrink1]}>
            <Icon
                src={Expensicons.Filter}
                height={variables.iconSizeExtraSmall}
                width={variables.iconSizeExtraSmall}
                fill={theme.icon}
            />
            <Text numberOfLines={1}>{category}</Text>
        </View>
    )}
    {!!tag && (
        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap1, category && styles.pl1]}>
            <Icon
                src={Expensicons.Filter}
                height={variables.iconSizeExtraSmall}
                width={variables.iconSizeExtraSmall}
                fill={theme.icon}
            />
            <Text numberOfLines={1}>{tag}</Text>
        </View>
    )}
</View>

• A bit explanation:

1. threadDividerLine style has margin-left and margin-right then we need to add ml0 and mr0 style. So the divider can take the full width

2. Add styles.flex1 for each tag and category view then both of them can take the same width. Because we cannot know when the tag/category is long, it makes sense to split the same width when both tag and category exist.

3. Add numberOfLines={1} to trunct the tag/category when it's too long

4. The code is an example implement, we need to replace Expensicons.Filter with the design icon

https://github.com/Expensify/App/blob/e4cdb4204bf55bd847e4cc7c07700f2fa1d78872/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L430

What alternative solutions did you explore? (Optional)

Result

https://github.com/user-attachments/assets/64a62404-d282-400a-9c17-e0a15eedf208

[shawnborton]

I think Danny did the designs for this one so I'm going to assign him so he gets the GH credit 🏆

[melvin-bot[bot]]

📣 @Jaeta01! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot[bot]]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[melvin-bot[bot]]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[melvin-bot[bot]]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[Jaeta01]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01df91cefb9efad4cb

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[sobitneupane]

Thanks for the proposal, @mkzie2.

Based on the attached result:

1. We should avoid showing the divider line if there are no categories or tags.
2. The text styling appears to be slightly off. Could you please ensure we’re using the same design as shown in the issue description.

Additionally, @mkzie2, how does it look when the lengths of the category and tag are uneven? For instance, if the category length is 5 and the tag length is 40.

[mkzie2]

@sobitneupane

We should avoid showing the divider line if there are no categories or tags. {(!!tag || !!category) && <View style={[styles.threadDividerLine, styles.ml0, styles.mr0]}></View>}

The attached result is before I updated this in my proposal, I already had this check when adding my proposal

The text styling appears to be slightly off. Could you please ensure we’re using the same design as shown in the https://github.com/Expensify/App/issues/52261#issue-2644260464.

We can ask the design team about the color and the font-size in the PR phrase

Additionally, @mkzie2, how does it look when the lengths of the category and tag are uneven? For instance, if the category length is 5 and the tag length is 40.

Add styles.flex1 for each tag and category view then both of them can take the same width. Because we cannot know when the tag/category is long, it makes sense to split the same width when both tag and category exist.

As I mentioned above we cannot know when the text is long so I always split the same max width for tag/category.

[sobitneupane]

As I mentioned above we cannot know when the text is long so I always split the same max width for tag/category.

Could you please add screen recording for this case.

For instance, if the category length is 5 and the tag length is 40.

[mkzie2]

@sobitneupane It's here.

[ChavdaSachin]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Show category / tag in Expense preview view

What is the root cause of that problem?

New Feature

What changes do you think we should make in order to solve the problem?

• fetch tag and category here https://github.com/Expensify/App/blob/e4cdb4204bf55bd847e4cc7c07700f2fa1d78872/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L104-L110

• Conditionally render divider line if tag or category exist for the transaction.

{(!!tag || !!category) && <View style={[styles.threadDividerLine, styles.ml0, styles.mr0]}></View>}

• Now conditionally render category and tag after divider line, Use appropriate icons and use styles.flexShrink1 style especially for category and tag so that both should render side by side and neither would be cut down when combined length does not exceed the available width, and both will shrink proportionally if combined length exceed width available.

<View style={[styles.gap1, styles.flexRow]}>
    {!!category && (
        <View style={[styles.flexShrink1, styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
            <Icon
                src={Expensicons.Folder}
                height={variables.iconSizeExtraSmall}
                width={variables.iconSizeExtraSmall}
                fill={theme.icon}
            />
            <Text numberOfLines={1}>{category}</Text>
        </View>
    )}
    {!!tag && (
        <View style={[ styles.flexShrink1,styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
            <Icon
                src={Expensicons.Tag}
                height={variables.iconSizeExtraSmall}
                width={variables.iconSizeExtraSmall}
                fill={theme.icon}
            />
            <Text numberOfLines={1}>{tag}</Text>
        </View>
    )}
</View>

Specific font style should be provided by design team.

Result

Category and Tags used for example are commented at the ent of the report

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ChavdaSachin]

To the c+ , My proposal here differs only slightly with the other proposal but make important visual change,

1. Use of appropriate icons
2. Use of styles.flexShrink1 instead of styles.flex1 to produce desired output.

Take a look at result screenshot.

[sobitneupane]

Thanks for the update @mkzie2

As mentioned in the issue, this is not something we want, we should allow it to take half of the horizontal space, only if category has many characters.

If the category has many characters, allow it to take up only half the horizontal space, then show ... at the end

[mkzie2]

Got it, let me check again.

[mkzie2]

@sobitneupane I updated my proposal and result.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@Beamanator, @dannymcclain, @sobitneupane, @kadiealexander Whoops! This issue is 2 days overdue. Let's get this updated quick!