Skip to content

Cruits App — New Screens — Iteration 3

For: UI Designer App: Cruits mobile app (Flexworker only) Scope: New and updated screens in Iteration 3 only Stories covered: 3.3, 3.4, 3.7, 3.8, 3.9

Change Log

Date Change
2026-06-25 Removed Booking reference (Booking.id) from S-01, S-02, S-03 field lists and from the Dynamic Values table. This field is not required by Story 3.6 and there is no functional requirement to show it to the Resident.
2026-06-26 Added S-12: Booking Status View — CHECKED_IN (new state, Story 3.10). Updated S-03 (BOOKED): removed "Check out" button — checkout is now only available from CHECKED_IN. Updated Status Display Reference.

Summary

# Screen Type Story
S-01 Booking Status View — PENDING_PROVIDER Full screen 3.3
S-02 Booking Status View — PENDING_PAYER Full screen 3.4
S-03 Booking Status View — BOOKED Full screen 3.3, 3.8, 3.9
S-04 Booking Status View — RESERVATION_FAILED (payer rejected) Full screen 3.4
S-05 Booking Status View — RESERVATION_FAILED (payer timeout) Full screen 3.4
S-06 Booking Status View — CANCELLED (pre-BOOKED) Full screen 3.7
S-07 Booking Status View — CANCELLED (BOOKED) Full screen 3.9
S-08 Pre-BOOKED Cancellation Dialog Modal 3.7
S-09 BOOKED Cancellation — Step 1: Reason Full screen or bottom sheet 3.9
S-10 BOOKED Cancellation — Step 2: Disclaimer Full screen or bottom sheet 3.9
S-11 Self-Checkout Confirmation Dialog Modal 3.8
S-12 Booking Status View — CHECKED_IN Full screen 3.10

Note: S-01 through S-07 and S-12 are status variants of the same Booking Status View component. Each variant has different text and different buttons. Design as one reusable screen with conditional content.

Status Display Reference

Complete reference for all booking states shown in the Booking Status View (Resident / Cruits app). Use this as the single source of truth for UI labels and body text.

State Variant UI Label Body text Buttons
RESERVED — "Reservation pending confirmation" "Your unit is held while we confirm availability. This hold expires on [expiry date and time]." Cancel reservation
PENDING_PROVIDER — "Confirming availability" "We are confirming your unit with the housing provider." Cancel reservation
PENDING_PAYER — "Awaiting payer approval" "Your reservation is waiting for approval from [Payer name]. You will be notified when a decision is made." Cancel reservation
BOOKED — "Housing confirmed" "Your unit at [confirmed address] is confirmed. Check-in: [date]. Check-out: [date]." Cancel booking (before period_start, within window) · Request cancellation (before period_start, outside window) · No button after period_start
CHECKED_IN — "Checked in" "You are checked in at [Listing Title]. Check-out: [date]." Check out
RESERVATION_FAILED Hold window expired "Reservation expired" "Your unit hold was released because the reservation was not confirmed in time. You may search for another listing." Browse listings
RESERVATION_FAILED Provider rejected TBD TBD Browse listings
RESERVATION_FAILED Payer rejected "Reservation rejected" "Your reservation for [Listing Title] was rejected by [Payer name]. You may search for another listing." Browse listings
RESERVATION_FAILED Payer timeout "Reservation expired" "Approval from [Payer name] was not received in time. The unit hold has been released." Browse listings
CANCELLED Pre-BOOKED "Reservation cancelled" "You have cancelled your reservation for [Listing Title]. You may search for another listing." Browse listings
CANCELLED BOOKED "Booking cancelled" "Your booking for [Listing Title] has been cancelled. Reason: [reason]." Browse listings
ENDED — TBD TBD —
SIGNING — TBD TBD —

Notes: - PENDING_PROVIDER and PENDING_PAYER are two distinct statuses for the Resident. Both are "waiting" states but with different explanations — the Resident can see who is holding up their booking. In admin panels they route to different actors (Provider Admin / Payer Admin). - RESERVATION_FAILED has multiple variants. The system must pass the failure reason to the UI so the correct label and body text are shown. - RESERVATION_FAILED — Provider rejected: label and body text not yet defined. To be specified. - ENDED screen content is not yet defined. The "My Booking" section may show an empty state or a dedicated completion screen — to be specified. - SIGNING is deferred to Iteration 4 (Story 4.2). Screen content is not yet defined. - RESERVED state is defined in Story 3.6 (Iteration 2). Cancel reservation button on RESERVED is added in Story 3.7 (Iteration 3).

S-01: Booking Status View — PENDING_PROVIDER

When shown: Immediately after the Flexworker creates a reservation. The system is waiting for the Provider to confirm or reject.

Status label: "Confirming availability"

Body text: "We are confirming your unit with the housing provider."

Fields

