[HOLD for payment 2024-09-06][$125] [Search v2.1] Update card filter to include the last four digits to the options

[luacmartins]

Coming from here, we should include the last four digits of the card in the options so that we know which card we're selecting when there are multiple options with the same name

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012701341a68cca511
• Upwork Job ID: 1823710868220699994
• Last Price Increase: 2024-08-14
• Automatic offers:
• ikevin127 | Reviewer | 103603179

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @lschurr (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.

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-14 13:53:44 UTC.

Proposal

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

• Update card filter to include the last four digits to the options

What is the root cause of that problem?

• New feature.

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

• We need to return additional data lastFourPAN: card.lastFourPAN in:
  

  App/src/pages/Search/SearchFiltersCardPage.tsx

  Line 36 in f2dad3a

  return {

• Update the CardListItem to display the lastFourPAN data:
  

  App/src/components/SelectionList/CardListItem.tsx

  Lines 68 to 80 in f2dad3a

  	<View style={[styles.flexRow, styles.alignItemsCenter]}>
  	<TextWithTooltip
  	shouldShowTooltip={showTooltip}
  	text={Str.removeSMSDomain(item.text ?? '')}
  	style={[
  	styles.optionDisplayName,
  	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
  	item.isBold !== false && styles.sidebarLinkTextBold,
  	styles.pre,
  	item.alternateText ? styles.mb1 : null,
  	]}
  	/>
  	</View>

                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
                        <TextWithTooltip
                            shouldShowTooltip={showTooltip}
                            text={Str.removeSMSDomain(item.text ?? '')}
                            style={[
                                styles.optionDisplayName,
                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                                item.isBold !== false && styles.sidebarLinkTextBold,
                                styles.pre,
                                item.alternateText ? styles.mb1 : null,
                            ]}
                        />
                        {!!item.lastFourPAN && (
                            <TextWithTooltip
                                shouldShowTooltip={showTooltip}
                                text={`Ending in ${item.lastFourPAN}`}
                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                            />
                        )}
                    </View>

• Optionally, we can display the last four digits in AdvancedSearchFilters:
  

  App/src/pages/Search/AdvancedSearchFilters.tsx

  Line 66 in f2dad3a

  .map((card) => card.bank)

              .map((card) => `${card.bank} (${card.lastFourPAN})`)

Demo

What alternative solutions did you explore? (Optional)

• Update the CardListItem to display the lastFourPAN data:
  

  App/src/components/SelectionList/CardListItem.tsx

  Lines 68 to 80 in f2dad3a

  	<View style={[styles.flexRow, styles.alignItemsCenter]}>
  	<TextWithTooltip
  	shouldShowTooltip={showTooltip}
  	text={Str.removeSMSDomain(item.text ?? '')}
  	style={[
  	styles.optionDisplayName,
  	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
  	item.isBold !== false && styles.sidebarLinkTextBold,
  	styles.pre,
  	item.alternateText ? styles.mb1 : null,
  	]}
  	/>
  	</View>

                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
                        <TextWithTooltip
                            shouldShowTooltip={showTooltip}
                            text={Str.removeSMSDomain(item.text ?? '')}
                            style={[
                                styles.optionDisplayName,
                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                                item.isBold !== false && styles.sidebarLinkTextBold,
                                styles.pre,
                                item.alternateText ? styles.mb1 : null,
                            ]}
                        />
+                      <Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}> • Ending in {item.lastFourPAN}</Text>
                    </View>
                </View>

Demo

[melvin-bot]

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

[melvin-bot]

Current assignee @ikevin127 is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Upwork job price has been updated to $125

[luacmartins]

@Expensify/design do we have a mock for how we wanna show the last 4 digits of the card?

[dannymcclain]

I don't mind how it's shown in this proposal video, though since the user is likely looking for a specific card, I wonder if we should make it more prominent in the title.

@Expensify/design what do you all think?

Note

I grabbed a list with cards from Jon's card feed Figma file, if these icons and bank/card names are wrong, please forgive me. Just trying to get a sense of the type styles.

Also, will we have icons that match the cards? Or will we need something generic to sit on that left side?

[dubielzyk-expensify]

Dig that mock though I kinda feel like we should have "Ending in 1414" or something. Might be repetative, but I feel that just the numbers below the card name feels a tad odd. Maybe even "···· 3128" or something

[shawnborton]

Big fan of reusing the same card rows from the card feed project, and I think Jon's ideas for making the card number slightly more obvious are great too.

[dannymcclain]

though I kinda feel like we should have "Ending in 1414" or something.

Yeah that makes perfect sense to me. I like Ending in #### because that's the way I typically see card numbers represented out in the wild wild web.

Dig that mock
Big fan of reusing the same card rows from the card feed project

So which style from here are you saying you all prefer? The left or the right? With the addition of the Ending in text, I think I prefer the right. Somethin' like this:

Alts just for fun:

[shawnborton]

Nice! Yeah, the first mock you just shared is what I had in mind. I could get down with either of the alts too though. I guess you could argue the first mock is more consistent with existing selection list options though? Where we always use the subheading/description text on a second line?

[dannymcclain]

Totally agree with you. I think the first option is the way to go!

[dubielzyk-expensify]

Definitely agree that the first mock is the right fit! 👏 GG

[lschurr]

What's the latest on this one? Is a contributor working on this or is it internal @luacmartins @ikevin127?

[melvin-bot]

📣 @ikevin127 🎉 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]

📣 @daledah You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[ikevin127]

❓ @Expensify/design I was reviewing the PR and noticed that the author did not add translations to the Ending in text yet. I checked out our current translations for similar / existing ones and I found this one which is not used anywhere:

cardEnding: ({cardNumber}) => `Card ending in ${cardNumber}`,

Question is: Can we use Card ending in 5555 or should we stick with the first mock from #47324 (comment) and add new & translate Ending in ?

Ending in	Card ending in

[ES] Ending in	[ES] Card ending in

[shawnborton]

We want to use the new "Ending in..." and we should do that everywhere.

[ikevin127]

⚠️ We just got confirmation on Slack that the Deploy Checklist: New Expensify 2024-08-26 which includes the PR of this issue was only deployed to production today in Deploy Checklist: New Expensify 2024-08-28. More context on why this happened can be found in this Slack thread and this Slack comment.

Given the context above, this issue should be on [HOLD for Payment 2024-09-6] according to today’s production deploy from Deploy Checklist: New Expensify 2024-08-28.

cc @lschurr @luacmartins

[luacmartins]

The PR solving this issue was deployed to prod in v9.0.26-6

[lschurr]

This is not overdue. Payment is Friday

[lschurr]

Payment summary:

• Contributor: @daledah $125 (paid in Upwork)
• Reviewer: @ikevin127 $125 (paid in Upwork)

[lschurr]

Bump on this @daledah

[daledah]

can you provide your Upwork profile here

@lschurr Hey, it's https://www.upwork.com/freelancers/~0138d999529f34d33f

[lschurr]

Thanks! Offer sent @daledah https://www.upwork.com/nx/wm/offer/103900230

[daledah]

@lschurr I accepted it thx