Create Mock Up for Displaying Multiple ECards

[grgia]

Coming from https://expensify.slack.com/archives/C02MW39LT9N/p1709558687888869

Related to #31771

[melvin-bot]

Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.

[shawnborton]

I plan to work on this one tomorrow! Apologies, got sidetracked with Money page and Invoice mocks today.

[grgia]

Thanks @shawnborton !

[shawnborton]

Quick ideas for grouping:

I assume even if you have multiple admin-issued virtual cards with the same limit, we should still show multiple rows right? So it might be something like this:

Then I like your idea to just reuse the existing row pattern within a card view for showing multiple physical cards:

cc @Expensify/design @kevinksullivan for thoughts - happy to bring this to Slack, too!

(Figma file)

[dubielzyk-expensify]

I'm a big fan of the first one. While I like the callout for virtual cards I think it's the text label that makes it a tad bit too overwhelming. I think that detail can be pushed to the card detail screen itself.

If we don't believe the limit is important on the card overview, we could use the badge for the virtual vs physical callout.

Have you changed the pattern here and gone above the title? I thought we normally do it below. Not against it, but just wondering the reasoning or if I'm missing a pattern we have access to.

[shawnborton]

Have you changed the pattern here and gone above the title?

I guess I was just mirroring what I had from the previous page, but you make a good point about not changing the pattern, so I'm totally down to keep it below the title:

[shawnborton]

Then to your point about moving the "virtual card" label inside of the card view - I like that idea too:

[dannymcclain]

Love what's going on here—one more thought: what if instead of labeling every card we just labeled the "sections" for the physical/ virtual cards? (Or maybe even JUST the virtual ones? Right mock)

[shawnborton]

Oh that's a solid idea too, nice - I like it!

So maybe let's hear from Kevin and Georgia on how important some of these labels/badges are and we can decide from there, but feeling pretty good about the options we have for how to display them at this point.

[grgia]

Started a slack convo here - https://expensify.slack.com/archives/C036QM0SLJK/p1710155978612219

[melvin-bot]

@shawnborton, @grgia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[grgia]

Above slack link was incorrect, see here https://expensify.slack.com/archives/C036QM0SLJK/p1710760620755409?thread_ts=1710155978.612219&cid=C036QM0SLJK

[grgia]

This is basically done, but I'm going to leave this issue up temporarily until I create the issue implementing this today

[shawnborton]

Not overdue, we're all settled on the design and Georgia will implement.

[grgia]

Closing! We'll implement here #38468