mobilabsolutions/stash-sdk-dashboard

Dashboard code and documentation for the Stash! SDK

stash-sdk-dashboard's Issues

Add PayPal and the PSP configuration to the Account page

User story:

As a merchant I would like to be able to configure my Paypal credentials and my PSP credentials, currency and other relevant settings, so I can use my PSP account.

Implementation overview:

Add to the Account screen 2 blocs:

• PSP Configuration:
  • The PSP field is a dropdown list where the merchant can see the list of PSPs we support.
  • Once the merchant selects a PSP, the credential fields required for the selected PSP are displayed.
  • The icons Save and Cancel allow the merchant to save his credentials or cancel them.
  • After the merchant saves his credentials:
    • Credentials are correct, Saved! animation is displayed
    • Credentials are incorrect, Incorrect credentials error message is displayed
• PayPal:
  • 2 text fields are displayed: Username & Key
  • The icons Save and Cancel allow the merchant to save his credentials or cancel them.
  • After the merchant saves his credentials:
    • Credentials are correct, Saved! animation is displayed
    • Credentials are incorrect, Incorrect credentials error message is displayed

Acceptance criteria:

• The PSP configuration and PayPal blocs are implemented and corresponds to the designs.
• Documentation for the PSP and PayPal configuration is created.

Designs links:

Add the payment method and the customer ID to the transactions overview

User story:

As a merchant I would like to be able to see the customer ID and the payment method that was used during each transaction in the transactions overview screen.

Implementation overview:

• Please add 2 columns in the transactions overview page for the customer ID and the payment method that he used for the transaction.
• The logo of the payment method should be used.

Acceptance criteria:

• The payment method is presented by its logo for each transaction.
• The customer ID is displayed for each transaction.

Implement Keycloak

User story:

As a merchant I would like to be able to change my data (password and email address).

Implementation overview:

• Every merchant can have 1 user.
• MobiLab admin can create the merchant account on Keycloak dashboard and add manually the merchant to our backend.

Acceptance criteria:

• Keycloak is set up.
• The Keycloak configuration/setup is documented.
• A MobiLab admin account is created on Keycloak.

Create overview/welcome page

User story:

As a merchant I would like to be able to see my transaction overview or a welcome page after I log in.

Implementation overview:

• This will require backend to support providing transaction aggregates

Acceptance criteria:

• UI for managing keys is created
• Key management functionality exists

Logout function

User story:

As a merchant I would like to be able to logout

Implementation overview:

• Implement the logout button.

Acceptance criteria:

• Merchant is able to log out
• Feature is documented in merchant usage documentation

Create the Reports page with a static content

User story:

As a PO I would like to have a static page for the Reports page to give the merchant and idea about our future functionalities.

Implementation overview:

Acceptance criteria:

Designs links:

Create the login UI

User story:

As a merchant I would like to be able to login to the dashboard using username and password. I would also like to be able to reset my password.

Implementation overview:

The login screen will include:

• 2 text fields:
  • Username
  • Password: clicking on the eye icon should allow the user to see what he is typing in this field. Clicking again on the icon would replace the characters with dots.
• the Login button: it should be activated (in blue) only if the user fills in all the fields.
• the link Forgot your password?: if the user puts his mouse over the text it should be underlined.

Acceptance criteria:

• Login functionality is created and working
• Wrong credentials are handled with error messages
• Everything is documented in merchant usage documentation

Designs links:

• https://zpl.io/2jQ55Nr

Create the account screen on mocked data

User story:

As a merchant I would like to have a screen where I could manage my personal data.

Implementation overview:

Acceptance criteria:

• Account screen is created with mocked data for the Profile part.

Add the Export function to the transaction overview page

User story:

As a merchant I would like to be able to export the list of my transactions.

Implementation overview:

• As a merchant when I click on the Export button I expect that the download of the file starts.

Acceptance criteria:

• The export function works.
• The exported file has the .csv format.
• If the merchant is using a filter, only the transactions corresponding to the filter should be exported.

Create the Home page with a static content

User story:

As a PO I would like to have a static page for the Home page to give the merchant and idea about our future functionalities.

Implementation overview:

Acceptance criteria:

Designs links:

Dashboard MVP - Refunding transactions

User story:

As a merchant using Payment SDK I would like to be able to be able to refund certain transactions, so my customers can get their money back if the order was not correct.

Implementation overview

To be determined

Acceptance criteria:

• Transactions can be refunded
• Transaction presentation is updated to show that transaction has been refunded, or an error is shown if it fails
• Documentation explaining how the implementation works is created

Documentation for the GitHub space

Acceptance criteria:

• Please create a nice documentation for the dashboard space.

• This documentation should help anyone joining the project understand our dashboard. It should cover the following:

  • Overview of the main functionalities of the dashboard
  • Overview of the architecture/technologies used to build the dashboard

• Please add the documentation under the Wiki tab of this space.

Add the private and public keys management to the Account screen

User story:

As a merchant I would like to be able to generate new private and public keys that are used for API access, as well as revoke them.

Implementation overview:

