see a popup modal when clicking on buying and selling cows
So that...
I can choose how many cows I want to buy or sell in one go instead of having to push the buy/sell button multiple times.
Discussion
Currently, If a user want to buy 5 cows, then the person has to click buy button 5 times, and the same goes for sell button, which is not great user experience.
Currently, if user accidentally clicks on the buy/sell button, the buy/sell action will be carried out immediately, which is also not ideal for UX.
Popup modal should have a numbered field, so that users can specify a number to indicate the quantity of cows they want to buy/sell.
The popup modal should also have a confirm button to execute the action, and a cancel button to close the modal.
The mockup UI above is a great way to start. However, students can be as creative as possible for the UI design.
Acceptance Criteria
[ ] A popup modal UI is shown when users click on buy/sell cows button in common room page.
[ ] The popup modal UI has a number field where users can specify the amount of quantity of cows they wish to sell/buy.
[ ] The popup modal UI should be its own React component because it can be reused for both buy/sell action.
[ ] The default cow quantity should be 1 for both buy/sell, and there should be restrictions on the range of number that users can input(>=1) in the number field.
[ ] If users successfully sell X cows(API call consumed successfully by backend), then provide a toast message saying something like "X cows sold!".
[ ] Refactor current /buy endpoint in UserCommons controller to something like /buy?commonsId=1&numCows=5. numCows will be an optional query parameter users can choose to provide. If it is not present in the URL, then set the default to 1 in the backend.
[ ] Refactor current /sell endpoint in UserCommons controller to something like/sell?commonsId=1&numCows=5. numCows will be an optional query parameter users can choose to provide. If it is not present in the URL, then set the default to 1 in the backend.
Implementation Todos
Frontend:
[ ] A standalone React component for the popup modal.
[ ] A number field where user can provide a quantity, and the quantity should have default set to be 1, and can only accept value >=1.
[ ] A warning text indicator if invalid value is provided.
[ ] Once finish selling cows, trigger a toast message indicating the number of cows that have been sold in the transaction.
Backend:
[ ] Refactor current /buy endpoint in UserCommons controller to something like /buy?commonsId=1&numCows=5. numCows will be an optional query parameter. If it is not present in the URL, then set the default to 1 in the backend.
[ ] Refactor current /sell endpoint in UserCommons controller to something like /sell?commonsId=1&numCows=5. numCows will be an optional query parameter. If it is not present in the URL, then set the default to 1 in the backend.
[ ] For /buy endpoint, the purchase is successful if numCows is valid(>=1), commonsId is valid, and user has enough total wealth to afford the purchase.
[ ] For /sell endpoint, the sale is successful if numCows is valid(>=1), commonsId is valid, user has enough cows to sell.
Testing:
[ ] Front end: clicking on buy cows and sell cows buttons in common page should trigger the popup modal.
[ ] Front end: validation warning is triggered when invalid cow quantity is provided in numbered field.
[ ] Front end: popup modal should have a two buttons, one for close the popup, one for confirming buy/sell.
[ ] Front end: toast message is triggered as expected when selling cows.
[ ] Back end: numCows will be an optional parameters for /buy endpoint in UserCommons controller, and users cannot buy more cows then they can afford.
[ ] Back end: numCows will be an optional parameters for /sell endpoint in UserCommons controller, and users cannot sell more cows then they have.
[ ] numCows parameter for both /buy and /sell endpoints should have default value set to 1 if the parameter is not present in the URL.
Have you updated the title?
As a...
user
I can...
see a popup modal when clicking on buying and selling cows
So that...
I can choose how many cows I want to buy or sell in one go instead of having to push the buy/sell button multiple times.
Discussion
Acceptance Criteria
/buyendpoint inUserCommonscontroller to something like/buy?commonsId=1&numCows=5. numCows will be an optional query parameter users can choose to provide. If it is not present in the URL, then set the default to 1 in the backend./sellendpoint inUserCommonscontroller to something like/sell?commonsId=1&numCows=5. numCows will be an optional query parameter users can choose to provide. If it is not present in the URL, then set the default to 1 in the backend.Implementation Todos
Frontend:
Backend:
/buyendpoint inUserCommonscontroller to something like/buy?commonsId=1&numCows=5. numCows will be an optional query parameter. If it is not present in the URL, then set the default to 1 in the backend./sellendpoint inUserCommonscontroller to something like/sell?commonsId=1&numCows=5. numCows will be an optional query parameter. If it is not present in the URL, then set the default to 1 in the backend./buyendpoint, the purchase is successful ifnumCowsis valid(>=1), commonsId is valid, and user has enough total wealth to afford the purchase./sellendpoint, the sale is successful ifnumCowsis valid(>=1), commonsId is valid, user has enough cows to sell.Testing:
/buyendpoint inUserCommonscontroller, and users cannot buy more cows then they can afford./sellendpoint inUserCommonscontroller, and users cannot sell more cows then they have./buyand/sellendpoints should have default value set to 1 if the parameter is not present in the URL.