01

Given: The user has logged into their account.

When: The user navigates to the "My reservation" section.
AND The user does not have any reservation yet

Then: Display a clean, informative screen that communicates:

• A message indicating they currently have no reservations (e.g., "You currently don’t have any reservations").

• A call-to-action (CTA) button to browse products. (direct to saclab.com/bags)

Desktop: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5982&t=cSaLUUp3uPthE41M-4

Mobile: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-10242&m=dev

02

Given: The user has logged into their account.

When: The user does not have any current reservations, but they have made reservations in the past.

Then: Display a clean, informative screen that communicates:

• A message indicating they currently have no reservations (e.g., "You currently don’t have any reservations").

• A call-to-action (CTA) button to browse products.

• A section displaying their reservation history with max 4 reservations, organized with relevant details such as:

  • Date of reservation

  • Status

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5534&m=dev

Mob:https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-9686&m=dev

03

Given: The user has logged into their account.

When: The user has an active reservation, and they have made reservations in the past.

Then: Display a clean, well-organized screen that includes:

• A section highlighting the user’s active reservation with key details:

  • Reserve time left: A countdown

  • CTA “Remove” to cancel the reservation

  • CTA “Purchase” to buy the product

• A separate section for their past reservations, organized chronologically (newest → oldest).

  • Each past reservation should include:

    • Reservation date.

    • Status

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5651&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-9791&m=dev

04

Given: The user has logged into their account.

When: The user has more than four past reservations.

Then: In Past Reservations Section:

• Show up to four past reservations at a time, organized chronologically (newest to oldest).

• Each past reservation should include:

  • Reservation date and time

  • Status

• If the user has more than four past reservations:

  • Implement pagination

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5289&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-10073&m=dev

05

Given: The user has logged into their account.

When: The user has an active reservation, and have not made reservations in the past.

Then: Display a clean, well-organized screen that includes:

• A section highlighting the user’s active reservation with key details:

  • Reserve time left: A countdown

  • CTA “Remove” to cancel the reservation

  • CTA “Purchase” to buy the product

• Reservation history section: A message indicating that the user has no past reservations (e.g., "You have no previous reservations").

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5900&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-10006&m=dev