Summary of the changes

Reference to the cards / issues / tickets

Some links or reference here

Some links or reference here

@mention someone here

Put an x in all the boxes that apply

[ ] I did linting my code locally prior to push.
[ ] I followed the standard error message and success message format.
[ ] I did follow the naming convention in constant/variable name and function name.
[ ] I confirmed there is no single file exceeded 300 lines of code. (ideally 200 lines or less, average around 100)
[ ] I checked there is no unhandled nor silent catch.
[ ] I checked there is no console.log
[ ] I have tested the feature I added throughly
[ ] I have tested my code does not effect any core features (Zoom, Payment, Video playback..etc)
[ ] I tidy up my code to make sure its readable to others
[ ] I wrote comments for the props I defined
[ ] My PR requires a specific backend branch

[ ] I did handle the loading state.
[ ] I did handle the error state.
[ ] I did handle the form inital value, events, correctly
[ ] I used default value for props, state, etc
[ ] I used i18n in all the text string.
[ ] I followed the UI styling practice for components.
[ ] I followed the mockup design for what I've worked on.
[ ] I checked the spacing & alignment between elements on the screen. (left, right, top, bottom)
[ ] I checked the quick double tap button issue (show loading after first tap, then prevent second tap until a response from server)