[HOLD for payment 2024-07-23] [$250] [Search v1] Design updates to Search rows on mobile

[shawnborton]

We have a few simplifications we'd like to make for the mobile view of Search rows to help make the rows a bit more digestible and legible:

1. Let's remove the tag from the bottom line under the merchant, and only show a Category if one is available
2. Let's remove the icon in front of Category
3. If no category exists, let's vertically center the Merchant line in the available space
4. If no Merchant exists, let's use the Description if it exists. If neither exists, do nothing and leave it blank

cc @JmillsExpensify @luacmartins @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b532850f6d400dbe
• Upwork Job ID: 1806412035454885668
• Last Price Increase: 2024-06-27
• Automatic offers:
• dukenv0307 | Reviewer | 102915283
• dominictb | Contributor | 102915284

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @garrettmknight (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]

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

[neonbhai]

Proposal

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

Design updates to Search rows on mobile

What is the root cause of that problem?

This is a feature request

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

Let's remove the tag from the bottom line under the merchant, and only show a Category if one is available

We will remove the Tag Cell from here:

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Lines 249 to 253 in 3519795

	<TagCell
	showTooltip={showTooltip}
	transactionItem={item}
	isLargeScreenWidth={isLargeScreenWidth}
	/>

Let's remove the icon in front of Category

We will edit this function to only use TextWithTooltip. We will remove this part. We will update the styles to use only one component if it can be done simply.

If no category exists, let's vertically center the Merchant line in the available space

We will add alignItemsCenter styling to this view if transactionItem?.category doesn't exist. We will use a variable to facilitate the check. The line seems near centre but not on, so we apply this.

If no Merchant exists, let's use the Description if it exists. If neither exists, do nothing and leave it blank

We will add a check here to see if transactionItem.formattedMerchant exists. We will render the description if it doesn't.

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 112 in 3519795

let merchant = transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description;

Assuming we want this behaviour on web also. If not we will add a check for isLargeScreenWidth when defaulting to description

[dominictb]

Proposal

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

• [Search v1] Design updates to Search rows on mobile

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. With the feature:

Let's remove the tag from the bottom line under the merchant, and only show a Category if one is available

• We can update:
  

  App/src/components/SelectionList/Search/TransactionListItemRow.tsx

  Lines 244 to 261 in b021195

  	<View style={[styles.flex2, styles.gap1]}>
  	<MerchantCell
  	transactionItem={item}
  	showTooltip={showTooltip}
  	isLargeScreenWidth={false}
  	/>
  	<View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd, styles.gap3]}>
  	<CategoryCell
  	isLargeScreenWidth={isLargeScreenWidth}
  	showTooltip={showTooltip}
  	transactionItem={item}
  	/>
  	<TagCell
  	showTooltip={showTooltip}
  	transactionItem={item}
  	isLargeScreenWidth={isLargeScreenWidth}
  	/>
  	</View>

  
  to:

+ <View style={[styles.flex2, !item.category && styles.justifyContentCenter, styles.gap1]}>
                        <MerchantCell
                            transactionItem={item}
                            showTooltip={showTooltip}
                            isLargeScreenWidth={false}
                        />
+                        {item.category && (
+                            <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd]}>
+                                <CategoryCell
+                                    isLargeScreenWidth={isLargeScreenWidth}
+                                    showTooltip={showTooltip}
+                                    transactionItem={item}
+                                />
+                            </View>
+                        )}
                    </View>

2. With the feature:

Let's remove the icon in front of Category

• We can update:
  

  App/src/components/SelectionList/Search/TransactionListItemRow.tsx

  Lines 169 to 174 in 3519795

  	<TextWithIconCell
  	icon={Expensicons.Folder}
  	showTooltip={showTooltip}
  	text={transactionItem?.category}
  	textStyle={[styles.textMicro, styles.mnh0]}
  	/>

  
  to:

+       <TextWithTooltip
            shouldShowTooltip={showTooltip}
            text={transactionItem?.category}
            style={[styles.textMicro, styles.mnh0]}
        />

• In above, we only remove the icon, the text style should not be changed.

3. With the feature:

If no category exists, let's vertically center the Merchant line in the available space

• We already do it in 1.

4. With the feature:

If no Merchant exists, let's use the Description if it exists. If neither exists, do nothing and leave it blank

• We can update:
  

  App/src/components/SelectionList/Search/TransactionListItemRow.tsx

  Line 112 in 27a8d0a

  let merchant = transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description;

  
  to:

    let merchant = transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description;
+  if (!isLargeScreenWidth) {
+        merchant = transactionItem.shouldShowMerchant ? (transactionItem.formattedMerchant ?
+   transactionItem.formattedMerchant : description) : description;
+    }

then update:

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 302 in 27a8d0a

isLargeScreenWidth={false}

to:

                        isLargeScreenWidth={true}

• In the above, we only display the description as the fallback of the merchant in small screen width and shouldn't do it in large screen width because, in that screen, we have a column named "merchant". In this case, displaying the description instead of the merchant will confuse the user. But it is just my point, we can still apply the same feature on both screens based on the design team's decision.

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal Updated

[dukenv0307]

Thanks for all your proposals.

@neonbhai Your proposal is first but using alignItemsCenter is not correct to me. It should be justifyContentCenter like @dominictb's proposal.

I also agree we should set isLargeScreenWidth={true} in

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 302 in 27a8d0a

isLargeScreenWidth={false}

At this place, isLargeScreenWidth is already true so setting isLargeScreenWidth: false can cause confusion.

Let's go with @dominictb's proposal

BTW, should we apply the description fallback on web/desktop? If yes, do we need to change the merchant column name? @shawnborton @luacmartins

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[luacmartins]

BTW, should we apply the description fallback on web/desktop? If yes, do we need to change the merchant column name? @shawnborton @luacmartins

I'll let @shawnborton confirm this one since he's more on top of those discussions.

[shawnborton]

BTW, should we apply the description fallback on web/desktop? If yes, do we need to change the merchant column name?

I think we decided no, since we plan to implement the dynamic columns on web/desktop - right @luacmartins ?

[luacmartins]

Yea, that makes sense!

[dominictb]

@dukenv0307 PR #44677 is ready

[garrettmknight]

@luacmartins is this one ready to be paid out? I'm not 100% sure if there's anything else we're waiting on or if the automation just didn't run.

[luacmartins]

Yes, this is ready for payment

[garrettmknight]

Payment Summary:

• Contributor: @dominictb $250 paid via upwork
• Reviewer: @dukenv0307 $250 paid via upwork