Session type and session length selection steps #4

New Issue

2026-07-07T21:38:07-06:00

jhodgkin commented

2026-07-07 21:38:07 -06:00

Goal

Steps 2 and 3 of the booking form — visually appealing card-based selectors for session type and length.

Step 2 — Session Type

Card grid with icon/illustration, title, and short description for each type. Types driven by config/site.json so the photographer can add/edit without touching code.

Default types:

Individual Portrait
Couple
Family
Newborn
Other (free-text field appears)

Step 3 — Session Length

Two large cards:

Mini Session — 30 minutes — $[price]
Full Session — 60 minutes — $[price]

Pricing pulled from config/site.json per session type × length combination.

Config addition to site.json

"booking": {
  "sessionTypes": [
    { "id": "individual", "label": "Individual Portrait", "icon": "person" },
    { "id": "couple", "label": "Couple", "icon": "favorite" },
    { "id": "family", "label": "Family", "icon": "groups" },
    { "id": "newborn", "label": "Newborn", "icon": "child_care" }
  ],
  "pricing": {
    "mini": 75,
    "full": 150
  }
}

Acceptance

Selecting a card highlights it and enables the Next button
Selected type and length are stored in the booking state object

## Goal Steps 2 and 3 of the booking form — visually appealing card-based selectors for session type and length. ## Step 2 — Session Type Card grid with icon/illustration, title, and short description for each type. Types driven by `config/site.json` so the photographer can add/edit without touching code. Default types: - Individual Portrait - Couple - Family - Newborn - Other (free-text field appears) ## Step 3 — Session Length Two large cards: - **Mini Session** — 30 minutes — $[price] - **Full Session** — 60 minutes — $[price] Pricing pulled from `config/site.json` per session type × length combination. ## Config addition to site.json ```json "booking": { "sessionTypes": [ { "id": "individual", "label": "Individual Portrait", "icon": "person" }, { "id": "couple", "label": "Couple", "icon": "favorite" }, { "id": "family", "label": "Family", "icon": "groups" }, { "id": "newborn", "label": "Newborn", "icon": "child_care" } ], "pricing": { "mini": 75, "full": 150 } } ``` ## Acceptance - Selecting a card highlights it and enables the Next button - Selected type and length are stored in the booking state object

jhodgkin referenced this issue from a commit

2026-07-07 23:00:41 -06:00

Implement config-driven session type and length steps (issue #4)

jhodgkin closed this issue

2026-07-07 23:00:41 -06:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: jhodgkin/lisilou-portfolio#4