Field Source Notes
Status label Static See above
Body text Static See above
Listing title ListingUnit.title Display name of the listing
Check-in date Booking.period.start
Check-out date Booking.period.end

Buttons

Button Action Style
Cancel reservation Opens S-08 Secondary / destructive

S-02: Booking Status View — PENDING_PAYER

When shown: The Provider has confirmed the reservation. The Payer has not approved it yet. Applies only to indirect-payment bookings.

Status label: "Awaiting payer approval"

Body text: "Your reservation is waiting for approval from [Payer name]. You will be notified when a decision is made."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace [Payer name] with payer_name from booking
Listing title ListingUnit.title
Payer name Booking.payer_name Used in body text and as standalone label
Check-in date Booking.period.start
Check-out date Booking.period.end

Buttons

Button Action Style
Cancel reservation Opens S-08 Secondary / destructive

S-03: Booking Status View — BOOKED

When shown: The booking is fully confirmed. Shows for all payment paths (direct and indirect).

Status label: "Housing confirmed"

Body text: "Your unit at [confirmed address] is confirmed. Check-in: [date]. Check-out: [date]."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace placeholders with booking data
Listing title ListingUnit.title
Confirmed address Booking.confirmed_address Full address. For concrete-mode: includes floor / room / bed. For pool-mode: building address only. See address format note below.
Check-in date Booking.period.start
Check-out date Booking.period.end
Period-end reminder note Static + Booking.period.end Shown only when stay is shorter than 28 days. Text: "Your booking period ends on [period_end date]. You will need to arrange alternative accommodation after this date."

Address format note: Confirmed address contains: street name, house number, addition (if set), postcode, city. For concrete-mode bookings, append: floor / room / bed identifier. For pool-mode bookings, building address only — no room/bed shown.

Buttons

The "Check out" button is NOT available in BOOKED state. Checkout is only available after the Provider marks the Resident as checked in (state → CHECKED_IN, screen S-12).

Button visibility depends on today's date relative to Booking.period.start:

Condition Button Action Style
Before period_start — within cancellation window Cancel booking Opens S-09 Secondary / destructive
Before period_start — outside cancellation window Request cancellation TBD — new flow Secondary / destructive
On or after period_start (awaiting check-in) — No action button. Show note: "Your check-in will be confirmed by the housing provider." —

Once the Provider marks check-in, the booking moves to CHECKED_IN and the Resident sees S-12.

S-04: Booking Status View — RESERVATION_FAILED (Payer rejected)

When shown: The Payer has rejected the reservation.

Status label: "Reservation rejected"

Body text: "Your reservation for [Listing Title] was rejected by [Payer name]. You may search for another listing."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace placeholders
Listing title ListingUnit.title Used in body text and as standalone label
Payer name Booking.payer_name Used in body text

Buttons

Button Action Style
Browse listings Navigate to listings search Primary

S-05: Booking Status View — RESERVATION_FAILED (Payer timeout)

When shown: The Payer did not respond within the approval window. The hold has been released automatically.

Status label: "Reservation expired"

Body text: "Approval from [Payer name] was not received in time. The unit hold has been released."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace [Payer name]
Listing title ListingUnit.title
Payer name Booking.payer_name Used in body text

Buttons

Button Action Style
Browse listings Navigate to listings search Primary

S-06: Booking Status View — CANCELLED (pre-BOOKED)

When shown: Flexworker cancelled the reservation while it was in RESERVED, PENDING_PROVIDER, or PENDING_PAYER state.

Status label: "Reservation cancelled"

Body text: "You have cancelled your reservation for [Listing Title]. You may search for another listing."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace [Listing Title]
Listing title ListingUnit.title Used in body text

Buttons

Button Action Style
Browse listings Navigate to listings search Primary

S-07: Booking Status View — CANCELLED (BOOKED)

When shown: A confirmed (BOOKED) booking was cancelled by any actor (Flexworker, Provider, or Payer).

Status label: "Booking cancelled"

Body text: "Your booking for [Listing Title] has been cancelled. Reason: [reason]."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace [Listing Title] and [reason]
Listing title ListingUnit.title
Cancellation reason BookingStateTransition.notes The reason entered during cancellation

Buttons

Button Action Style
Browse listings Navigate to listings search Primary

S-08: Pre-BOOKED Cancellation Dialog

Type: Modal — overlays the current screen (S-01 or S-02). Trigger: "Cancel reservation" button on S-01 or S-02. Purpose: Ask the Flexworker to confirm the cancellation. No reason required.

Dialog title: "Cancel reservation?"

Body text: "Are you sure you want to cancel your reservation for [Listing Title]? This action cannot be undone."

Fields

Field Source Notes
Body text Dynamic Replace [Listing Title]
Listing title ListingUnit.title Used in body text

Buttons

Button Action Style
Yes, cancel Cancels the reservation → navigates to S-06 Destructive / primary
No, go back Closes dialog, returns to previous screen Secondary

S-09: BOOKED Cancellation — Step 1: Reason

Type: Full screen or bottom sheet. Trigger: "Cancel booking" button on S-03. Step: 1 of 2. Purpose: Collect a mandatory cancellation reason before the Flexworker can proceed.

Screen title: "Cancel booking"

Step indicator: "Step 1 of 2"

Body text: "Please tell us why you are cancelling."

Fields

Field Required Type Notes
Cancellation reason Yes Dropdown with predefined options, or free-text field Design decision for designer / dev team. The field must not be empty to enable the Next button.

Buttons

Button Action Style Condition
Next Navigate to S-10 Primary Active only when reason is entered
Back / Close (×) Return to S-03 without cancelling Secondary Always visible

S-10: BOOKED Cancellation — Step 2: Disclaimer

Type: Full screen or bottom sheet (continuation from S-09). Step: 2 of 2. Purpose: Show a legal disclaimer and require explicit acknowledgement before the cancellation is submitted.

Screen title: "Cancel booking"

Step indicator: "Step 2 of 2"

Disclaimer text: "I understand that by cancelling this confirmed booking, I take responsibility for any consequences as defined by the accommodation contract and applicable legislation. This action cannot be undone."

Fields

Field Required Type Notes
Acknowledgement checkbox Yes Checkbox Label: "I understand and agree". Must be ticked to enable Confirm button.

Buttons

Button Action Style Condition
Confirm cancellation Submit cancellation → navigate to S-07 Destructive / primary Active only when checkbox is ticked
Back Return to S-09 Secondary Always visible

S-11: Self-Checkout Confirmation Dialog

Type: Modal — overlays S-03. Trigger: "Check out" button on S-03. Purpose: Ask the Flexworker to confirm checkout. This action ends the booking.

Dialog title: "Check out?"

Body text: "Are you sure you want to check out from [Listing Title]? This will end your booking."

Fields

Field Source Notes
Body text Dynamic Replace [Listing Title]
Listing title ListingUnit.title Used in body text

Buttons

Button Action Style
Yes, check out Confirms checkout → booking moves to ENDED; screen updates Primary
Cancel Closes dialog, returns to S-03 Secondary

S-12: Booking Status View — CHECKED_IN

When shown: The Provider has marked the Resident as checked in. The booking is active and the Resident is physically present.

Status label: "Checked in"

Body text: "You are checked in at [Listing Title]. Check-out: [date]."

Fields

Field Source Notes
Status label Static See above
Body text Dynamic Replace placeholders with booking data
Listing title ListingUnit.title
Confirmed address Booking.confirmed_address Same format as S-03
Check-in date Booking.period.start
Check-out date Booking.period.end
Period-end reminder note Static + Booking.period.end Same rule as S-03: shown only when stay is shorter than 28 days

Buttons

Button Action Style
Check out Opens S-11 Primary

Dynamic Values — Reference Table

Placeholder Data source Where used
[Listing Title] ListingUnit.title at time of notification All screens
[Payer name] Booking.payer_name (set at reservation creation) S-02, S-04, S-05
[confirmed address] Booking.confirmed_address (set when booking reaches BOOKED) S-03
[date] / [period_end date] Booking.period.start / Booking.period.end S-03
[reason] BookingStateTransition.notes from BOOKED cancellation S-07

Notes for Designer

  1. Text is final. All status labels and body text strings are confirmed in the story specs. Do not change wording.

  2. S-01 through S-07 are one screen. The Booking Status View is a single reusable screen that shows different content per booking state. Design it as a component with conditional content blocks.

  3. CANCELLED has two variants (S-06 and S-07). Same layout, different text. RESERVATION_FAILED also has two variants (S-04 and S-05). Same layout, different text.

  4. S-09 and S-10 are a two-step flow. Step indicator ("Step 1 of 2 / Step 2 of 2") must be visible on both screens. The user can go back from Step 2 to Step 1 without losing their reason selection.

  5. Destructive actions need visual distinction. "Cancel reservation", "Cancel booking", and "Yes, cancel" buttons should be styled differently from primary actions (e.g. red or outlined). Confirm with the existing design system.

  6. Address display on S-03. The confirmed address field has two formats:

  7. Pool-mode booking: building address only (no room/bed).

  8. Concrete-mode booking: building address + floor / room / bed. Both must fit comfortably in the layout.

  9. Period-end note on S-03 appears only for stays shorter than 28 days. It is a secondary text block, not a primary CTA.

  10. Button states. "Next" on S-09 and "Confirm cancellation" on S-10 are disabled until the required field/checkbox is filled. Show a clear disabled state.

  11. No error messages are defined for these screens in Iteration 3. If the action fails (e.g. network error), handle with a generic retry pattern from the existing design system.

Comments