Her client page
One page per session, changing by state. Built only from design-system.md tokens and components. All wording, names, dates and the studio are placeholder; no copy/ file exists yet. Fee and retainer follow portrait/offering.md (Without makeup artist, RM1,200, 50% retainer).
Design system Gallery structure
State 1 · Booking: choose session and date
decidedSix images per session, chosen by you from the set I retouch. Additional images from the same session are RM200 each. Private studio, Kuala Lumpur — location confirmed on booking.
Your date is held for 24 hours while you sign and pay the retainer.
Session type uses §6 Choice rows; dates and start times follow the chosen type (last start 16:00 for 2 hours, 14:00 for 4 hours, per the Map). Date by §6 Month calendar, start time by §6 Time boxes (Earl, 6 Oct 2026; selects rejected). Start times at 30-minute steps; 13 boxes for 2 hours is fine (Earl, 6 Oct 2026). The step is a setting. Struck-through dates are examples only. Wording is placeholder.
State 2 · Booked, awaiting signature
decided| Date | Sat 14 Nov 2026Held |
| Time | 10:00 – 12:00Held |
| Studio | Shared once your booking is confirmed. |
| Brief | Shared before your session. |
| Fee | RM1,200 |
Read and sign the agreement for your session.
After signing, you pay the RM600 retainer to hold your date.
Your date is held until Thursday 8 October, 21:10. If the agreement isn't signed and the retainer paid by then, the date is released.
Steps layout: B, current step only (Earl, 6 Oct 2026); A, all three steps listed, rejected. Progress shown as "Step 2 of 3" in the label (B1, Earl, 6 Oct 2026); a thin progress bar (B2) rejected, no new component. Standard header, brand only; page-top; blocks split by 64 · rule · 64; text column left on the gutter. Session details use the §6 table. Status label per §6: Unsigned needs action (--n700). Dates in rows use the short form ("Sat 14 Nov 2026"), full form in sentences (§4 Dates). Date and time carry a status label like agreement, retainer and balance (Earl, 6 Oct 2026): Held before payment, Booked once paid, Done after the session. No gallery block until after the session: it would crowd the page early on (Earl, 6 Oct 2026). Studio and brief rows are always shown; until the retainer is paid (studio) or the brief is ready, the value is one small line saying when it will be shared, never "TBC" (Earl, 6 Oct 2026); a With makeup artist session adds a Makeup artist row with the artist's name. Hold line: the time is worked out from the booking and the hold setting, never typed.
State 3 · Signed, awaiting retainer
draft| Date | Sat 14 Nov 2026Held |
| Time | 10:00 – 12:00Held |
| Studio | Shared once your booking is confirmed. |
| Brief | Shared before your session. |
| Fee | RM1,200 |
| Agreement | ViewSigned |
Card or FPX online banking.
Your date is held until Thursday 8 October, 21:10. If the retainer isn't paid by then, the date is released.
Same frame as state 2. The signed agreement moves into her session details as a View action link followed by the settled status Signed (--n400) (Earl, 6 Oct 2026: View first). Payment choice uses §6 Choice rows, retainer selected by default; the button follows the selection (Earl, 6 Oct 2026, option B; two buttons side by side rejected). Stripe takes one fixed amount, so she chooses here before leaving for Stripe. Amounts come from the Catalog and booking terms; card and FPX from the Map (Stripe). Wording is placeholder.
State 4 · While confirming, and if it fails
no choice here · follows §6Back from Stripe before the dashboard has the payment: §6 loading dots, then the success screen.
This usually takes a few seconds. Please keep this page open.
Back at state 3 with a §6 alert, her choice kept, the button to try again, the hold time shown.
The payment didn't go through. Nothing was charged. Your date is still held until Thursday 8 October, 21:10.
Wording is placeholder. The receipt line assumes a receipt email, which §8 hasn't settled.
State 5 · After Stripe, booking confirmed
decidedYour retainer is paid and the date is yours. There is nothing else to do for now. A receipt is on its way to your inbox.
| Date | Sat 14 Nov 2026BookedReschedule |
| Time | 10:00 – 12:00Booked |
| Studio | Studio name Street address, Kuala Lumpur |
| Brief | Shared before your session. |
| Agreement | ViewSigned |
| Retainer | RM600 Paid |
| Balance | RM600 Due 14 NovPay now |
Plans changed? Cancel your booking. Your retainer is refunded in full until 7 November.
Decided (Earl, 6 Oct 2026): she lands on her page, booked. The first block is a one-time confirmation: label "Booking confirmed", heading "See you on <date>", one body line, no button, then the usual 64 · rule · 64. It shows once, on this return only; on any later load or refresh it is gone and the page starts at her session details. Chosen over a quieter §6 alert and over a separate confirmation screen. From the session day the balance becomes the step block with the one button again (gallery stays locked until it is paid); before that it is only the Pay now link in her details. Shown only after the dashboard has recorded the payment. Before the session day there is no button on the page: the balance is a row in her details, its due date a settled label (--n400) and a Pay now action link, so it doesn't press on her. Loading dots sit at the end of "Confirming your payment".
State 6 · Cancel and reschedule
shown after the retainer is paid · placement decided: under her session details7+ days before for cancel, 5+ for reschedule. Reschedule is an action link in the date row; cancel is one quiet small line under the details with a text link. Each opens a §6 modal that states the outcome and any charge before she confirms.
| Date | Sat 14 Nov 2026BookedReschedule |
| Time | 10:00 – 12:00Booked |
| Studio | Studio name Street address, Kuala Lumpur |
| Brief | Read the brief |
| Fee | RM1,200 |
Plans changed? Cancel your booking. Your retainer is refunded in full until 7 November.
No Reschedule link in the date row; the cancel line becomes: contact Earl, and what it costs. Shown here inside both windows (4 days before).
| Date | Sat 14 Nov 2026Booked |
| Time | 10:00 – 12:00Booked |
| Studio | Studio name Street address, Kuala Lumpur |
| Brief | Read the brief |
| Fee | RM1,200 |
To reschedule or cancel now, contact Earl. Rescheduling carries a RM300 fee; cancelling forfeits your RM600 retainer.
Placement (Earl, 6 Oct 2026; replaces two action links under the details, which read as a prompt to act): Reschedule as an action link in the date row, after its status; cancel as one small line under the details with a text link. The free-until dates move into that line and the confirm modal. Between 5 and 7 days before, reschedule stays as a link and cancel turns into the contact line. Dates in the helper line are worked out from the session date and settings. Wording is placeholder.
State 7 · Session done, balance due
draft| Date | Sat 14 Nov 2026Done |
| Time | 10:00 – 12:00 |
| Studio | Studio name Street address, Kuala Lumpur |
| Brief | Read the brief |
| Agreement | ViewSigned |
| Retainer | RM600 Paid |
| Balance | RM600 Due |
RM600 was due on the day of your session. Your gallery opens as soon as it is paid.
Your images will appear here within 21 days of your session.
From the session day the balance is the step block with the one button again (Earl, 6 Oct 2026); its row status turns to Due in --n700 and the Pay now link goes, since the button replaces it. The gallery block appears now, as the §6 empty state. Cancel and reschedule are gone; directions go too. Wording is placeholder.
Behaviour answered by Earl
6 Oct 2026 · for management to carry into the MapHold. An unpaid chosen date is released 24 hours after booking if she takes no action. Opening or viewing the page does not extend it, and signing does not restart it: the 24 hours run from booking to payment. If she runs out of time she books again. One exception: if she started a payment before the deadline, the date stays held until that payment attempt ends (the checkout window), then is released if nothing was paid (Earl, 6 Oct 2026). 24 hours should be a setting.
Balance. She can pay the balance from her page any time after booking, up to the session day; it is due on the session day (Earl, 6 Oct 2026).
How she reaches her page (Earl, 6 Oct 2026). Her page carries all three booking steps: 1 choose date, 2 sign, 3 pay retainer, and opens at whichever step she reached. Step 1 is choosing the session type (With / Without makeup artist) and the date; Earl does not preset the type (Earl, 6 Oct 2026). Booking on portrait.earlkiu.com: starting a booking creates her page and takes her straight into it; if she stops before paying, an email is sent automatically so she can come back and finish. Enquiry form: no page is created and nothing is sent automatically. Earl replies first, then sends her the page himself; it opens at step 1. Until the retainer is paid she is a lead, not a session; once paid she becomes a session. This changes the Map (direct booking currently lands as a session at once): management to carry it in.
For management (copy). The line under Session on step 1 comes from portrait.earlkiu.com, where it reads "curated by me". That contradicts offering.md (she chooses her six). The mockup line is a placeholder fix; final wording to copy/, and the live page needs the same change.
Still open for management. Which emails she gets at each step (receipt, confirmation, or one doing both), and whether Earl is emailed when she pays. The cancel line under her details ("Plans changed? Cancel your booking.") was proposed by the UI session and not yet confirmed by Earl.
Still open for management. Earl wants to offer paying in full at booking as well as the retainer. Not in offering.md today. Earl's rule for it: cancelling inside 7 days forfeits the retainer only; the balance is refunded. Still to settle: what "non-refundable after a reschedule" means for a full payment. Needs the same legal review.
Session details she sees. Studio name, address with a link to map directions, makeup artist's name (With makeup artist only), the brief. No call sheet for portrait. Studio name and address are revealed only after the retainer is paid; before that the row says when it will be shared. The brief shows once Earl has written it.
Access. One-time code once per device, not on every visit.
Cancel and reschedule. She can cancel from her page 7 or more days before the session, and reschedule from it 5 or more days before (the windows in portrait/offering.md, read from Scheduling settings). Inside either window the option is replaced by a line telling her to contact Earl, with the charge that applies (retainer forfeited; RM300 reschedule fee). Fee and day values come from settings, never typed.
Still open for management. Earl raised making the reschedule fee half the retainer instead of a flat RM300 (RM300 Without makeup artist, RM450 With). A booking-terms change for offering.md and the legal review; not decided.
Still open for management. Whether she can view or download her signed agreement from her page (state 3 shows a View link).
Still open for management. After any reschedule the booking is non-refundable (offering.md). Whether self-serve cancel stays on the page after a reschedule, and what it then says, isn't decided.