Skip to content

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

Open
guitavano wants to merge 1 commit into
mainfrom
guitavano/plan-screen-e-commerce-themes
Open

guitavano wants to merge 1 commit into
mainfrom
guitavano/plan-screen-e-commerce-themes

Conversation

@guitavano

@guitavano guitavano commented Nov 10, 2026 •

Copy link
Copy Markdown
Contributor

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.

Written for commit d40990c. Summary will update on new commits.

View guided diff Turn on auto-fix

Replace the Plan coming-soon placeholder with a navigable prototype on
mocked analysis data:

- Map: a radial map of the store's areas (Inbound, CRO, technical health,
  areas not covered yet). Pan, pinch or Ctrl+scroll to zoom, click a topic
  to fit it; checks show only once their topic is open. Only technical
  health is graded; the other areas show a result metric over 30 days.
- CRO opens as the site funnel (Home, PLP, Search, Product, Cart,
  Checkout); a stage opens a card with the live page, framed the way the
  heatmap frames it, and the opportunities found on that page.
- Goals: revenue history and goals per year, a growth chart, a goal per
  month with a seasonal default, and a timeline whose month and year cards
  simulate sessions, conversion and average ticket and save them as goals.
- "Start a plan" opens the three entry points (idea, direction, full
  analysis); none is wired yet.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions github-actions Bot added the claude PR authored by a coding agent label Nov 10, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

claude PR authored by a coding agent

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant