Skip to content

Distinguish 'change' vs 'select' timeslot in pickup UI#84

Merged
choden-dev merged 2 commits intomainfrom
feat/change-timeslot-ui
Apr 25, 2026
Merged

Distinguish 'change' vs 'select' timeslot in pickup UI#84
choden-dev merged 2 commits intomainfrom
feat/change-timeslot-ui

Conversation

@choden-dev
Copy link
Copy Markdown
Owner

Changes

When a user already has a pickup timeslot and navigates to change it, the UI now clearly communicates they are changing rather than selecting for the first time.

TimeslotSelector

  • New optional currentTimeslot prop
  • Displays an orange "CURRENT TIMESLOT" card at the top showing the existing date, time, and label
  • Heading: "Change Pickup Timeslot" vs "Select a Pickup Timeslot"
  • Button: "Update Timeslot" / "Updating..." vs "Confirm Timeslot" / "Confirming..."

OrderSteps

  • Passes orderDetails.pickupTimeslot to TimeslotSelector so it knows the current selection
  • Step heading: "📍 Change Pickup Time" vs "📍 Select Pickup Time"
  • Description: "already has a pickup time. Select a new timeslot below." vs "has been paid. Choose when you'd like to collect it."

Behaviour

  • First-time selection (order just paid): shows the original select UI, no current timeslot card
  • Changing timeslot (order already in AWAITING_PICKUP): shows the current timeslot prominently, with change-oriented language throughout

Files changed

  • components/pickup/TimeslotSelector.tsx
  • components/ordercontainer/OrderSteps.tsx

When the user already has a timeslot and navigates to the pickup
step, the UI now clearly indicates they are changing their timeslot:

TimeslotSelector:
- New optional currentTimeslot prop
- Shows an orange 'CURRENT TIMESLOT' card at the top with the
  existing date/time when changing
- Heading changes to 'Change Pickup Timeslot' vs 'Select a Pickup Timeslot'
- Button text changes to 'Update Timeslot' / 'Updating...' vs
  'Confirm Timeslot' / 'Confirming...'

OrderSteps:
- Passes orderDetails.pickupTimeslot to TimeslotSelector
- Heading changes to 'Change Pickup Time' vs 'Select Pickup Time'
- Description text adapts accordingly
Replace the date heading in the 'CURRENT TIMESLOT' card with the
pickup instruction profile name and short summary (e.g. the pickup
method/location) since the date is already visible in the timeslot
list below. The card now shows:
- Time range and label
- Pickup type name with optional short summary
@choden-dev choden-dev merged commit 43e4abd into main Apr 25, 2026
4 checks passed
@choden-dev choden-dev deleted the feat/change-timeslot-ui branch April 25, 2026 07:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant