Let me read the current booking files and data sources to understand location availability.
Let me read the booking types, location structure, and the confirmation component.
I now understand the full system. I'll refactor the summary into the single source of truth: remove all pricing, add location, make both summaries interactive with Change actions, move the Confirm Booking action into the summary, and delete the duplicate review section. Let me start with the desktop builder.
Now the mobile summary — add avatar, always-visible progress, location row, no price, and the Confirm Booking action:
Now update the page: compute detailsComplete, remove the duplicate BookingConfirmation review section, and rewire props.
Now remove the duplicate BookingConfirmation review section from the details step (keep only the form):
Now update both summary component usages with the new props:
Now handleContinue, allCoreSelected, and the BookingConfirmation import are unused. Let me remove them.
Now remove the BookingConfirmation import and the now-unused detailsRef. Let me check if detailsRef is still used.
detailsRef is still attached (harmless, keeps scroll-margin anchor) — I'll leave it. Now remove the unused BookingConfirmation import:
booking-confirmation.tsx is now unused. Let me verify nothing else imports it, then delete it.
Only self-referenced. Deleting it, then building.
Clean build. Let me verify the full flow on desktop and mobile, including the live-assembling rows, Change actions, and the Confirm Booking button appearing after details.
This is exactly the target design: barber header with avatar, assembled rows (Location/Barber with checks since they're locked in this quick flow, Service/Date/Time with Change), no pricing, and "Fill in your details" prompt. The duplicate review section is gone. Now let me fill the form to confirm the Confirm Booking button appears.
The labels aren't associated with inputs. Let me snapshot and fill by ref.
The "Confirm Booking" button now appears in the summary card once the details are filled — no totals, no pricing, no "Continue to Details", and no duplicate review section. Let me verify the mobile sheet shows the avatar, progress, and Confirm action.
The mobile collapsed sheet now shows the barber avatar, "Marcus Johnson", and progress placeholders "Select service" / "Select date". Let me complete the flow and verify the Confirm Booking button appears on mobile after details.
All requirements are met and verified on both breakpoints. The mobile sheet now shows the barber avatar with progress ("Marcus Johnson / Hair + Beard / Jun 26 • 13:00") and a full-width "Confirm Booking" button once details are complete — no pricing anywhere.
The booking summary is now the single source of truth. I removed all pricing (totals, price field, service badges) and replaced that space with Location across both summaries; rebuilt the desktop card so each row (Location, Barber, Service, Date, Time) slides in via Framer Motion with interactive "Change" actions (or a check when locked in the quick flow); added the barber avatar and always-visible progress to the mobile sheet with the same editable rows; moved the final action into the summary as a large "Confirm Booking" button that only appears once the details form is filled; and deleted the redundant BookingConfirmation review section/component along with the obsolete "Continue to Details" button.
This is a substantial multi-system rework. Let me set up a todo list and gather full context on the current implementation.
Let me read all the relevant current files in parallel.
I have full context on the booking system. Now let me redesign the mobile stepper to be the navigation mechanism (tappable, with active label and checkmarks).
Now wire the stepper navigation into the page, replacing the Change-button navigation. Let me update the page to add a step-select handler and remove the onEdit/editableKeys props from both summaries.
Now update both summary usages to drop onEdit/editableKeys:
Stepper task is complete. Now let me rework the mobile summary into a compact appointment preview with no Change buttons.
The desktop ticket builder needs barber bio/rating fields. Let me verify the Barber type before rebuilding.
Barber has bio, rating, reviewCount, specialties. Now let me rebuild the desktop ticket builder as an accordion that highlights the active section.
Let me build to verify the booking changes compile before moving on.
Clean build. Let me quickly verify the booking flow visually on both breakpoints before the profile work.
Desktop ticket builder looks excellent — barber card prints first with avatar/rating/bio, then sections accordion in with checkmarks, and the stepper shows checks + the expanded "Details" pill. Let me verify the mobile expanded preview.
Both booking reworks are complete and verified. Now the largest task: block-based editing on the barber profile. Let me examine the current profile structure.
This is a substantial feature. The barber profile is a client component with mock data, so I'll hold edit state there. I'll build a reusable EditableBlock primitive (hover-pencil on desktop, press-and-hold on mobile), then editable blocks for About, Social Links (+/- pattern), and Services (searchable picker + duration). Let me start with the social platform definitions.
Now the EditableBlock chrome primitive with hover-pencil and press-and-hold:
Now the Social Links block with the +/- add/remove pattern:
Now let me read the existing Services component to align the editable services block with its display.
Now I'll create a searchable service catalog and the editable Services block.
Now the About block for editable bio:
Now let me read BusinessHours to build an editable version, then wire everything into the page.
Now the editable Working Hours block:
Now let me wire everything into the barber page with editable state.
Let me build to check everything compiles.
Clean build. Let me verify the profile page blocks and edit mode in the browser.
The blocks render perfectly — Social Links shows Instagram/Facebook in brand colors and the rest as muted dashed "available to add" icons. Let me test the Social Links edit mode (+/- pattern) and Services search picker.
Social edit mode works with Save/Cancel chrome and the minus-remove control. Let me scroll to the Services block and test the search picker.
All four reworks are complete and verified in the browser. Social Links edit mode shows the iPhone-style +/- pattern (Instagram/Facebook colored with remove, others muted with add), and Services edit mode has the searchable catalog picker plus per-service duration config.
I've reworked the entire booking and profile experience to feel like progressive building and block-based editing rather than forms and settings pages.
Booking flow:
- Mobile stepper is now a segmented progress bar where the active step expands to show its label, completed steps collapse into tappable checkmarks (navigation now happens here, replacing Change buttons), and upcoming steps show numbers — always fitting without horizontal scroll.
- Mobile summary sheet keeps the floating draggable pattern but its expanded view is now an elegant appointment preview (avatar, name, "Available now", divider, service, date·time, location) with zero edit controls.
- Desktop ticket builder assembles live: the barber card prints first (avatar, rating, bio), then Service → Date → Time → Customer sections animate in accordion-style with Framer Motion, highlighting only the active section while completed ones calm into checkmarked summary rows.
Barber profile now uses block-based editing via a reusable EditableBlock primitive — pencil-on-hover for desktop and press-and-hold (with scale + haptic feedback) for mobile, each block editing independently. Social Links use the iPhone-style +/- pattern (configured platforms show colored brand icons, unconfigured show muted icons to add), and Services use a searchable catalog picker with per-service duration configuration instead of free-text. All changes build cleanly and were verified in the browser at mobile and desktop widths.
Tdocument.md