QA - Booking Entry Still Saved After Clicking Back On Payment Method Page

by ADMIN 75 views

Introduction

In the context of online booking systems, it is crucial to ensure that transactions are accurately recorded and reflected in the user's rental history. However, a critical issue has been identified in the Client - Rental History module, where a booking entry is still saved even after the user clicks the Back button on the Payment Method page. This article aims to investigate and provide a solution to this problem.

Description of the Issue

When a user clicks the Book Now! button to navigate to the Payment Method page, they are presented with an option to select their preferred payment method. However, if the user clicks the Back button (either the browser's back button or the button on the page) instead of completing the payment, the system still records the transaction as a successful booking. This booking appears in the Rental History with a "Pending" status, even though the user did not proceed with payment.

Module Name & Test Case ID

The module affected by this issue is the Client - Rental History module, with a test case ID of [insert ID].

Test Environment

The test environment used to reproduce this issue is as follows:

  • Test Procedure: Manual
  • System: Windows 11
  • Browser: Chrome

Steps to Reproduce

To reproduce this issue, follow these steps:

  1. Click the Book Now! button to navigate to the Payment Method page.
  2. On the Payment Method page, click the Back button (either the browser's back button or the button on the page).
  3. Navigate to the Rental History from the navigation bar.

Expected Result

The expected result is that the booking entry should not be saved, and the user should not see a "Pending" status in their Rental History.

Actual Result

The actual result is that the booking entry is still saved, and the user sees a "Pending" status in their Rental History.

Screenshot/s or Recordings

[Insert screenshot or recording of the issue]

Analysis

The issue is caused by the fact that the system is not properly handling the Back button click event. When the user clicks the Back button, the system is not canceling the booking entry, and instead, it is still recording the transaction as a successful booking.

Solution

To resolve this issue, the following changes can be made:

  1. Add a cancel button: Add a cancel button on the Payment Method page that allows the user to cancel the booking entry when they click the Back button.
  2. Implement a cancel event: Implement a cancel event that is triggered when the user clicks the Back button. This event should cancel the booking entry and prevent it from being saved.
  3. Update the Rental History: Update the Rental History to reflect the correct status of the booking entry. If the user did not proceed with payment, the status should be "Cancelled" instead of "Pending".

Implementation

To implement the solution, the following code changes can be made:

// Add a cancel button on the Payment Method page
const cancelButton = document.createElement('button');
cancelButton.textContent = 'Cancel';
cancelButton.addEventListener('click', () {
  // Cancel the booking entry
  cancelBookingEntry();
});

// Implement a cancel event
window.addEventListener('popstate', () => {
  // Cancel the booking entry when the user clicks the Back button
  cancelBookingEntry();
});

// Update the Rental History
function updateRentalHistory() {
  // Get the current booking entry
  const bookingEntry = getBookingEntry();
  
  // Update the Rental History to reflect the correct status
  if (bookingEntry.status === 'Pending') {
    bookingEntry.status = 'Cancelled';
  }
  
  // Save the updated Rental History
  saveRentalHistory();
}

Conclusion

Q&A

Q: What is the issue with the booking entry still being saved after clicking the Back button on the Payment Method page?

A: The issue is that the system is not properly handling the Back button click event, resulting in the booking entry still being saved and appearing in the Rental History with a "Pending" status, even though the user did not proceed with payment.

Q: Why is this issue important?

A: This issue is important because it can lead to incorrect information being displayed in the Rental History, which can cause confusion and frustration for users. Additionally, it can also lead to financial losses if users are charged for bookings that they did not intend to make.

Q: What are the steps to reproduce this issue?

A: To reproduce this issue, follow these steps:

  1. Click the Book Now! button to navigate to the Payment Method page.
  2. On the Payment Method page, click the Back button (either the browser's back button or the button on the page).
  3. Navigate to the Rental History from the navigation bar.

Q: What is the expected result?

A: The expected result is that the booking entry should not be saved, and the user should not see a "Pending" status in their Rental History.

Q: What is the actual result?

A: The actual result is that the booking entry is still saved, and the user sees a "Pending" status in their Rental History.

Q: How can this issue be resolved?

A: This issue can be resolved by implementing the following changes:

  1. Add a cancel button: Add a cancel button on the Payment Method page that allows the user to cancel the booking entry when they click the Back button.
  2. Implement a cancel event: Implement a cancel event that is triggered when the user clicks the Back button. This event should cancel the booking entry and prevent it from being saved.
  3. Update the Rental History: Update the Rental History to reflect the correct status of the booking entry. If the user did not proceed with payment, the status should be "Cancelled" instead of "Pending".

Q: What are the benefits of resolving this issue?

A: The benefits of resolving this issue include:

  • Improved user experience: By preventing incorrect information from being displayed in the Rental History, users will have a more accurate and reliable experience.
  • Reduced financial losses: By preventing users from being charged for bookings that they did not intend to make, financial losses can be reduced.
  • Increased trust: By resolving this issue, users will have increased trust in the system and be more likely to use it in the future.

Q: How can this issue be prevented in the future?

A: This issue can be prevented in the future by:

  • Implementing robust testing: Regular testing can help identify and resolve issues like this before they become major problems.
  • Following best practices: Following best practices for coding and development can help prevent issues like this from arising.
  • Encouraging user feedback: Encouraging user feedback can help identify issues like this and them to be resolved quickly.

Conclusion

In conclusion, the issue of booking entry still being saved after clicking the Back button on the Payment Method page is a critical problem that needs to be addressed. By implementing the solution outlined above, the system can accurately record transactions and reflect the correct status of booking entries in the Rental History.