Skip to content

Add optional income guidance to the membership step (JOIN-150) - #125

Open
conatus wants to merge 10 commits into
masterfrom
feature/join-150-design-and-build-income-based-subscription-guidance-on-the
Open

conatus wants to merge 10 commits into
masterfrom
feature/join-150-design-and-build-income-based-subscription-guidance-on-the

Conversation

@conatus

@conatus conatus commented Oct 1, 2026

Copy link
Copy Markdown
Member

What

An optional table on the membership step that shows suggested dues against income, like CATU's join page. Choosing a row selects that tier.

  • Off by default. An add-on switches it on with the new ck_join_flow_income_guidance_enabled filter. With it off, nothing changes: no new settings, no table.
  • With it on, each membership plan (global, and a block's own plans) gets optional Weekly income and Monthly income fields, e.g. "£600 to £800". Plans with neither filled in, such as a custom-amount tier, stay out of the table.
  • The Copy tab gets an editable Income guidance heading (defaulting to "Below are some recommended monthly dues amounts, based on income") and an optional Income guidance note shown below the table, for a hardship line.
  • The table sits above the tiers. Clicking a row, or its button, selects that tier; choosing a tier directly marks its row. Columns no plan fills in are hidden. It works by keyboard and becomes one labelled card per band on phones.

Why

JOIN-150. GMTU members said seeing their dues against their income helps. This is built into the main plugin behind a flag so GMTU can switch it on from its add-on without other sites seeing any change.

How

  • Settings::isIncomeGuidanceEnabled() reads the filter.
  • The band fields and the two copy settings are only registered when it is on.
  • Settings::getMembershipPlanIncomeBands() and Settings::getIncomeGuidanceEnv() pass the bands, heading and note to the form; Blocks.php merges them in.
  • IncomeGuidance (components/income-guidance.tsx) renders the table; the plan step selects a plan through the form, the same way a tier panel does.
  • Version bumped to 1.4.44.

Tests

  • PHP unit tests: the flag is off by default and an add-on can switch it on; bands and copy only reach the form when it is on.
  • Jest: when the table shows; rows, columns, heading and note; choosing a row; marking the chosen row.
  • E2E, settings (income-guidance-admin.spec.ts): the band and copy fields appear on the settings page and in the block editor with the flag on, and not at all with it off.
  • E2E, form (income-guidance.spec.ts): the table's contents; choosing a row selects the tier and that tier reaches payment; clicking anywhere on a row; keyboard; choosing a tier marks its row; the phone layout; no table with the flag off; bands entered in the block editor appear on the published page.
  • The e2e site switches the flag on through a small must-use plugin (mu-plugins/), driven by an option so specs can turn it off.
  • Breaking the flag check, the band filtering or row selection makes the relevant tests fail.
  • Full e2e suite passes locally from a fresh database (90 tests); the new specs passed three repeated runs.

E2E setup fixes:

  • Seeded page content is now escaped with wp_slash() before saving. WordPress was stripping the backslashes from £ in block JSON, turning £ into u00a3.
  • The admin and page-picker helpers moved into helpers.ts, for sharing.

Follow-up

The GMTU add-on needs one line to switch this on (add_filter('ck_join_flow_income_guidance_enabled', '__return_true');), plus a minimum parent version of 1.4.44. GMTU then enters its bands on the settings page.

Test plan

  • With no add-on switching it on, the settings page and membership step look exactly as before
  • Switch it on (e.g. a must-use plugin with the filter above); Weekly income and Monthly income appear on each global plan
  • The Copy tab shows Income guidance heading, with its default, and Income guidance note
  • Give three plans bands and leave one without; save
  • On the membership step, the table shows the three banded plans with the heading, and the note when set
  • Clicking a row selects its tier and the button shows that tier's amount
  • Choosing a tier directly highlights its row
  • Continue reaches payment with the chosen tier
  • On a phone, each band shows as its own card
  • A block's own plans can have bands too, and they show on that page
  • CI e2e job passes

🤖 Generated with Claude Code

@linear-code

linear-code Bot commented Oct 1, 2026

Copy link
Copy Markdown

JOIN-150

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant