Fix 'Change Pickup' routing & add timeslot pagination#83
Merged
choden-dev merged 7 commits intomainfrom Apr 25, 2026
Merged
Conversation
- Fix 'Change Pickup' routing: AWAITING_PICKUP status now maps to the PICKUP step instead of COMPLETE, so users can actually re-select their pickup timeslot instead of being sent to the confirmed screen. - Add pagination to TimeslotSelector: timeslots are grouped by date and paginated 3 dates per page with Previous/Next controls, so the list doesn't get cut off when many slots are available.
…tion - Install @tanstack/react-query v5 - Set up QueryClientProvider in _app.tsx with 30s staleTime and 1 retry - Add offset-based pagination to /api/pickup-slots (limit + offset params, returns total/hasMore metadata) - Refactor TimeslotSelector to use useQuery with server-side pagination, replacing raw useEffect + fetch. Uses placeholderData for smooth page transitions. - Update AGENTS.md with React Query guidelines and refactoring roadmap for remaining components still using raw fetch
Replace all inline styles and raw HTML elements with Chakra UI components (Box, Button, Text, Heading, Flex, HStack, VStack, Radio, RadioGroup, Alert, Spinner) for consistency with the rest of the app. Removes cancelButtonStyle and paginationButtonStyle constants in favor of Chakra's built-in variant/size props.
When the user clicks 'Change Pickup' from the pending orders list while already on the /order page, router.push updates the query params but resumeChecked was already true from the initial load, so the resume useEffect never re-ran. This caused the user to stay on whatever step they were on (or fall through to COMPLETE). Fix: add a useEffect that resets resumeChecked whenever resumeOrderId or pickupForOrderId changes, so the resume logic re-runs and correctly navigates to the PICKUP step.
Move the resumeChecked reset inside the main resume useEffect so it naturally re-runs when resumeOrderId or pickupForOrderId change. This avoids the need for a separate useEffect with a lint suppression. When query params change (e.g. user clicks 'Change Pickup' while already on /order), the effect re-runs, resets resumeChecked to false (showing the spinner), fetches the order, and navigates to the correct step.
Add a 'Change Pickup' button alongside 'View My Orders' and 'Back to Home' on both completion screens: - components/ordercontainer/OrderSteps.tsx (in-flow complete step) - pages/order_complete.tsx (standalone completion page) The button navigates to /order?pickupFor=<orderId> so the user can select a new timeslot directly from the confirmation screen.
The fetchOrder effect in OrderSteps was auto-advancing orders with AWAITING_PICKUP status to the COMPLETE step, even when the user had intentionally navigated to the PICKUP step to change their timeslot. This made the 'Change Pickup' flow impossible. Fix: add step !== OrderStep.PICKUP to the auto-advance guard so users on the PICKUP step can re-select their timeslot. The backend API already supports AWAITING_PICKUP → AWAITING_PICKUP transitions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
1. Fix 'Change Pickup' routing to wrong step
Problem: When a user clicked "Change Pickup" on an order with
AWAITING_PICKUPstatus, they were routed to the confirmed/complete step instead of the pickup selection step — making it impossible to actually change their timeslot.Root cause: The
statusToStepfunction inOrderContainer.tsxmappedAWAITING_PICKUP→OrderStep.COMPLETE. While there was special-case logic for thepickupForquery param to force the PICKUP step, the fallback mapping was wrong and could cause the issue.Fix: Moved
AWAITING_PICKUPto map toOrderStep.PICKUPinstead ofOrderStep.COMPLETE, so users with this status always land on the pickup selection step.2. Add pagination to timeslot selector
Problem: When many pickup timeslots were available, they all rendered at once and could overflow/get cut off on the page.
Fix: Added client-side pagination to the
TimeslotSelectorcomponent:Files changed
components/ordercontainer/OrderContainer.tsx— FixedstatusToStepmappingcomponents/pickup/TimeslotSelector.tsx— Added pagination withuseMemofor grouped date keys