Description

The Hyperswitch SDK aims to dynamically switch between a bottom sheet for smaller screens, like mobile devices, and a modal view for larger screens, such as tablets and desktops. This approach ensures optimal use of screen real estate and allows for seamless interactions regardless of the device being used, which is crucial for a smooth payment process.

Currently, when users open the payment sheet in their app using HyperSwitch, it appears as a bottom sheet occupying the full width, even on larger screens. To improve this experience, the bottom sheet should function as a modal on larger screens while maintaining its design for smaller screens. This change will make the payment process more intuitive and user-friendly, adapting to the specific needs of each device and enhancing overall usability.

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:

On smaller screens (mobile), a bottom sheet should appear. On larger screens (tablet/desktop), the modal view should appear. Transitions between the views should be smooth and without glitches when resizing the window or rotating the device.

Actual Behavior:

The current implementation only supports a single view (either bottom sheet or modal) without dynamically adjusting to screen size.

Tasks:

Screen Size Detection :

Implement logic to detect screen size or device type at runtime.

Switching Logic:

Develop a mechanism to toggle between the bottom sheet for smaller screens and modal for larger screens.

Seamless Transition:

Ensure the transition between the two view types is smooth, especially when resizing the window or switching between devices.

Testing:

Test the implementation on various screen sizes and devices (mobile, tablet, desktop) to ensure that the views transition seamlessly.

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!