feat: unified view for saved and more payment methods screen

[sakksham7]

Type of Change

• [ ] Bugfix
• [X] New feature
• [ ] Enhancement
• [ ] Refactoring
• [ ] Dependency updates
• [ ] Documentation
• [ ] CI/CD

Description

Added a parameter inside layout object, named as savedMethodsLayout, it is an object having structure as

savedMethodsLayout : {
      displayMergedSavedMethods: bool,
      maxSavedItems: int,
    },

based upon which if there are saved payment methods and displayMergedSavedMethods is passed as true then instead of coming on a separate saved payment methods screen, it will come in either tabs flow or accordion flow depending upon the layout. maxSavedItems is used to configure how many saved methods we want to show initially and then the rest can be shown after clicking on show more.

https://github.com/user-attachments/assets/af014f80-75e7-40ee-961b-b3f48e79ae9f

How did you test it?

Tested the following cases for both Accordion view and Tabs View :-

• When saved payment methods are present

• displaySavedPaymentMethods is false, displayMergedSavedMethods is false or true No saved payment methods tab

• displaySavedPaymentMethods is true, displayMergedSavedMethods is false Normal flow Saved payment methods screen

• displaySavedPaymentMethods is true, displayMergedSavedMethods is true Saved payment methods in tabs or accordion

• When No saved payment methods are present

• each case will have no saved payment methods

Checklist

• [X] I ran npm run re:build
• [X] I reviewed submitted code
• [ ] I added unit tests for my changes where possible

[semanticdiff-com[bot]]

Review changes with  

[vsrivatsa-edinburgh]

Hmm. Quite confusing experience. If “Saved” implies all (saved) payment methods, why should it have a card icon. Right next it to is “Cards” with a card icon again. Worth revisiting

[sakksham7]

Hmm. Quite confusing experience. If “Saved” implies all (saved) payment methods, why should it have a card icon. Right next it to is “Cards” with a card icon again. Worth revisiting

Thanks for pointing this out, we’ll revisit the icons.

[github-actions[bot]]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues. 🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions[bot]]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues. 🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