On the booking details page of SS, set up a card to display the student's booking ID, booking status and portal showing both students' booking details:

In order to explain the logic clearly in this ticket

• Student A’s=student B’s: name student A’s booking as Original Booking, student B’s booking as Replacement Booking
• Student A & B have same start date, but student B early check-out: name student A’s booking as Original Booking, student B’s booking as Replacement Booking
• Student A & B have same end date, but student B late check-in: name student A’s original booking as Original Booking, student A’s shortened original booking as Engaged Booking, student B’s booking as Replacement Booking

Set up a new card on the booking details page of the SS

• Set up a tag on the right of the title to display the status of the booking
  • When staff just finish the takeover and no student accepts the takeover request, the status is pending
  • When staff has finished the takeover for a while, and only one student accepts the takeover request, the status is pending
  • When staff has finished the takeover for a while, and both students accept the takeover request, the status is confirmed
• Add a portal called” View Details” with a right arrow
• When staff log in to SS through Student A, the Replacement Booking ID will be shown on this card and vice versa

When we hover the icon of the yellow card, we could see the modal below coming up 

• Student A’s tenancy length=student B’s tenancy length/Student A & B have the same start date, but student B early check-out

• Student A & B have same end date, but student B late check-in

Student A’s tenancy length=student B’s tenancy length/Student A & B have the same start date, but student B early check-out

Log in through Student A, when the ”View Details” button is clicked, student A’s and the replacement student’s (=studnet B) booking details will be displayed in the coming up modal

• Log in through student A, in this modal, the label for the original booking details should be” Current”
• For replacement booking details, the label should be “Replacement”
• Add a “Replacement Booking” button below the replacement booking details
  • When this button is clicked, it will go to the booking details page of the SS to display the replacement booking details

• Log in through student B, the format is quite similar to the previous one
  • The label for the original booking details should be “Original”
  • The label for the replacement booking details should be “Current”
  • Add an “Original Booking” button below the original booking details
    • When this button is clicked, it will go to the booking details page of the SS to display the original booking details

Student A & B have same end date, but student B late check-in

Log in through Student A, when the ”View Details” button is clicked, student A’s engaged booking details and the replacement student’s (=studnet B) booking details will be displayed in the coming up modal

• Log in through student A
  • The label for the engaged booking details should be “ Engaged”
  • The label for the replacement booking details should be “Replacement”
  • Only add  “Replacement Booking” buttons below the replacement booking details
    • When this button is clicked, it will go to the booking details page of the SS to display the replacement booking details
• Log in through student B
  • The label for the engaged booking details should be “ Engaged”
  • The label for the replacement booking details should be “Current”
  • Add a left arrow on the left of the engaged booking details
    • When this arrow is clicked, the modal will display the original booking details

• The label for the original booking details should be “Original”
• Add an “Original Booking” button below the original booking details
  • When this button is clicked, it will go to the booking details page of the SS to display the original booking details
• Add a right arrow on the right of the original booking details
  • When this arrow is clicked, the modal will go back to display the engaged and current booking details.