• In case the merchant didn't generate a key yet:

  • A text message is displayed: "No Private/Public key is created yet"
  • The buttons Add a new Private/Public key is displayed.
  • Please adapt the text message and the button title to the section where it is displayed.
  • Public Key:
    • As a merchant when I click on the button Add a new Public key, the new key is displayed as long as the copy and delete icons and the button Add a new Public key is not displayed anymore.
    • As a merchant when I click on the copy icon, an instant message is displayed to confirm that the key is copied.
    • As a merchant when I click on the delete icon, the key is removed and the text message is displayed again along with the button Add a new Public key.
  • Private Key:
    • As a merchant when I click on the button Add a new Private key, a text field to enter the key name is displayed. The key is also displayed along with a warning message and the copy and delete icon.
    • As a merchant when I click on the copy icon, an instant message is displayed to confirm that the key is copied.
    • As a merchant when I click on the delete icon, the key is removed and the text message is displayed again.

• In case the merchant already generated a key:

  • Public Key:
    • The Add a new public key button is displayed and the merchant can generate more private keys.
    • as a merchant, when I click on the copy icon, an instant message is displayed to confirm that the key is copied.
  • Private Key:
    • The Add a new private key button is displayed and the merchant can generate more private keys.
    • As a merchant I can see when was each key created.
    • Clicking on the Add a new key button will generate the behaviour explained above.
    • Clicking on the delete icon for one of the existing keys will remove the key from the list.

Acceptance criteria:

• The UI for Private and Public Key corresponds to the designs.
• It is possible to generate a new private or public key.
• The copy and delete functionalities work.
• The key configuration is documented.
• Tests are written and pass successfully.

Designs links:

• https://zpl.io/bWqz76j
• https://zpl.io/VqWj4d6
• https://zpl.io/VDBJQP3

Redesign the transactions overview page

User story:

As a merchant I would like to be able to have a nice overview of transactions.

Implementation overview:

• Please redesign the transactions screen according to the designs.
• An action icon (3 dots) needs to be displayed for the transactions that have the status Authorised and Captured.
• As a merchant when I click on the action icon of an authorised transaction, a popover is displayed with 2 options:
  • Capture: a confirmation popup telling " Are you sure you want to capture this transaction?" is displayed if the merchant clicks on this button.
  • Reverse: a confirmation popup telling " Are you sure you want to reverse this transaction?" is displayed if the merchant clicks on this button.
• As a merchant when I click on the action icon of an captured transaction, a popover is displayed with 1 option:
  • Refund: a popup is displayed with the following:
    • A checkbox allowing the merchant to choose if he wants to make a partial or complete refund;
    • A refund text field: it has the transaction amount by default and it can be edited only if the merchant checks the partial checkbox;
    • A reason text field (optional) to allow the merchant to add a comment.

Acceptance criteria:

• The transaction overview page corresponds to the design;
• All the popups are implemented;
• The transaction status changes once the merchant makes an action.

Designs links:

Dashboard MVP - Showing transactions

User story:

As a merchant using Payment SDK I would like to be able to see transactions made using payment SDK, as well as being able to filter them by certain criteria.

Implementation overview

To be determined

Acceptance criteria:

• Dashboard is implemented and merchant is able to see transaction data
• Merchant can filter the data by certain criteria
• Documentation explaining how the implementation works is created

Create the Forgot password page

User story:

As a merchant I would like to be able to reset my password.

Description:

• As a user when I click on the "Forgot Password" link in the login screen I expect to be navigated to the "Forgot password" page.
• As a user I expect to have a clear error message in case my email address is not valid.
• As a user I expect to have a clear confirmation message after submitting my email address.

Acceptance criteria:

• The "Forgot Password" page is implemented.
• The verification for the email address is implemented.

Designs links:

• https://zpl.io/VQBjAzW
• https://zpl.io/2EBNk7x

Create the transaction details page

User story:

As a merchant I would like to view the transactions details page.

Implementation overview:

• As a merchant I expect to be navigated to the transaction details page when I click on the row of the transaction.
• The transaction details page includes 4 blocs:
  • Payment: the buttons displayed in this bloc depend on the transaction status.
  • Timeline: all the changes and actions regarding the transaction are displayed here. The date and time should be also shown for each change/action. The add note button allow the user to Add manually a note to his timeline.
  • Transaction details: includes all the transaction details. The description can be edited by the merchant.
  • Payment method: includes all the payment method details
• As a merchant when I click on the Add note button in the Timeline bloc, I expect to see a text area with 2 buttons: Cancel and Add.
  • The Add button adds the note to the timeline.
  • The Cancel button hides the text are.

Acceptance criteria:

• The transaction details page can be opened from the overview page.
• It is possible to go back to the overview page. If the list of the transactions is filtered, going back shouldn't delete the filters.

Designs links:

Add the filter function to the transactions overview page

User story:

As a merchant I would like to be able to filter the list of my transactions.

Implementation overview:

• The filter fields should always be hidden.
• As a merchant when I click on the Filter button, the filter fields are displayed.
• As a merchant when I click on Date range, 2 calendar are displayed to select the starting and ending dates.
• As a merchant when I click on Payment Method, a drop down list is displayed with the list of payment methods.
• As a merchant when I click on Status, a drop down list is displayed with the list of status.
• As a merchant I can type in the text field (only letters and numbers accepted).

Acceptance criteria:

• The list of transactions is filtered as the merchant selects his filter choices.
• The merchant can filter by Customer ID, Transaction ID and purchase ID by typing it in the text field.
• The merchant can go back to the main list of transactions by clicking on the Reset button.

Designs links: