feat(web): Plan page prototype with store map and goals

GU
4h ago
+3814-143

What is this contribution about?

Replaces the Plan "coming soon" placeholder with a navigable prototype. All analysis data is mocked; no action button is wired yet. The goal is to validate the flow in the product before building the backend.

Map (default view)

  • Radial map of the store's areas: Inbound (SEO, GEO, content), CRO, technical health (speed, accessibility, best practices), and areas not covered yet ("Coming soon").
  • Pan by dragging, zoom with pinch or Ctrl+scroll, click a topic to fit it. The individual checks (red/yellow/green dots) appear only once their topic is open.
  • Only technical health shows a checklist score. The other areas show a result metric with its period (e.g. organic sessions in 30 days), so no number appears without saying what it counts.
  • The center shows the organization's name or logo. Org files are requested through the Studio that is open, so a local or preview Studio can load them with its own session.

CRO as the funnel

  • Stages: Home, PLP, Search, Product, Cart, Checkout. Sessions per stage, share of the total, step-to-step rate, and the biggest loss highlighted.
  • A stage opens a card with the live page in an iframe, framed the same way as the heatmap (same siteOrigin/frameUrl helpers and sandbox, domain from the Deco Analytics status keyed by analyticsSite), plus the opportunities found on that page.

Goals tab

  • Form for web revenue history (variable number of past years), this year's actual and goal, and next year's goal.
  • Growth chart (actual vs. goal per year).
  • Goal per month, starting from a typical retail seasonality and editable per month, with a check that the months add up to the yearly goal.
  • Timeline with Month and Year views. Each card simulates sessions, conversion and average ticket with sliders, projects revenue against the goal, and saves the levers as goals ("Set goals"). The Year view moves every month of the year by the same ratio.

Start a plan

  • A button opens a dialog with the three entry points: I have an idea, I have a direction (topic chips), full analysis.

All new copy is in i18n/{en,pt-br}/plan.ts. The old coming-soon component and its keys were removed.

How did you verify your code works?

  • bun run verify: format, oxlint and knip pass. The tests ran 13,242 pass / 1 fail; the failure was packages/shared/src/blocks-major.test.ts timing out at 5s under the parallel run. This branch does not touch it, and running it alone passes (18/18).
  • Exercised in the browser against a running Studio:
    • map navigation and the zoom fit;
    • checks hidden until their topic opens;
    • funnel and stage card with the live page in the iframe (on localhost, a store whose CSP frame-ancestors allows only the Studio domains is blocked, as in the heatmap);
    • goals form with added and removed years;
    • monthly split with the warnings when it does not add up;
    • Month and Year timeline sliders, saving goals, and jumping from a month in the Year view to that month.
  • Not run to completion: the web typecheck (tsc --noEmit). It did not finish locally within the time limit and reported no errors; I'm relying on CI for it.

Screenshots/Demonstration

Not attached. The screenshots taken during development show real organization data.

How to Test

  1. Open Plan in a project with a site. The store map opens.
  2. Drag and zoom the map. Click Inbound ā†’ SEO and see the checks appear; click a check to see its detail.
  3. Click CRO to open the funnel. Click a stage to open the card with the page and its opportunities.
  4. Click Start a plan and check the three options in the dialog.
  5. Open the Goals tab, fill in the values (or "Use example values") and click "See the timeline".
  6. Edit a month in "Goal per month". In the timeline, move the sliders in a Month card and in a Year card, and click "Set goals".

Review Checklist

  • PR title is clear and descriptive
  • Changes are tested and working
  • Documentation is updated (if needed)
  • No breaking changes

šŸ¤– Generated with Claude Code

Summary by cubic

Replaces the Plan "coming soon" placeholder with a navigable prototype on mocked analysis data, so the flow can be validated before the backend is built. No action is wired yet.

New Features

  • Store map: radial view of Inbound, CRO, technical health, and uncovered areas, with drag, pinch/Ctrl-scroll zoom, and click-to-fit topics; checks appear only once their topic opens.
  • Technical health shows a checklist score; the other areas show a result metric with its period, so no number appears without a label.
  • CRO opens as the funnel (Home, PLP, Search, Product, Cart, Checkout) with session counts, step-to-step rates, and the biggest loss highlighted; a stage opens the live page in a card framed like the heatmap, beside the opportunities found on that page.
  • Goals tab: revenue history and yearly targets, a growth chart, a per-month goal with a retail seasonality default and an add-up check, and Month/Year timeline cards that simulate sessions, conversion, and average ticket and save the levers as goals.
  • "Start a plan" opens a dialog with three entry points: idea, direction (topic chips), and full analysis.
  • All copy lives in i18n/{en,pt-br}/plan.ts; the coming-soon component and its keys were removed.