[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