Description

The Hyperswitch SDK handles the frontend user experience for payment processes, including how users select their payment method. Currently, when a user opens the payment sheet, multiple payment methods are shown in a tab layout. This layout allows users to scroll through various options, but the scrollable tabs can make the selection process a bit frustrating and overwhelming, especially with too many options.

To simplify the experience and reduce user frustration, we propose replacing the scrollable tab view with two buttons for the most common payment methods and a dropdown menu for less frequently used options. This streamlined approach will make it easier for users to quickly select their preferred payment method without needing to scroll through tabs. The change keeps the interface clean and intuitive, enhancing the overall payment experience while still ensuring that all payment options are easily accessible in the dropdown.

The solution must ensure backward compatibility with the previous tab-based design.

Getting started

1. Get familiar with ReScript.
2. Check the README.md for project structure and setup instructions.
3. To setup locally, follow these steps

#  Clone repository
cd hyperswitch-client-core
git submodule update --init --recursive
yarn install
yarn run server     # This starts the mock server
yarn run re:start   # In another terminal

Expected Behavior:

The tab buttons should be replaced by at most 2 visible buttons and a dropdown for additional items. The dropdown should be easy to interact with and allow users to select options that were previously available as tabs. The solution should not disrupt existing functionality.

Actual Behavior:

The current implementation shows all items as individual tabs in a ScrollView, which can become cluttered and hard to navigate.

Tasks:

Modify ScrollView Tab Buttons:

Convert the current ScrollView tab buttons to display a maximum of 2 buttons. Implement a dropdown menu to handle additional options that were previously displayed as tabs.

Dropdown Functionality:

Users should be able to select items from the dropdown that replaces the tabs. Ensure the dropdown is easy to navigate and user-friendly.

Ensure Backward Compatibility:

Ensure that the new dropdown solution works seamlessly with existing implementations. The update should not break functionality for users relying on the tab-based view.

Testing:

Test the functionality thoroughly to ensure that the dropdown behaves as expected and the user experience remains smooth. Ensure backward compatibility testing to verify that previous users are not affected.

Contribution Guidelines:

• Fork the repository and create a new branch for your work.
• Write clean, well-documented code with clear commit messages.
• Make sure to follow our coding standards and contribution guidelines.

Submission Process:

• Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
• Once assigned, submit a pull request (PR).
• Maintainers will review and provide feedback, if any.
• Maintainers can unassign issues due to inactivity, read more here.
• For this issue, please submit a PR on https://github.com/juspay/hyperswitch-client-core repo, and link it to the issue.

Refer here for Terms and conditions for the contest.

If you have any questions or need help getting started, feel free to ask in the comments!