Skip to content

feat(plans): show the schedule preview inline in the plan modal #1153

Closed
#1179
Closed
feat(plans): show the schedule preview inline in the plan modal#1153
#1179
Labels
effort/mDaysimpact/manyAffects most userspriority/p2Backlog-worthyseverity/lowMinor harmtype/featNew capabilityurgency/this-sprintWithin the current sprint

Description

@cristim
cristim
opened on Oct 19, 2026

Summary

The plan schedule (laddering) preview should be visible inside the Create/Edit Purchase Plan modal and update live as the form changes. Today it sits behind a separate Preview schedule button that opens a second dialog.

Owner request: "why isn't the laddering preview fully integrated into the plans UI? I'd expect it all to be visible in the modal without having to click open preview there as well."

Why it is separate today

Plan (read-only part now; #1057 stays separate)

  1. Refactor plan-schedule-preview.ts into a reusable renderer: schedule intent (buildLocalScheduleIntent), plot (plan-schedule-plot.ts) and summary, separated from the dialog shell. No copy-paste.
  2. Render the staircase and summary inline in the plan modal, re-rendering on every relevant form change (preset, coverage, step percent, interval, notification days, term, payment). An invalid input shows the validation message in place of the plot.
  3. Size the modal so the staircase fits: a wider plan modal on desktop, and horizontal scroll inside the preview area on narrow screens (320 to 1440 px checked).
  4. Remove the Preview schedule button and its dialog once the inline preview covers it.
  5. No API writes and no Save changes.

Proof: jest tests for the renderer and live updates, written test-first. Playwright checks the modal with real plans (create and edit, desktop and phone widths), with screenshots in the PR. Then two independent reviews, local verification and CI.

Default and decision point

Default: an inline read-only preview, with the button and dialog removed.

What this drops: the dialog's local draft-date editing (#882/#884): dragging dates and interval handles, per-step date inputs, and "Reset draft dates". Those edits are local to the preview, discarded on close, and never applied by Save. They come back with #1057, where editor-managed dates are actually saved. If the draft-date editing should stay in the modal before #1057 lands, say so here and the inline preview will keep it, clearly labelled as unsaved.

@IAmJSD this is the plan and default above; please object here if you disagree.

Refs #631 #880 #1057

Activity

  1. cristim
    added
    priority/p2Backlog-worthy
    urgency/this-sprintWithin the current sprint
    severity/lowMinor harm
    impact/manyAffects most users
    effort/mDays
    type/featNew capability
    on Oct 19, 2026

  2. cristim commented on Oct 19, 2026

    @cristim
    cristim
    on Oct 19, 2026
    MemberAuthor

    Scope update after reading main (2d822f39): part of this already exists.

    • Create already has an inline preview. openPlanForm (frontend/src/plans.ts:1259-1273) mounts mountPlanEditorPanel into #plan-editor-panel (index.html:823) for Create. In read-only mode that panel also shows five permanently disabled controls and a roadmap sentence. Create users therefore see two previews: the inline one plus the Preview schedule dialog.
    • Edit does not mount it. plans.ts:1367 passes create=false, so editing a plan only has the dialog.
    • The panel has live-update gaps. After an invalid state, changing the preset never rebuilds the preview. Invalid input leaves the stale plot instead of showing the message. There is no live-region summary.
    • The dialog cannot be deleted yet. plan-editor-panel.ts:2 imports buildLocalScheduleIntent from the dialog module (plan-schedule-preview.ts).

    Restated work (default unchanged: inline read-only preview, button removed):

    1. Extract the schedule intent into plan-schedule-intent.ts, using the same names as the parked feat(plans): plan editor hardening deferred from #631 (atomic Save, editor API, managed dates) #1057 branch to keep its rebase easy.
    2. Make the inline panel read-only:
      • hide the disabled controls;
      • show the validation message in place of the plot;
      • rebuild on every relevant form change;
      • add a status summary that doubles as the plot's text alternative.
    3. Mount the panel in Edit as well as Create.
    4. Port the dialog's unique test coverage into the plot and interaction tests. Rewrite the Playwright spec for inline Create and Edit at 1440, 1280, 390 and 320 px, with screenshots. Then remove the button, the handler and the dialog.

    Code that stays for #1057:

    • The panel's draft-date editing behind editableDates;
    • plan-date-interaction.ts;
    • lib/plan-draft-dates.ts.

    The parked editor branch and the panel's editable mode both use them. Only the dialog's copy of draft-date editing goes away.

    This lands as two PRs to stay within the per-commit size cap: an additive one ("Part of #1153"), then the removal ("Closes #1153").

  3. cristim
    added 5 commits that reference this issue on Oct 20, 2026

    fix(plans): split the preview summary from its live region

    9ad5356

    fix(plans): hide the cleared preview region in the browser

    4383ae7

    fix(plans): make the inline schedule preview a live read-only panel (#…

    0a1f978

    test(plans): prove the Edit preview panel releases its listeners

    4c4756f

    fix(plans): cap the sticky preview, fix tab order and stack at 960px

    08706a2

  4. cristim commented on Oct 20, 2026

    @cristim
    cristim
    on Oct 20, 2026
    MemberAuthor

    @IAmJSD a layout question for phones, raised in review of #1178 (PR2). At 960 px and below, the modal stacks in one column with the form first and the preview after it. That keeps the tab and reading order matching the visual order, but on a phone the preview sits below the whole form (ramp cards, accounts, advanced settings), so a user has to scroll past everything to see it.

    Options:

    • A (default): keep the preview after the form.
    • B: place the preview right after the Ramp-up Schedule cards, before Advanced settings, so it sits next to the inputs that drive it. This needs the panel moved inside the form's DOM.
    • C: keep the order and add a one-line "Schedule preview below" link near the ramp cards.

    I'll proceed with A unless you prefer B or C.

  5. cristim
    added 3 commits that reference this issue on Oct 20, 2026

    feat(plans): show the inline schedule preview in Edit and lay it out …

    d875abc

    test(plans): restore the step-1 staircase and Escape containment checks

    34bf36e

    feat(plans): remove the Preview schedule dialog now that the preview …

    5a95420
  6. cristim
    closed this as completedin #1179on Oct 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    effort/mDaysimpact/manyAffects most userspriority/p2Backlog-worthyseverity/lowMinor harmtype/featNew capabilityurgency/this-sprintWithin the current sprint

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions