niksumeiko / payment-form-react-tdd-kata Goto Github PK

Overview

Display API errors

Acceptance criteria

• Display API error underneath related input field

• Display generic API error above payment form

  • When it's not related to any input field

Design

API specification

• The POST /pay endpoint
• Throws the following errors interface:

• Multiple errors could be thrown at once

Errors response example

[
  {  "scope": "amount", "message": "Missing amount" },
  {  "scope": "bic", "message": "Missing BIC" },
]

Overview

Disable pay button after it's being clicked

Acceptance criteria

• Disable the button
  • When when the API is processing previous request

Design

API specification

• The POST /pay endpoint

Overview

Enable international payment

Acceptance criteria

• Enhance payment page with BIC input:
  (BIC stands for an International Bank Code)

  • Conditionally display the input
    • Don't display when:
      • IBAN is missing
      • IBAN's ISO2 country code is incomplete
      • IBAN's ISO2 country code of Slovakia (domestic).
    • Display when:
      • IBAN's ISO2 country code is not Slovakia (international)

• Send form data to the API

  • When the user clicks the form control

• Display validation errors

  • When BIC is not provided

Design

Payment form

Validation error

API specification

• The new international payment is created via POST /pay endpoint.
• Expected request:

• It has the following response:

Test data

• IBAN: AT352011142012679110
• BIC: GIBAATWWXXX
• Amount: 10

Overview

Enable the customer to make a domestic payment.

Acceptance criteria

1. Create a payment page:
With the form:
- IBAN input field
- Amount input field
- Make payment button
 

2. Send form data to the API
When the user clicks the form control
 

3. Display success screen
 

4. Display validation errors
- When IBAN is not provided
- When payment amount is empty or invalid
 

Design

Payment form

Success state

Validation eror

API specification

The new payment is created via POST /pay endpoint.

Expected request:

Response:

Test data

• IBAN: AT0309000000000019176655
• Amount: 10

Overview

Display my account details

Acceptance criteria

• Display my account details to the left of page heading title

  • Account name
  • Balance

• When successfully making a payment, refetch account

  • Display latest balance API provides

Design

API specification

• The GET /my/account endpoint provides account details.
• Expected request doesn't need any input.
• Expected request requires headers:

• It has the following response:

Overview

Enhance the success screen with payment details.

Acceptance criteria

• Display successful payment type

Design

Current

Expected

API specification

• The payment is made via POST /pay endpoint.
• It has the following response:

Test data

For domestic payment

• IBAN: SK0309000000000019176655
• Amount: 10

For international

• IBAN: AT352011142012679110
• BIC: GIBAATWWXXX
• Amount: 10

Overview

The payment amount can't be empty, 0 or invalid.
The acceptance criteria from #3 was forgotten.

Steps to reproduce

1. Open payment page
2. Fill in the IBAN (AT123)
3. Submit the payment form

Actual
4. POST /pay request throws
5. Nothing happens

Expected
4. No POST /pay request is even issued
5. Form validation error is displayed

Design

Exactly as other form inputs validation errors:

Overview

Enhance the success screen with a reset control.

Acceptance criteria

• Create a form reset button:
  • When clicked, it resets form values and closes the success screen.
  • The goal is to land to blank form to be able to make a new payment.

Design

Test data

• IBAN: SK0309000000000019176655
• Amount: 10

Overview

Enable the customer to see the payment receiver's bank details.

Acceptance criteria

1. Display an info message for the internal receiver.

Message: "Same bank transfer · Money arrives immediately"

When isInternal=true (see API specification below).

 
2. Display an info message for the external receiver that qualifies for instant payment.

Message: "Slovenská sporiteľňa, Bratislava, SK · Money arrives immediately"

When isInternal=true and bank is provided (see API specification below).

 
3. Display an info message for a regular external receiver.

Message: "Santander Consumer Bank, Schweglerstraße 26, 1150 Vienna, AT"

When isInternal=false and bank is provided (see API specification below).
 

Design

Info message

API specification

Retrieve IBAN evaluation via GET /receiver endpoint.

Expected request:

Response:

Test data

Internal receiver

• IBAN: AT0309000000000019176655

External receiver for instant payment

• IBAN: SK12345

Regular external receiver

• IBAN: AT98765

Overview

See domestic payment validation errors

Acceptance criteria

• Display validation errors
  • When IBAN is not provided
  • When payment amount is empty or invalid

Design

Validation eror

Test data

• IBAN: empty
• Amount: 0

Overview

Enable the customer to upload an invoice to a particular transaction.

Acceptance criteria

1. Display the "Attach file" button within transaction details
    - Only when the transaction doesn't have a file already attached

 
2. Upload the selected file to the AWS S3 bucket
    - When clicking the "Attach file" button, upload the file to S3
 

3. Link uploaded file to the transaction
    - After the S3 upload is done, save generated file URL to the transaction

 
4. Display a link to the attached file within the transaction details
    - When a transaction has a link to the attached file, display it instead of the button.

Design

AWS Specification

API specification

• Retrieve transactions via GET /transactions endpoint.

Expected response:

• Upload a file to a transaction via POST /transactions/TRANSACTION_ID/file

Expected request:

Test data

Overview

Display my account future balance

Acceptance criteria

• Display the future account balance underneath amount input

  • Update the future balance only when the amount input lost focus

• Display info message underneath the amount input

  • When feature balance is negative
  • Remove the message when future balance is 0 or positive
    • Not when input lost focus, but instantly when its value is changed

• Disable pay button when the future balance is negative

Design

Overview

The payment amount doesn't show 0.00 placeholder when the value is 0.

Steps to reproduce

1. Open payment page

Actual
2. A 0 (zero) is displayed within the amount input field

Expected
2. A 0.00 placeholder is displayed

Design