Skip to main content

Getting Started with Account Details Page

Overview​

The Account Details Page is a component in the Bank Frontend that allows users to view detailed information about a specific bank account. Users can access the Account Details Page by clicking on 'View account details' from the landing page.

Accessing the Account Details Page​

Users can access the Account Details Page by clicking on 'View account details' from the landing page. This action will navigate the user to the Account Details Page where they can enter an account number to retrieve the associated account details.

Fetching Account Details​

Upon entering a valid account number, the page fetches the account details from the backend and displays them in a structured format. The function getCustomerAccounts is responsible for fetching the account details from the backend and setting the state to display the retrieved information.

The function getCustomerAccounts fetches the account details from the backend using the provided account number. It processes the response and updates the state with the retrieved account details.

  /**
   * Get the account for a given accountNumber, create an array of the response and set accountMainRow to this array
   * Calls getOtherAccountsForCustomer to find the other accounts tied to this customer's number
   */
  async function getCustomerAccounts(searchQuery) {
    let account;
    let rowBuild = [];
    await axios
      .get(process.env.REACT_APP_ACCOUNT_URL + `/${searchQuery}`)
      .then(response => {
        account = response.data;
      }).catch (function (error) {
        if (error.response){
          displayNoResults()
          console.log(error)
        }
      })
    try {
      let row;
      let formattedDateOpened = getDay(account.dateOpened) + "-" + getMonth(account.dateOpened) + "-" + getYear(account.dateOpened)
      let formattedLastStatementDue = getDay(account.lastStatementDate) + "-" + getMonth(account.lastStatementDate) + "-" + getYear(account.lastStatementDate)

Handling No Results​

If no account is found for the entered account number, a modal is displayed informing the user that no accounts were found. The function displayNoResults toggles the modal to inform the user that no accounts were found.

The function displayNoResults toggles the modal to inform the user that no accounts were found.

  function displayNoResults() {
    setShowNoResultsModal(wasOpened => !wasOpened)
  }

Main Functions​

There are several main functions in this folder. Some of them are AccountDetailsPage, handleClick, getCustomerAccounts, and AccountDetailsTable. We will dive a little into handleClick and getCustomerAccounts.

AccountDetailsPage​

The AccountDetailsPage function initializes the state variables and defines the structure of the account details page.

The AccountDetailsPage function initializes the state variables and defines the structure of the account details page.

const AccountDetailsPage = () => {
  const [isOpened, setIsOpened] = useState(false);
  const [userInput, setUserInput] = useState("")
  const [accountMainRow, setMainRow] = useState([]);
  const [showNoResultsModal, setShowNoResultsModal] = useState(false)

handleClick​

The handleClick function handles the click event when the user submits an account number. It validates the input and calls getCustomerAccounts to fetch the account details.

The handleClick function handles the click event when the user submits an account number. It validates the input and calls getCustomerAccounts to fetch the account details.

  function handleClick() {
    let searchQuery = userInput;
    if (userInput.length !== 0){
        getCustomerAccounts(searchQuery)
        setIsOpened(wasOpened => !wasOpened)
      } else {
        displayNoResults()
      }
  }

AccountDetailsTable​

The AccountDetailsTable function displays the account details in a tabular format. It includes functions to handle updates and manage the state of the account details.

The AccountDetailsTable function displays the account details in a tabular format. It includes functions to handle updates and manage the state of the account details.

const AccountDetailsTable = ({accountMainRow}) => {
  /**
   * Set states for all of the current account values, before the user edits any. This provides a fallback if any fields are left blank by the user
   */
  const [accountNumber, setAccountNumber] = useState("")
  const [currentAccountType, setCurrentAccountType] = useState("")
  const [currentOverdraft, setCurrentOverdraft] = useState("")
  const [currentInterestRate, setCurrentInterestRate] = useState("")
  const [accountSortCode, setAccountSortCode] = useState("")
  const [currentActualBalance, setCurrentActualBalance] = useState("")
  const [lastStatementDate, setLastStatementDate] = useState("")
  const [nextStatementDate, setNextStatementDate] = useState("")
  const [dateOpened, setDateOpened] = useState("")
  const [currentAvailableBalance, setCurrentAvailableBalance] = useState("")
  const [currentAccountCustomerNumber, setAccountCustomerNumber] = useState("")

  /**
   * States that are edited by the user
   */
  const [enteredOverdraftLimit, setOverdraftLimit] = useState('');
  const [enteredAccountType, setAccountType] = useState("");

 

This is an auto-generated document by Swimm 🌊 and has not yet been verified by a human