From bff470a740337c02030d4c3a44d7b50ae5ff97a5 Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 16:45:24 +0100
Subject: [PATCH 01/14] Add an income guidance flag that add-ons can switch on

---
 packages/join-block/src/Settings.php          |  6 +++
 .../tests/SettingsIncomeGuidanceTest.php      | 52 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 packages/join-block/tests/SettingsIncomeGuidanceTest.php

diff --git a/packages/join-block/src/Settings.php b/packages/join-block/src/Settings.php
index 78520a7..d2a53a8 100644
--- a/packages/join-block/src/Settings.php
+++ b/packages/join-block/src/Settings.php
@@ -679,6 +679,12 @@ private static function describePlanRedirectCheckboxes()
         }
     }
 
+    // Income guidance is off unless an add-on switches it on.
+    public static function isIncomeGuidanceEnabled()
+    {
+        return (bool) apply_filters('ck_join_flow_income_guidance_enabled', false);
+    }
+
     // Names the CRMs this site uses, so admins can see where redirected people
     // will not appear.
     public static function getMembershipPlanRedirectHelpText()
diff --git a/packages/join-block/tests/SettingsIncomeGuidanceTest.php b/packages/join-block/tests/SettingsIncomeGuidanceTest.php
new file mode 100644
index 0000000..1c03b64
--- /dev/null
+++ b/packages/join-block/tests/SettingsIncomeGuidanceTest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace CommonKnowledge\JoinBlock\Tests;
+
+use Brain\Monkey;
+use CommonKnowledge\JoinBlock\Settings;
+use Mockery\Adapter\Phpunit\MockeryPHPUnitIntegration;
+use PHPUnit\Framework\TestCase;
+
+/**
+ * Income guidance shows income bands against membership plans on the plan
+ * step. It is off unless an add-on switches it on with the
+ * ck_join_flow_income_guidance_enabled filter.
+ */
+class SettingsIncomeGuidanceTest extends TestCase
+{
+    use MockeryPHPUnitIntegration;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        Monkey\setUp();
+    }
+
+    protected function tearDown(): void
+    {
+        Monkey\tearDown();
+        parent::tearDown();
+    }
+
+    public function test_is_off_by_default()
+    {
+        $this->assertFalse(Settings::isIncomeGuidanceEnabled());
+    }
+
+    public function test_an_add_on_can_switch_it_on()
+    {
+        Monkey\Filters\expectApplied('ck_join_flow_income_guidance_enabled')
+            ->once()
+            ->with(false)
+            ->andReturn(true);
+
+        $this->assertTrue(Settings::isIncomeGuidanceEnabled());
+    }
+
+    public function test_a_truthy_filter_result_counts_as_on()
+    {
+        Monkey\Filters\expectApplied('ck_join_flow_income_guidance_enabled')->andReturn('1');
+
+        $this->assertTrue(Settings::isIncomeGuidanceEnabled());
+    }
+}

From 07b83ff1be91c97a7d002ee6a4cc678525cda5c9 Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 16:51:26 +0100
Subject: [PATCH 02/14] Let e2e tests switch income guidance on and off

---
 packages/join-e2e/.wp-env.json                          | 3 ++-
 packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php | 9 +++++++++
 packages/join-e2e/scripts/setup.php                     | 4 ++++
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php

diff --git a/packages/join-e2e/.wp-env.json b/packages/join-e2e/.wp-env.json
index 81a4016..f72c874 100644
--- a/packages/join-e2e/.wp-env.json
+++ b/packages/join-e2e/.wp-env.json
@@ -2,7 +2,8 @@
   "core": "https://wordpress.org/wordpress-6.9.4.zip",
   "plugins": ["../../packages/join-block"],
   "mappings": {
-    "wp-content/e2e-scripts": "../../packages/join-e2e/scripts"
+    "wp-content/e2e-scripts": "../../packages/join-e2e/scripts",
+    "wp-content/mu-plugins/ck-e2e-income-guidance.php": "../../packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php"
   },
   "config": {
     "WP_DEBUG": true,
diff --git a/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php b/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php
new file mode 100644
index 0000000..731666e
--- /dev/null
+++ b/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Plugin Name: CK Join Flow E2E: income guidance switch
+ * Description: Switches income guidance on when the ck_e2e_income_guidance_enabled option is set, as an add-on would.
+ */
+
+add_filter('ck_join_flow_income_guidance_enabled', function ($enabled) {
+    return $enabled || (bool) get_option('ck_e2e_income_guidance_enabled');
+});
diff --git a/packages/join-e2e/scripts/setup.php b/packages/join-e2e/scripts/setup.php
index 75be919..6413faa 100644
--- a/packages/join-e2e/scripts/setup.php
+++ b/packages/join-e2e/scripts/setup.php
@@ -87,6 +87,10 @@ function ck_e2e_upsert_page(string $slug, string $title, string $content): int
 carbon_set_theme_option('organisation_bank_name', 'E2E ORG');
 carbon_set_theme_option('organisation_email_address', 'e2e@example.org');
 
+// Switch income guidance on, as an add-on would (see mu-plugins/). Specs that
+// need it off turn the option off and back on again.
+update_option('ck_e2e_income_guidance_enabled', '1');
+
 // Configure pretty permalinks so test URLs are predictable.
 update_option('permalink_structure', '/%postname%/');
 flush_rewrite_rules(true);

From c8aca7e3ecb9881990cf07b45ad3e76f5b036d2b Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 16:53:14 +0100
Subject: [PATCH 03/14] Share the admin and plan-picking e2e helpers

---
 .../tests/admin-plan-redirect.spec.ts         | 68 ++++---------------
 packages/join-e2e/tests/helpers.ts            | 54 ++++++++++++++-
 packages/join-e2e/tests/plan-redirect.spec.ts | 10 +--
 3 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/packages/join-e2e/tests/admin-plan-redirect.spec.ts b/packages/join-e2e/tests/admin-plan-redirect.spec.ts
index 93caeaf..96ba3bf 100644
--- a/packages/join-e2e/tests/admin-plan-redirect.spec.ts
+++ b/packages/join-e2e/tests/admin-plan-redirect.spec.ts
@@ -1,7 +1,15 @@
-import { test, expect, Locator, Page } from '@playwright/test';
-import { execSync } from 'child_process';
-import path from 'path';
-import { loginAsAdmin, mockRestEndpoints, CONTINUE } from './helpers';
+import { test, expect, Locator } from '@playwright/test';
+import {
+  choosePlan,
+  field,
+  fillPlan,
+  loginAsAdmin,
+  mockRestEndpoints,
+  openNewPageWithJoinBlock,
+  reseed,
+  SETTINGS_PAGE,
+  wpCli,
+} from './helpers';
 
 /**
  * Configuring a redirecting plan through wp-admin, end to end
@@ -16,35 +24,12 @@ import { loginAsAdmin, mockRestEndpoints, CONTINUE } from './helpers';
  * the seed is re-run afterwards to put them back for the specs that follow.
  */
 
-function wpCli(command: string): void {
-  execSync(`npx wp-env run tests-cli ${command}`, { cwd: path.resolve(__dirname, '..'), stdio: 'ignore' });
-}
-
-function reseed(): void {
-  wpCli('wp eval-file /var/www/html/wp-content/e2e-scripts/setup.php');
-}
-
-const SETTINGS_PAGE = '/wp-admin/admin.php?page=crb_carbon_fields_container_ck_join_flow.php';
 const GLOBAL_PLANS_PAGE = '/e2e-global-plans-join/';
 const REDIRECT_TARGET = '/e2e-redirect-target/';
 const REDIRECT_TARGET_TITLE = 'E2E Redirect Target';
 const REDIRECT_TARGET_COPY = 'You have been redirected here instead of paying.';
 const REDIRECT_CHECKBOX = 'Redirect to a page instead of taking payment';
 
-/** A Carbon Fields field inside `scope`, matched on its exact label. Section headings are skipped. */
-function field(scope: Locator, label: string): Locator {
-  return scope
-    .locator('.cf-field:not(.cf-separator)')
-    .filter({ has: scope.page().locator('.cf-field__label', { hasText: new RegExp(`^${label}\\*?$`) }) })
-    .first();
-}
-
-/** Fills in a plan's name and price. "Price" alone would also match "Price Point ID". */
-async function fillPlan(plan: Locator, name: string, price: string): Promise<void> {
-  await field(plan, 'Name').locator('input').fill(name);
-  await field(plan, 'Price').locator('input').fill(price);
-}
-
 function redirectPicker(plan: Locator): Locator {
   return field(plan, 'Page to redirect to');
 }
@@ -65,31 +50,6 @@ function selectedPages(picker: Locator): Locator {
   return picker.locator('.cf-association__col').nth(1);
 }
 
-/** Opens a new, unsaved page in the block editor with a CK Join Form block on it. */
-async function openNewPageWithJoinBlock(page: Page): Promise<void> {
-  await page.goto('/wp-admin/post-new.php?post_type=page');
-  await page.waitForFunction(() => (window as any).wp?.data?.select('core/editor'));
-
-  // New pages open with WordPress's starter pattern picker over the editor.
-  const patterns = page.getByRole('dialog', { name: 'Choose a pattern' });
-  if (await patterns.waitFor({ state: 'visible', timeout: 5000 }).then(() => true, () => false)) {
-    await patterns.getByRole('button', { name: 'Close' }).click();
-  }
-
-  await page.evaluate(() => {
-    const wp = (window as any).wp;
-    wp.data.dispatch('core/editor').editPost({ title: 'E2E Block Editor Redirect' });
-    wp.data.dispatch('core/block-editor').insertBlocks(wp.blocks.createBlock('carbon-fields/ck-join-form'));
-  });
-}
-
-async function choosePlan(page: Page, label: string): Promise<void> {
-  await page.locator(CONTINUE).click();
-  await page.waitForSelector('[role="radiogroup"]');
-  await page.locator('label.radio-panel', { has: page.locator(`[id="membership-${label}"]`) }).click();
-  await page.locator(CONTINUE).click();
-}
-
 test.describe('Global plans on the Join settings page', () => {
   test.describe.configure({ mode: 'serial' });
 
@@ -194,7 +154,7 @@ test.describe('Redirect help text', () => {
       await expect(checkbox).toContainText(NOT_RECORDED);
 
       // The block's own plans are built separately, so check them too.
-      await openNewPageWithJoinBlock(page);
+      await openNewPageWithJoinBlock(page, 'E2E Block Editor Redirect');
       const plansField = field(page.locator('[data-type="carbon-fields/ck-join-form"]'), 'Custom Membership Plans');
       await plansField.locator('.cf-complex__inserter-button').click();
       await expect(
@@ -209,7 +169,7 @@ test.describe('Redirect help text', () => {
 test.describe('Custom plans in the CK Join Form block', () => {
   test('a redirecting plan set up in the block editor redirects on the published page', async ({ page }) => {
     await loginAsAdmin(page);
-    await openNewPageWithJoinBlock(page);
+    await openNewPageWithJoinBlock(page, 'E2E Block Editor Redirect');
 
     const block = page.locator('[data-type="carbon-fields/ck-join-form"]');
     await chooseRedirectTarget(field(block, 'Page to redirect to after joining'));
diff --git a/packages/join-e2e/tests/helpers.ts b/packages/join-e2e/tests/helpers.ts
index a1eebd9..08c3ccc 100644
--- a/packages/join-e2e/tests/helpers.ts
+++ b/packages/join-e2e/tests/helpers.ts
@@ -1,4 +1,6 @@
-import { Page, expect } from '@playwright/test';
+import { Locator, Page, expect } from '@playwright/test';
+import { execSync } from 'child_process';
+import path from 'path';
 
 export const SAVED_STATE_KEY = 'ck_join_state_flow';
 export const CONTINUE = 'button[type="submit"]:has-text("Continue")';
@@ -120,3 +122,53 @@ export async function loginAsAdmin(page: Page): Promise<void> {
   await page.goto('/wp-admin/', { waitUntil: 'domcontentloaded' });
   await expect(page.locator('#wpadminbar')).toBeVisible();
 }
+
+export const SETTINGS_PAGE = '/wp-admin/admin.php?page=crb_carbon_fields_container_ck_join_flow.php';
+
+export function wpCli(command: string): void {
+  execSync(`npx wp-env run tests-cli ${command}`, { cwd: path.resolve(__dirname, '..'), stdio: 'ignore' });
+}
+
+export function reseed(): void {
+  wpCli('wp eval-file /var/www/html/wp-content/e2e-scripts/setup.php');
+}
+
+/** A Carbon Fields field inside `scope`, matched on its exact label. Section headings are skipped. */
+export function field(scope: Locator, label: string): Locator {
+  return scope
+    .locator('.cf-field:not(.cf-separator)')
+    .filter({ has: scope.page().locator('.cf-field__label', { hasText: new RegExp(`^${label}\\*?$`) }) })
+    .first();
+}
+
+/** Fills in a plan's name and price. "Price" alone would also match "Price Point ID". */
+export async function fillPlan(plan: Locator, name: string, price: string): Promise<void> {
+  await field(plan, 'Name').locator('input').fill(name);
+  await field(plan, 'Price').locator('input').fill(price);
+}
+
+/** Opens a new, unsaved page in the block editor with a CK Join Form block on it. */
+export async function openNewPageWithJoinBlock(page: Page, title: string): Promise<void> {
+  await page.goto('/wp-admin/post-new.php?post_type=page');
+  await page.waitForFunction(() => (window as any).wp?.data?.select('core/editor'));
+
+  // New pages open with WordPress's starter pattern picker over the editor.
+  const patterns = page.getByRole('dialog', { name: 'Choose a pattern' });
+  if (await patterns.waitFor({ state: 'visible', timeout: 5000 }).then(() => true, () => false)) {
+    await patterns.getByRole('button', { name: 'Close' }).click();
+  }
+
+  await page.evaluate((title) => {
+    const wp = (window as any).wp;
+    wp.data.dispatch('core/editor').editPost({ title });
+    wp.data.dispatch('core/block-editor').insertBlocks(wp.blocks.createBlock('carbon-fields/ck-join-form'));
+  }, title);
+}
+
+/** Continues from the details step, picks the plan by its label, and continues again. */
+export async function choosePlan(page: Page, label: string): Promise<void> {
+  await page.locator(CONTINUE).click();
+  await page.waitForSelector('[role="radiogroup"]');
+  await page.locator('label.radio-panel', { has: page.locator(`[id="membership-${label}"]`) }).click();
+  await page.locator(CONTINUE).click();
+}
diff --git a/packages/join-e2e/tests/plan-redirect.spec.ts b/packages/join-e2e/tests/plan-redirect.spec.ts
index 2e4e314..af773a9 100644
--- a/packages/join-e2e/tests/plan-redirect.spec.ts
+++ b/packages/join-e2e/tests/plan-redirect.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect, Page } from '@playwright/test';
-import { mockRestEndpoints, CONTINUE, SAVED_STATE_KEY } from './helpers';
+import { choosePlan, mockRestEndpoints, CONTINUE, SAVED_STATE_KEY } from './helpers';
 
 /**
  * Membership plans that redirect instead of taking payment
@@ -25,14 +25,6 @@ async function readEnv(page: Page): Promise<Record<string, any>> {
   return page.evaluate(() => JSON.parse(document.getElementById('env')!.textContent || '{}'));
 }
 
-async function choosePlan(page: Page, label: string): Promise<void> {
-  await page.locator(CONTINUE).click();
-  await page.waitForSelector('[role="radiogroup"]');
-  // Each plan's radio is given the id "membership-<label>".
-  await page.locator('label.radio-panel', { has: page.locator(`[id="membership-${label}"]`) }).click();
-  await page.locator(CONTINUE).click();
-}
-
 /** Records every call to the join endpoint, which a redirect must never make. */
 function recordJoinCalls(page: Page): string[] {
   const calls: string[] = [];

From 0c4ca5e540a47acb1706b630a48be3f47163cd65 Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 16:55:48 +0100
Subject: [PATCH 04/14] Add income band and guidance copy settings when income
 guidance is on

---
 packages/join-block/src/Settings.php          | 25 +++++
 .../tests/income-guidance-admin.spec.ts       | 93 +++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 packages/join-e2e/tests/income-guidance-admin.spec.ts

diff --git a/packages/join-block/src/Settings.php b/packages/join-block/src/Settings.php
index d2a53a8..277f9cd 100644
--- a/packages/join-block/src/Settings.php
+++ b/packages/join-block/src/Settings.php
@@ -181,6 +181,21 @@ public static function init()
                 ->set_default_value("Joining")
                 ->set_help_text("The verb used in the loading spinner (e.g., 'Joining Organisation Name')"),
         ];
+        if (self::isIncomeGuidanceEnabled()) {
+            $after_tiers_copy = 1 + array_search(
+                'currency_selection_copy',
+                array_map(fn($field) => $field->get_base_name(), $copy_fields),
+                true
+            );
+            array_splice($copy_fields, $after_tiers_copy, 0, [
+                Field::make('text', 'income_guidance_heading', 'Income guidance heading')
+                    ->set_default_value('Below are some recommended monthly dues amounts, based on income')
+                    ->set_help_text('Shown above the income guidance table on the membership step.'),
+                Field::make('rich_text', 'income_guidance_note', 'Income guidance note')
+                    ->set_help_text("Optional. Shown below the income guidance table, e.g. \"Can't afford dues? Email us.\""),
+            ]);
+        }
+
         $integration_fields = [
             Field::make('separator', 'zetkin', 'Zetkin'),
             Field::make('text', 'zetkin_organisation_id', 'Zetkin Organisation ID')->set_attribute('type', 'number'),
@@ -564,6 +579,15 @@ public static function createMembershipPlansField($name = 'membership_plans')
         self::describePlanRedirectCheckboxes();
         /** @var Complex_Field $membership_plans */
         $membership_plans = Field::make('complex', $name);
+        $income_band_fields = [];
+        if (self::isIncomeGuidanceEnabled()) {
+            $income_band_fields = [
+                Field::make('text', 'income_weekly', 'Weekly income')
+                    ->set_help_text('Shown in the income guidance table, e.g. "£600 to £800". Leave both incomes blank to leave this plan out of the table.'),
+                Field::make('text', 'income_monthly', 'Monthly income')
+                    ->set_help_text('E.g. "£2,400 to £3,200".'),
+            ];
+        }
         $membership_plans->add_fields([
             Field::make('text', 'label', "Name")->set_required(true),
             Field::make('text', 'id', "Price Point ID")->set_help_text("Membership price point ID (required for Chargebee)"),
@@ -575,6 +599,7 @@ public static function createMembershipPlansField($name = 'membership_plans')
             $payment_currency_select,
             Field::make('text', 'description'),
             Field::make('text', 'add_tags')->set_help_text("Comma-separated tags to add to this member in Action Network, Mailchimp and Zetkin."),
+            ...$income_band_fields,
             $redirect_checkbox,
             $redirect_page,
         ])->set_min(1)
diff --git a/packages/join-e2e/tests/income-guidance-admin.spec.ts b/packages/join-e2e/tests/income-guidance-admin.spec.ts
new file mode 100644
index 0000000..a26d35b
--- /dev/null
+++ b/packages/join-e2e/tests/income-guidance-admin.spec.ts
@@ -0,0 +1,93 @@
+import { test, expect, Page } from '@playwright/test';
+import { field, loginAsAdmin, openNewPageWithJoinBlock, SETTINGS_PAGE, wpCli } from './helpers';
+
+/**
+ * Income guidance settings in wp-admin
+ *
+ * Income guidance is off unless an add-on switches it on. The e2e site
+ * switches it on (see mu-plugins/), and these tests turn it off to check
+ * that nothing is added for sites that have not opted in.
+ */
+
+const DEFAULT_HEADING = 'Below are some recommended monthly dues amounts, based on income';
+
+function setIncomeGuidance(on: boolean): void {
+  wpCli(`wp option update ck_e2e_income_guidance_enabled '${on ? '1' : ''}'`);
+}
+
+async function openSettingsTab(page: Page, tab: string): Promise<void> {
+  await page.goto(SETTINGS_PAGE);
+  await page.getByRole('tab', { name: tab }).click();
+}
+
+/** The first global plan, adding one if the site has none yet. */
+async function firstGlobalPlan(page: Page) {
+  const plansField = page.locator('.cf-field.cf-complex', {
+    has: page.locator('.cf-field__label', { hasText: /^Membership Plans$/ }),
+  });
+  await expect(plansField.locator('.cf-complex__inserter-button')).toBeVisible();
+  const plans = plansField.locator('.cf-complex__group');
+  if ((await plans.count()) === 0) {
+    await plansField.locator('.cf-complex__inserter-button').click();
+  }
+  return plans.first();
+}
+
+test.describe('With income guidance switched on', () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test('each global plan can be given a weekly and a monthly income band', async ({ page }) => {
+    await openSettingsTab(page, 'Membership Plans');
+    const plan = await firstGlobalPlan(page);
+
+    await expect(field(plan, 'Weekly income').locator('input')).toBeVisible();
+    await expect(field(plan, 'Monthly income').locator('input')).toBeVisible();
+  });
+
+  test('the Copy tab has an editable heading, with a default, and an optional note', async ({ page }) => {
+    await openSettingsTab(page, 'Copy');
+    const container = page.locator('.cf-container');
+
+    await expect(field(container, 'Income guidance heading').locator('input')).toHaveValue(DEFAULT_HEADING);
+    await expect(field(container, 'Income guidance note')).toBeVisible();
+  });
+
+  test('a block\'s own plans can be given income bands too', async ({ page }) => {
+    await openNewPageWithJoinBlock(page, 'E2E Income Guidance Fields');
+    const plansField = field(page.locator('[data-type="carbon-fields/ck-join-form"]'), 'Custom Membership Plans');
+    await plansField.locator('.cf-complex__inserter-button').click();
+    const plan = plansField.locator('.cf-complex__group').first();
+
+    await expect(field(plan, 'Weekly income').locator('input')).toBeVisible();
+    await expect(field(plan, 'Monthly income').locator('input')).toBeVisible();
+  });
+});
+
+test.describe('With income guidance switched off', () => {
+  test.beforeAll(() => setIncomeGuidance(false));
+  test.afterAll(() => setIncomeGuidance(true));
+
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page);
+  });
+
+  test('plans have no income band fields', async ({ page }) => {
+    await openSettingsTab(page, 'Membership Plans');
+    const plan = await firstGlobalPlan(page);
+
+    await expect(field(plan, 'Name').locator('input')).toBeVisible();
+    await expect(field(plan, 'Weekly income')).toHaveCount(0);
+    await expect(field(plan, 'Monthly income')).toHaveCount(0);
+  });
+
+  test('the Copy tab has no income guidance settings', async ({ page }) => {
+    await openSettingsTab(page, 'Copy');
+    const container = page.locator('.cf-container');
+
+    await expect(field(container, 'Organisation Name').locator('input')).toBeVisible();
+    await expect(field(container, 'Income guidance heading')).toHaveCount(0);
+    await expect(field(container, 'Income guidance note')).toHaveCount(0);
+  });
+});

From f62927569c6bf6fae4dd29dfa068f8f8c086e52a Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 16:57:34 +0100
Subject: [PATCH 05/14] Pass income bands and guidance copy to the join form
 when income guidance is on

---
 packages/join-block/src/Blocks.php            |  4 +-
 packages/join-block/src/Settings.php          | 26 +++++++
 .../tests/SettingsIncomeGuidanceTest.php      | 69 +++++++++++++++++++
 3 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/packages/join-block/src/Blocks.php b/packages/join-block/src/Blocks.php
index c8e4e7d..6d47021 100644
--- a/packages/join-block/src/Blocks.php
+++ b/packages/join-block/src/Blocks.php
@@ -404,7 +404,7 @@ private static function echoEnvironment($fields, $block_mode)
                 "frequency" => $plan["frequency"],
                 "description" => $plan["description"],
                 "redirectUrl" => $is_supporter_mode ? null : Settings::getMembershipPlanRedirectUrl($plan)
-            ];
+            ] + Settings::getMembershipPlanIncomeBands($plan);
         }
 
         $webhook_url = $fields['custom_webhook_url'] ?? '';
@@ -538,7 +538,7 @@ function ($o) {
             "USE_STRIPE" => Settings::get("USE_STRIPE"),
             "USE_VARIABLE_MEMBERSHIP_PLAN" => $fields['use_variable_membership_plan'] ?? false,
             "WEBHOOK_UUID" => $webhook_uuid ? $webhook_uuid : '',
-        ];
+        ] + Settings::getIncomeGuidanceEnv();
         ?>
         <script type="application/json" id="env">
             <?php echo wp_json_encode($environment); ?>
diff --git a/packages/join-block/src/Settings.php b/packages/join-block/src/Settings.php
index 277f9cd..db4bf3e 100644
--- a/packages/join-block/src/Settings.php
+++ b/packages/join-block/src/Settings.php
@@ -710,6 +710,32 @@ public static function isIncomeGuidanceEnabled()
         return (bool) apply_filters('ck_join_flow_income_guidance_enabled', false);
     }
 
+    // A plan's income bands, for the form's income guidance table.
+    public static function getMembershipPlanIncomeBands($membership_plan)
+    {
+        if (!self::isIncomeGuidanceEnabled()) {
+            return [];
+        }
+
+        return [
+            'incomeWeekly' => trim((string) ($membership_plan['income_weekly'] ?? '')),
+            'incomeMonthly' => trim((string) ($membership_plan['income_monthly'] ?? '')),
+        ];
+    }
+
+    public static function getIncomeGuidanceEnv()
+    {
+        if (!self::isIncomeGuidanceEnabled()) {
+            return ['INCOME_GUIDANCE_ENABLED' => false];
+        }
+
+        return [
+            'INCOME_GUIDANCE_ENABLED' => true,
+            'INCOME_GUIDANCE_HEADING' => (string) self::get('INCOME_GUIDANCE_HEADING'),
+            'INCOME_GUIDANCE_NOTE' => wpautop((string) self::get('INCOME_GUIDANCE_NOTE')),
+        ];
+    }
+
     // Names the CRMs this site uses, so admins can see where redirected people
     // will not appear.
     public static function getMembershipPlanRedirectHelpText()
diff --git a/packages/join-block/tests/SettingsIncomeGuidanceTest.php b/packages/join-block/tests/SettingsIncomeGuidanceTest.php
index 1c03b64..4414e88 100644
--- a/packages/join-block/tests/SettingsIncomeGuidanceTest.php
+++ b/packages/join-block/tests/SettingsIncomeGuidanceTest.php
@@ -49,4 +49,73 @@ public function test_a_truthy_filter_result_counts_as_on()
 
         $this->assertTrue(Settings::isIncomeGuidanceEnabled());
     }
+
+    private function switchOn(): void
+    {
+        Monkey\Filters\expectApplied('ck_join_flow_income_guidance_enabled')->andReturn(true);
+    }
+
+    private function withSettings(array $settings): void
+    {
+        Monkey\Functions\when('carbon_get_theme_option')->alias(fn($key) => $settings[$key] ?? null);
+        Monkey\Functions\when('wpautop')->alias(fn($text) => $text === '' ? '' : "<p>$text</p>");
+    }
+
+    public function test_plans_carry_no_income_bands_when_off()
+    {
+        $plan = ['label' => 'Higher', 'income_weekly' => '£600 to £800', 'income_monthly' => '£2,400 to £3,200'];
+
+        $this->assertSame([], Settings::getMembershipPlanIncomeBands($plan));
+    }
+
+    public function test_plans_carry_their_income_bands_when_on()
+    {
+        $this->switchOn();
+        $plan = ['label' => 'Higher', 'income_weekly' => ' £600 to £800 ', 'income_monthly' => '£2,400 to £3,200'];
+
+        $this->assertSame(
+            ['incomeWeekly' => '£600 to £800', 'incomeMonthly' => '£2,400 to £3,200'],
+            Settings::getMembershipPlanIncomeBands($plan)
+        );
+    }
+
+    public function test_a_plan_without_bands_carries_empty_ones_when_on()
+    {
+        $this->switchOn();
+
+        $this->assertSame(
+            ['incomeWeekly' => '', 'incomeMonthly' => ''],
+            Settings::getMembershipPlanIncomeBands(['label' => 'Other'])
+        );
+    }
+
+    public function test_the_form_is_only_told_it_is_off_when_off()
+    {
+        $this->withSettings(['income_guidance_heading' => 'Heading', 'income_guidance_note' => 'Note']);
+
+        $this->assertSame(['INCOME_GUIDANCE_ENABLED' => false], Settings::getIncomeGuidanceEnv());
+    }
+
+    public function test_the_form_gets_the_heading_and_note_when_on()
+    {
+        $this->switchOn();
+        $this->withSettings([
+            'income_guidance_heading' => 'Suggested dues by income',
+            'income_guidance_note' => "Can't afford dues? Email us.",
+        ]);
+
+        $this->assertSame([
+            'INCOME_GUIDANCE_ENABLED' => true,
+            'INCOME_GUIDANCE_HEADING' => 'Suggested dues by income',
+            'INCOME_GUIDANCE_NOTE' => "<p>Can't afford dues? Email us.</p>",
+        ], Settings::getIncomeGuidanceEnv());
+    }
+
+    public function test_an_unset_note_is_sent_empty()
+    {
+        $this->switchOn();
+        $this->withSettings(['income_guidance_heading' => 'Suggested dues by income']);
+
+        $this->assertSame('', Settings::getIncomeGuidanceEnv()['INCOME_GUIDANCE_NOTE']);
+    }
 }

From 66040e8aea46b44b520f8c2f832f61c59169d18e Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 17:00:50 +0100
Subject: [PATCH 06/14] Show an income guidance table on the plan step when it
 is switched on

---
 .../scss/components/income-guidance.scss      |  97 +++++++++++
 packages/join-flow/scss/index.scss            |   1 +
 .../src/components/income-guidance.tsx        | 112 +++++++++++++
 packages/join-flow/src/env.ts                 |   6 +
 .../pages/plan.page.income-guidance.test.tsx  | 152 ++++++++++++++++++
 packages/join-flow/src/pages/plan.page.tsx    |  15 ++
 6 files changed, 383 insertions(+)
 create mode 100644 packages/join-flow/scss/components/income-guidance.scss
 create mode 100644 packages/join-flow/src/components/income-guidance.tsx
 create mode 100644 packages/join-flow/src/pages/plan.page.income-guidance.test.tsx

diff --git a/packages/join-flow/scss/components/income-guidance.scss b/packages/join-flow/scss/components/income-guidance.scss
new file mode 100644
index 0000000..00181a6
--- /dev/null
+++ b/packages/join-flow/scss/components/income-guidance.scss
@@ -0,0 +1,97 @@
+.income-guidance-heading {
+  @include text-body-bold;
+}
+
+.income-guidance-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 $space-2;
+
+  th {
+    font-weight: normal;
+    font-size: 17px;
+    padding: 0 $btn-padding-x;
+    text-align: left;
+  }
+
+  td {
+    background-color: $white;
+    padding: $btn-padding-x;
+    border: $input-border-width solid transparent;
+    border-width: $input-border-width 0;
+  }
+
+  td:first-child {
+    border-left-width: $input-border-width;
+    border-radius: 0.5rem 0 0 0.5rem;
+  }
+
+  td:last-child {
+    border-right-width: $input-border-width;
+    border-radius: 0 0.5rem 0.5rem 0;
+    text-align: right;
+  }
+
+  tbody tr {
+    cursor: pointer;
+
+    &:hover td {
+      box-shadow: 0px 0px 8px $primary;
+    }
+
+    &.selected td {
+      border-color: $primary;
+    }
+  }
+
+  // One card per band on narrow screens, each value labelled.
+  @include media-breakpoint-down(xs) {
+    thead {
+      display: none;
+    }
+
+    tr,
+    td {
+      display: block;
+    }
+
+    tbody tr {
+      background-color: $white;
+      border-radius: 0.5rem;
+      border: $input-border-width solid transparent;
+      margin-bottom: $space-2;
+      padding: $btn-padding-x;
+
+      &.selected {
+        border-color: $primary;
+      }
+    }
+
+    td,
+    td:first-child,
+    td:last-child {
+      border: 0;
+      border-radius: 0;
+      padding: 0;
+      text-align: left;
+      background-color: transparent;
+    }
+
+    td::before {
+      content: attr(data-label) ": ";
+    }
+  }
+}
+
+.income-guidance-choose {
+  @include text-body-bold;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  text-decoration: underline;
+}
+
+.income-guidance-note {
+  font-size: 17px;
+}
diff --git a/packages/join-flow/scss/index.scss b/packages/join-flow/scss/index.scss
index 094de49..c9b9ebe 100644
--- a/packages/join-flow/scss/index.scss
+++ b/packages/join-flow/scss/index.scss
@@ -14,6 +14,7 @@ body {
     @import "components/buttons.scss";
     @import "components/details.scss";
     @import "components/forms.scss";
+    @import "components/income-guidance.scss";
     @import "components/header.scss";
     @import "components/join-form-link.scss";
     @import "components/progress.scss";
diff --git a/packages/join-flow/src/components/income-guidance.tsx b/packages/join-flow/src/components/income-guidance.tsx
new file mode 100644
index 0000000..4007e4a
--- /dev/null
+++ b/packages/join-flow/src/components/income-guidance.tsx
@@ -0,0 +1,112 @@
+import React, { FC } from "react";
+import { currencyCodeToSymbol } from "../schema";
+import { get as getEnv, getStr as getEnvStr } from "../env";
+
+export interface IncomeGuidancePlan {
+  value: string;
+  amount: string | number;
+  currency: string;
+  frequency: string;
+  allowCustomAmount?: boolean;
+  incomeWeekly?: string;
+  incomeMonthly?: string;
+}
+
+interface IncomeGuidanceProps {
+  groupedPlans: Record<string, IncomeGuidancePlan[]>;
+  selected?: string;
+  onSelect: (plan: IncomeGuidancePlan) => void;
+}
+
+const HEADING_ID = "income-guidance-heading";
+
+const feeLabel = (plan: IncomeGuidancePlan) =>
+  `${currencyCodeToSymbol(plan.currency)}${plan.amount} ${plan.frequency}`;
+
+/**
+ * Income bands against the plans they suggest, so people can see which tier
+ * fits their income. Choosing a row selects that plan.
+ */
+export const IncomeGuidance: FC<IncomeGuidanceProps> = ({
+  groupedPlans,
+  selected,
+  onSelect
+}) => {
+  if (!getEnv("INCOME_GUIDANCE_ENABLED")) {
+    return null;
+  }
+
+  // One row per tier. A tier offered in several currencies shows whichever
+  // currency is currently chosen.
+  const rows = Object.values(groupedPlans)
+    .map((group) => group.find((plan) => plan.value === selected) || group[0])
+    .filter((plan) => plan.incomeWeekly || plan.incomeMonthly);
+
+  if (!rows.length) {
+    return null;
+  }
+
+  const showWeekly = rows.some((plan) => plan.incomeWeekly);
+  const showMonthly = rows.some((plan) => plan.incomeMonthly);
+  const heading = getEnvStr("INCOME_GUIDANCE_HEADING");
+  const note = getEnvStr("INCOME_GUIDANCE_NOTE");
+
+  return (
+    <section className="income-guidance form-section">
+      {heading && (
+        <p id={HEADING_ID} className="income-guidance-heading">
+          {heading}
+        </p>
+      )}
+      <table
+        className="income-guidance-table"
+        {...(heading
+          ? { "aria-labelledby": HEADING_ID }
+          : { "aria-label": "Suggested dues by income" })}
+      >
+        <thead>
+          <tr>
+            {showWeekly && <th scope="col">Weekly income</th>}
+            {showMonthly && <th scope="col">Monthly income</th>}
+            <th scope="col">Suggested dues</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((plan) => {
+            const chosen = plan.value === selected;
+            return (
+              <tr
+                key={plan.value}
+                className={chosen ? "selected" : undefined}
+                onClick={() => onSelect(plan)}
+              >
+                {showWeekly && <td data-label="Weekly income">{plan.incomeWeekly}</td>}
+                {showMonthly && <td data-label="Monthly income">{plan.incomeMonthly}</td>}
+                <td data-label="Suggested dues">
+                  <button
+                    type="button"
+                    className="income-guidance-choose"
+                    aria-pressed={chosen}
+                    aria-label={`Choose ${feeLabel(plan)}`}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onSelect(plan);
+                    }}
+                  >
+                    {feeLabel(plan)}
+                  </button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {note && (
+        <div
+          className="income-guidance-note"
+          dangerouslySetInnerHTML={{ __html: note }}
+        ></div>
+      )}
+    </section>
+  );
+};
diff --git a/packages/join-flow/src/env.ts b/packages/join-flow/src/env.ts
index 8dae5ce..fe693f3 100644
--- a/packages/join-flow/src/env.ts
+++ b/packages/join-flow/src/env.ts
@@ -28,6 +28,9 @@ interface StaticEnv {
     HIDE_ADDRESS: boolean;
     HIDE_HOME_ADDRESS_COPY: boolean;
     HIDE_ZERO_PRICE_DISPLAY: boolean;
+    INCOME_GUIDANCE_ENABLED: boolean;
+    INCOME_GUIDANCE_HEADING: string;
+    INCOME_GUIDANCE_NOTE: string;
     HOME_ADDRESS_COPY: string;
     JOIN_FORM_SIDEBAR_HEADING: string;
     JOINING_VERB: string;
@@ -105,6 +108,9 @@ const staticEnv: StaticEnv = {
     HIDE_ADDRESS: parseBooleanEnvVar("REACT_APP_HIDE_ADDRESS"),
     HIDE_HOME_ADDRESS_COPY: parseBooleanEnvVar("REACT_APP_HIDE_HOME_ADDRESS_COPY"),
     HIDE_ZERO_PRICE_DISPLAY: parseBooleanEnvVar("REACT_APP_HIDE_ZERO_PRICE_DISPLAY"),
+    INCOME_GUIDANCE_ENABLED: parseBooleanEnvVar("REACT_APP_INCOME_GUIDANCE_ENABLED"),
+    INCOME_GUIDANCE_HEADING: process.env.REACT_APP_INCOME_GUIDANCE_HEADING || '',
+    INCOME_GUIDANCE_NOTE: process.env.REACT_APP_INCOME_GUIDANCE_NOTE || '',
     HOME_ADDRESS_COPY: process.env.REACT_APP_HOME_ADDRESS_COPY || '',
     JOIN_FORM_SIDEBAR_HEADING: process.env.REACT_APP_JOIN_FORM_SIDEBAR_HEADING || 'Join Us',
     JOINING_VERB: process.env.REACT_APP_JOINING_VERB || 'Joining',
diff --git a/packages/join-flow/src/pages/plan.page.income-guidance.test.tsx b/packages/join-flow/src/pages/plan.page.income-guidance.test.tsx
new file mode 100644
index 0000000..aea4597
--- /dev/null
+++ b/packages/join-flow/src/pages/plan.page.income-guidance.test.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PlanPage } from './plan.page';
+
+jest.mock('../env', () => ({
+  get: jest.fn(),
+  getStr: jest.fn(),
+}));
+
+jest.mock('../components/summary', () => ({
+  Summary: () => null,
+}));
+
+import { get as getEnv, getStr as getEnvStr } from '../env';
+const mockGetEnv = getEnv as jest.Mock;
+const mockGetEnvStr = getEnvStr as jest.Mock;
+
+const plan = (value: string, label: string, amount: string, bands: Record<string, string> = {}) => ({
+  value, label, description: '', amount, currency: 'GBP', frequency: 'monthly', allowCustomAmount: false,
+  incomeWeekly: '', incomeMonthly: '', ...bands,
+});
+
+const BANDED_PLANS = [
+  plan('higher', 'Higher', '25', { incomeWeekly: 'More than £800', incomeMonthly: 'More than £3,200' }),
+  plan('middle', 'Middle', '12', { incomeWeekly: '£400 to £800', incomeMonthly: '£1,600 to £3,200' }),
+  plan('lower', 'Lower', '5', { incomeWeekly: 'Less than £400', incomeMonthly: 'Less than £1,600' }),
+  plan('other', 'Other', '1'),
+];
+
+function withEnv(env: Record<string, unknown>) {
+  const values: Record<string, unknown> = {
+    MEMBERSHIP_PLANS: BANDED_PLANS,
+    INCOME_GUIDANCE_ENABLED: true,
+    INCOME_GUIDANCE_HEADING: 'Suggested dues by income',
+    INCOME_GUIDANCE_NOTE: '',
+    ...env,
+  };
+  mockGetEnv.mockImplementation((key: string) => values[key] ?? false);
+  mockGetEnvStr.mockImplementation((key: string) => (values[key] as string) ?? '');
+}
+
+const onCompleted = jest.fn();
+
+function renderPlanPage(membership = 'higher') {
+  return render(<PlanPage data={{ membership } as any} setData={jest.fn()} onCompleted={onCompleted} />);
+}
+
+const guidanceTable = () => screen.queryByRole('table', { name: 'Suggested dues by income' });
+
+beforeEach(() => {
+  onCompleted.mockClear();
+  withEnv({});
+});
+
+describe('Income guidance table — when it shows', () => {
+  test('is not shown when income guidance is off, even if plans have bands', () => {
+    withEnv({ INCOME_GUIDANCE_ENABLED: false });
+    renderPlanPage();
+
+    expect(guidanceTable()).not.toBeInTheDocument();
+  });
+
+  test('is not shown when no plan has an income band', () => {
+    withEnv({ MEMBERSHIP_PLANS: [plan('higher', 'Higher', '25'), plan('lower', 'Lower', '5')] });
+    renderPlanPage();
+
+    expect(guidanceTable()).not.toBeInTheDocument();
+  });
+
+  test('shows the heading and one row per plan with a band', () => {
+    renderPlanPage();
+
+    const table = guidanceTable()!;
+    expect(table).toBeInTheDocument();
+    expect(screen.getByText('Suggested dues by income')).toBeInTheDocument();
+
+    const rows = within(table).getAllByRole('row').slice(1);
+    expect(rows.map((row) => within(row).getAllByRole('cell').map((cell) => cell.textContent))).toEqual([
+      ['More than £800', 'More than £3,200', '£25 monthly'],
+      ['£400 to £800', '£1,600 to £3,200', '£12 monthly'],
+      ['Less than £400', 'Less than £1,600', '£5 monthly'],
+    ]);
+  });
+
+  test('labels the columns', () => {
+    renderPlanPage();
+
+    const headers = within(guidanceTable()!).getAllByRole('columnheader').map((th) => th.textContent);
+    expect(headers).toEqual(['Weekly income', 'Monthly income', 'Suggested dues']);
+  });
+
+  test('leaves out a column that no plan fills in', () => {
+    withEnv({
+      MEMBERSHIP_PLANS: [
+        plan('higher', 'Higher', '25', { incomeWeekly: 'More than £800' }),
+        plan('lower', 'Lower', '5', { incomeWeekly: 'Less than £800' }),
+      ],
+    });
+    renderPlanPage();
+
+    const headers = within(guidanceTable()!).getAllByRole('columnheader').map((th) => th.textContent);
+    expect(headers).toEqual(['Weekly income', 'Suggested dues']);
+  });
+
+  test('shows the note below the table when one is set', () => {
+    withEnv({ INCOME_GUIDANCE_NOTE: "<p>Can't afford dues? <a href=\"mailto:dues@example.org\">Email us</a>.</p>" });
+    renderPlanPage();
+
+    expect(screen.getByRole('link', { name: 'Email us' })).toHaveAttribute('href', 'mailto:dues@example.org');
+  });
+});
+
+describe('Income guidance table — choosing a plan', () => {
+  const rowButton = (fee: string) => within(guidanceTable()!).getByRole('button', { name: new RegExp(fee) });
+
+  test('the row for the selected plan is marked as chosen', () => {
+    renderPlanPage('middle');
+
+    expect(rowButton('£12 monthly')).toHaveAttribute('aria-pressed', 'true');
+    expect(rowButton('£25 monthly')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  test('choosing a row selects that plan', async () => {
+    renderPlanPage('higher');
+
+    fireEvent.click(rowButton('£5 monthly'));
+
+    await waitFor(() => expect(document.getElementById('membership-Lower')).toBeChecked());
+    expect(rowButton('£5 monthly')).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'Continue and pay £5 monthly' })).toBeInTheDocument();
+  });
+
+  test('the chosen plan is the one submitted', async () => {
+    renderPlanPage('higher');
+
+    fireEvent.click(rowButton('£12 monthly'));
+    fireEvent.submit(screen.getByRole('button', { name: /continue/i }).closest('form')!);
+
+    await waitFor(() => expect(onCompleted).toHaveBeenCalled());
+    expect(onCompleted.mock.calls[0][0].membership).toBe('middle');
+  });
+
+  test('choosing a tier directly moves the mark to its row', async () => {
+    renderPlanPage('higher');
+
+    fireEvent.click(document.getElementById('membership-Middle')!);
+
+    await waitFor(() => expect(rowButton('£12 monthly')).toHaveAttribute('aria-pressed', 'true'));
+    expect(rowButton('£25 monthly')).toHaveAttribute('aria-pressed', 'false');
+  });
+});
diff --git a/packages/join-flow/src/pages/plan.page.tsx b/packages/join-flow/src/pages/plan.page.tsx
index b68ee45..19e1152 100644
--- a/packages/join-flow/src/pages/plan.page.tsx
+++ b/packages/join-flow/src/pages/plan.page.tsx
@@ -8,6 +8,7 @@ import {
 } from "../components/atoms";
 import { StagerComponent } from "../components/stager";
 import { Summary } from "../components/summary";
+import { IncomeGuidance, IncomeGuidancePlan } from "../components/income-guidance";
 import { FormSchema, currencyCodeToSymbol, getPaymentPlan } from "../schema";
 import { get as getEnv, getStr as getEnvStr } from "../env";
 
@@ -45,12 +46,26 @@ export const PlanPage: StagerComponent<FormSchema> = ({
     form.watch("customMembershipAmount")
   );
 
+  // Matches choosing the tier itself, including resetting a custom amount.
+  const selectPlan = (plan: IncomeGuidancePlan) => {
+    form.setValue("membership", plan.value);
+    setTimeout(() => {
+      form.setValue("customMembershipAmount", plan.allowCustomAmount ? plan.amount : "");
+    });
+  };
+
   return (
     <form className="form-content" onSubmit={form.handleSubmit(onCompleted)}>
       <div>
         <Summary data={data} />
       </div>
 
+      <IncomeGuidance
+        groupedPlans={groupedPlans}
+        selected={form.watch("membership")}
+        onSelect={selectPlan}
+      />
+
       <fieldset className="radio-grid form-section" role="radiogroup">
         <legend>
           <h2>{membershipTiersHeading}</h2>

From 3f5d18b78ac746b123a7670f8554580149c54f0a Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 17:01:51 +0100
Subject: [PATCH 07/14] Share choosing a page in a Carbon Fields picker across
 e2e specs

---
 packages/join-e2e/tests/admin-plan-redirect.spec.ts | 10 ++--------
 packages/join-e2e/tests/helpers.ts                  | 12 ++++++++++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/join-e2e/tests/admin-plan-redirect.spec.ts b/packages/join-e2e/tests/admin-plan-redirect.spec.ts
index 96ba3bf..e3388ab 100644
--- a/packages/join-e2e/tests/admin-plan-redirect.spec.ts
+++ b/packages/join-e2e/tests/admin-plan-redirect.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect, Locator } from '@playwright/test';
 import {
+  choosePage,
   choosePlan,
   field,
   fillPlan,
@@ -35,14 +36,7 @@ function redirectPicker(plan: Locator): Locator {
 }
 
 async function chooseRedirectTarget(picker: Locator): Promise<void> {
-  await picker.locator('.cf-search-input__inner').fill(REDIRECT_TARGET_TITLE);
-  // The search runs over AJAX; clicking before it lands hits the old list.
-  await expect(picker.locator('.cf-association__counter')).toHaveText(/Showing 1 of 1 results/);
-  await picker
-    .locator('.cf-association__option', { hasText: REDIRECT_TARGET_TITLE })
-    // The block editor renders this button without an accessible name.
-    .locator('button.dashicons-plus-alt')
-    .click();
+  await choosePage(picker, REDIRECT_TARGET_TITLE);
 }
 
 /** Selected pages are shown in the association field's second column. */
diff --git a/packages/join-e2e/tests/helpers.ts b/packages/join-e2e/tests/helpers.ts
index 08c3ccc..fd19787 100644
--- a/packages/join-e2e/tests/helpers.ts
+++ b/packages/join-e2e/tests/helpers.ts
@@ -172,3 +172,15 @@ export async function choosePlan(page: Page, label: string): Promise<void> {
   await page.locator('label.radio-panel', { has: page.locator(`[id="membership-${label}"]`) }).click();
   await page.locator(CONTINUE).click();
 }
+
+/** Chooses a page, by its exact title, in a Carbon Fields page picker. */
+export async function choosePage(picker: Locator, title: string): Promise<void> {
+  await picker.locator('.cf-search-input__inner').fill(title);
+  // The search runs over AJAX; clicking before it lands hits the old list.
+  await expect(picker.locator('.cf-association__counter')).toHaveText(/Showing 1 of 1 results/);
+  await picker
+    .locator('.cf-association__option', { hasText: title })
+    // The block editor renders this button without an accessible name.
+    .locator('button.dashicons-plus-alt')
+    .click();
+}

From f73ad739507ff827c17443805f6c4d96ce1e0e3a Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 17:09:30 +0100
Subject: [PATCH 08/14] Slash seeded e2e page content so escaped characters
 survive saving

---
 packages/join-e2e/scripts/setup.php | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/join-e2e/scripts/setup.php b/packages/join-e2e/scripts/setup.php
index 6413faa..baf1a90 100644
--- a/packages/join-e2e/scripts/setup.php
+++ b/packages/join-e2e/scripts/setup.php
@@ -42,6 +42,9 @@ function ck_e2e_make_block_content(array $plans, array $overrides = []): string
 
 /**
  * Create or update a page by post_name slug.
+ *
+ * WordPress unslashes post content on save, which would turn the \u escapes
+ * in the block's JSON (e.g. \u00a3 for £) into plain text, so slash it first.
  * Returns the page ID on success; exits with status 1 on failure.
  */
 function ck_e2e_upsert_page(string $slug, string $title, string $content): int
@@ -55,7 +58,7 @@ function ck_e2e_upsert_page(string $slug, string $title, string $content): int
 
     if ($existing) {
         $page_id = $existing[0]->ID;
-        wp_update_post(['ID' => $page_id, 'post_content' => $content]);
+        wp_update_post(['ID' => $page_id, 'post_content' => wp_slash($content)]);
         echo "Updated page '{$slug}' (ID: {$page_id}).\n";
         return $page_id;
     }
@@ -65,7 +68,7 @@ function ck_e2e_upsert_page(string $slug, string $title, string $content): int
         'post_title'   => $title,
         'post_status'  => 'publish',
         'post_type'    => 'page',
-        'post_content' => $content,
+        'post_content' => wp_slash($content),
     ], true);
 
     if (is_wp_error($page_id)) {

From 4cfa95c2e1065bd48dc8c24b375330f2b3f227ec Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 17:09:30 +0100
Subject: [PATCH 09/14] Cover the income guidance table end to end

---
 packages/join-e2e/scripts/setup.php           |  23 +++
 .../join-e2e/tests/income-guidance.spec.ts    | 155 ++++++++++++++++++
 2 files changed, 178 insertions(+)
 create mode 100644 packages/join-e2e/tests/income-guidance.spec.ts

diff --git a/packages/join-e2e/scripts/setup.php b/packages/join-e2e/scripts/setup.php
index baf1a90..c579e0d 100644
--- a/packages/join-e2e/scripts/setup.php
+++ b/packages/join-e2e/scripts/setup.php
@@ -342,6 +342,29 @@ function ck_e2e_upsert_page(string $slug, string $title, string $content): int
     ck_e2e_make_block_content([])
 );
 
+// Income guidance: three banded tiers, and a custom-amount tier with no band
+// that stays out of the table.
+$income_guidance_page_id = ck_e2e_upsert_page(
+    'e2e-income-guidance-join',
+    'E2E Income Guidance Test',
+    ck_e2e_make_block_content([
+        $ck_e2e_plan('Higher', 'higher', '25', [
+            'income_weekly'  => 'More than £800',
+            'income_monthly' => 'More than £3,200',
+        ]),
+        $ck_e2e_plan('Middle', 'middle', '12', [
+            'income_weekly'  => '£400 to £800',
+            'income_monthly' => '£1,600 to £3,200',
+        ]),
+        $ck_e2e_plan('Lower', 'lower', '5', [
+            'income_weekly'  => 'Less than £400',
+            'income_monthly' => 'Less than £1,600',
+        ]),
+        $ck_e2e_plan('Other', 'other', '1', ['allow_custom_amount' => '1']),
+    ])
+);
+carbon_set_theme_option('income_guidance_note', "Can't afford dues? Email dues@example.org.");
+
 // Enable STRIPE_DIRECT_DEBIT_ONLY globally so that allow_cards_override has
 // something to override. Without this the global default is false and the
 // override would produce no observable difference.
diff --git a/packages/join-e2e/tests/income-guidance.spec.ts b/packages/join-e2e/tests/income-guidance.spec.ts
new file mode 100644
index 0000000..3a7e53e
--- /dev/null
+++ b/packages/join-e2e/tests/income-guidance.spec.ts
@@ -0,0 +1,155 @@
+import { test, expect, Page } from '@playwright/test';
+import {
+  choosePage,
+  field,
+  fillPlan,
+  loginAsAdmin,
+  mockRestEndpoints,
+  openNewPageWithJoinBlock,
+  wpCli,
+  CONTINUE,
+  SAVED_STATE_KEY,
+} from './helpers';
+
+/**
+ * Income guidance on the join form
+ *
+ * The income guidance page (seeded by setup.php) has three tiers with income
+ * bands and a custom-amount "Other" tier with none. The e2e site switches
+ * income guidance on (see mu-plugins/).
+ */
+
+const INCOME_GUIDANCE_PAGE = '/e2e-income-guidance-join/';
+const DEFAULT_HEADING = 'Below are some recommended monthly dues amounts, based on income';
+const NOTE = "Can't afford dues? Email dues@example.org.";
+
+const table = (page: Page) => page.getByRole('table', { name: DEFAULT_HEADING });
+const rowButton = (page: Page, fee: string) => table(page).getByRole('button', { name: `Choose ${fee}` });
+
+async function goToPlanStep(page: Page, url = INCOME_GUIDANCE_PAGE): Promise<void> {
+  await mockRestEndpoints(page);
+  await page.goto(url);
+  await page.waitForSelector('input#firstName');
+  await page.locator(CONTINUE).click();
+  await page.waitForSelector('[role="radiogroup"]');
+}
+
+test.describe('The income guidance table', () => {
+  test.beforeEach(async ({ page }) => {
+    await goToPlanStep(page);
+  });
+
+  test('shows each banded tier against its weekly and monthly income, with the heading and note', async ({ page }) => {
+    await expect(page.getByText(DEFAULT_HEADING)).toBeVisible();
+
+    const rows = table(page).locator('tbody tr');
+    await expect(rows).toHaveCount(3);
+    await expect(rows.nth(0).locator('td')).toHaveText(['More than £800', 'More than £3,200', '£25 monthly']);
+    await expect(rows.nth(1).locator('td')).toHaveText(['£400 to £800', '£1,600 to £3,200', '£12 monthly']);
+    await expect(rows.nth(2).locator('td')).toHaveText(['Less than £400', 'Less than £1,600', '£5 monthly']);
+
+    await expect(page.getByText(NOTE)).toBeVisible();
+  });
+
+  test('choosing a row selects its tier, and that tier is the one taken to payment', async ({ page }) => {
+    await rowButton(page, '£12 monthly').click();
+
+    await expect(page.locator('[id="membership-Middle"]')).toBeChecked();
+    await expect(rowButton(page, '£12 monthly')).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.locator('button[type="submit"]')).toHaveText('Continue and pay £12 monthly');
+
+    await page.locator(CONTINUE).click();
+    await expect(page.locator('.progress-step--current')).toContainText('Payment');
+    const saved = await page.evaluate((key) => JSON.parse(sessionStorage.getItem(key) || '{}'), SAVED_STATE_KEY);
+    expect(saved.membership).toBe('middle');
+  });
+
+  test('clicking anywhere on a row selects its tier', async ({ page }) => {
+    await table(page).locator('tbody tr', { hasText: 'Less than £400' }).locator('td').first().click();
+
+    await expect(page.locator('[id="membership-Lower"]')).toBeChecked();
+  });
+
+  test('choosing a tier directly marks its row', async ({ page }) => {
+    await page.locator('label.radio-panel', { has: page.locator('[id="membership-Lower"]') }).click();
+
+    await expect(rowButton(page, '£5 monthly')).toHaveAttribute('aria-pressed', 'true');
+    await expect(rowButton(page, '£25 monthly')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  test('a row can be chosen with the keyboard', async ({ page }) => {
+    await rowButton(page, '£25 monthly').focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+
+    await expect(page.locator('[id="membership-Middle"]')).toBeChecked();
+  });
+});
+
+test.describe('On a phone', () => {
+  test.use({ viewport: { width: 375, height: 800 } });
+
+  test('each band is shown as its own card, with the column names', async ({ page }) => {
+    await goToPlanStep(page);
+
+    await expect(table(page).locator('thead')).toBeHidden();
+    const card = table(page).locator('tbody tr').first();
+    await expect(card).toBeVisible();
+    const label = await card.locator('td').first().evaluate((td) => getComputedStyle(td, '::before').content);
+    expect(label).toBe('"Weekly income: "');
+  });
+});
+
+test.describe('With income guidance switched off', () => {
+  test.beforeAll(() => wpCli("wp option update ck_e2e_income_guidance_enabled ''"));
+  test.afterAll(() => wpCli("wp option update ck_e2e_income_guidance_enabled '1'"));
+
+  test('the plan step shows the tiers without the table', async ({ page }) => {
+    await goToPlanStep(page);
+
+    await expect(page.locator('[id="membership-Higher"]')).toBeAttached();
+    await expect(page.getByRole('table')).toHaveCount(0);
+    await expect(page.getByText(DEFAULT_HEADING)).toHaveCount(0);
+  });
+});
+
+test.describe('Bands entered in the block editor', () => {
+  test('appear in the table on the published page', async ({ page }) => {
+    await loginAsAdmin(page);
+    await openNewPageWithJoinBlock(page, 'E2E Income Guidance Editor');
+
+    const block = page.locator('[data-type="carbon-fields/ck-join-form"]');
+    await choosePage(field(block, 'Page to redirect to after joining'), 'E2E Redirect Target');
+
+    const plansField = field(block, 'Custom Membership Plans');
+    const plans = plansField.locator('.cf-complex__group');
+    await plansField.locator('.cf-complex__inserter-button').click();
+    await fillPlan(plans.last(), 'Waged', '10');
+    await field(plans.last(), 'Weekly income').locator('input').fill('More than £300');
+    await plansField.getByRole('button', { name: 'Add Entry' }).click();
+    await fillPlan(plans.last(), 'Unwaged', '2');
+    await field(plans.last(), 'Weekly income').locator('input').fill('Less than £300');
+
+    const pageId = await page.evaluate(async () => {
+      const wp = (window as any).wp;
+      await wp.data.dispatch('core/editor').editPost({ status: 'publish' });
+      await wp.data.dispatch('core/editor').savePost();
+      return wp.data.select('core/editor').getCurrentPostId();
+    });
+    const link = await page.evaluate(() => (window as any).wp.data.select('core/editor').getPermalink());
+
+    try {
+      await goToPlanStep(page, link);
+
+      const rows = table(page).locator('tbody tr');
+      await expect(rows).toHaveCount(2);
+      await expect(rows.nth(0).locator('td')).toHaveText(['More than £300', '£10 monthly']);
+      await expect(rows.nth(1).locator('td')).toHaveText(['Less than £300', '£2 monthly']);
+
+      await rowButton(page, '£2 monthly').click();
+      await expect(page.locator('[id="membership-Unwaged"]')).toBeChecked();
+    } finally {
+      wpCli(`wp post delete ${pageId} --force`);
+    }
+  });
+});

From b2beac1d536b189a79db748cdcd9b283944d5c36 Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Thu, 1 Oct 2026 17:14:26 +0100
Subject: [PATCH 10/14] Bump version to 1.4.44

---
 packages/join-block/join.php     | 2 +-
 packages/join-block/readme.txt   | 4 +++-
 packages/join-flow/src/index.tsx | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/join-block/join.php b/packages/join-block/join.php
index 9b10ca1..e7450df 100644
--- a/packages/join-block/join.php
+++ b/packages/join-block/join.php
@@ -3,7 +3,7 @@
 /**
  * Plugin Name:     Common Knowledge Join Flow
  * Description:     Common Knowledge join flow plugin.
- * Version:         1.4.43
+ * Version:         1.4.44
  * Author:          Common Knowledge <hello@commonknowledge.coop>
  * Text Domain:     common-knowledge-join-flow
  * License: GPLv2 or later
diff --git a/packages/join-block/readme.txt b/packages/join-block/readme.txt
index 6f35a31..7b33de8 100644
--- a/packages/join-block/readme.txt
+++ b/packages/join-block/readme.txt
@@ -4,7 +4,7 @@ Tags: membership, subscription, join
 Contributors: commonknowledgecoop
 Requires at least: 5.4
 Tested up to: 7.0
-Stable tag: 1.4.43
+Stable tag: 1.4.44
 Requires PHP: 8.2
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -107,6 +107,8 @@ Need help? Contact us at [hello@commonknowledge.coop](mailto:hello@commonknowled
 
 == Changelog ==
 
+= 1.4.44 =
+* Add optional income guidance: a table of income bands against membership plans on the membership step, switched on by an add-on
 = 1.4.43 =
 * Let a membership plan send people to a chosen page instead of taking payment
 = 1.4.42 =
diff --git a/packages/join-flow/src/index.tsx b/packages/join-flow/src/index.tsx
index faa8491..7843f86 100644
--- a/packages/join-flow/src/index.tsx
+++ b/packages/join-flow/src/index.tsx
@@ -24,7 +24,7 @@ const init = () => {
   const sentryDsn = getEnvStr("SENTRY_DSN")
   Sentry.init({
     dsn: sentryDsn,
-    release: "1.4.43"
+    release: "1.4.44"
   });
 
   if (getEnv('USE_CHARGEBEE')) {

From ac3eee4724f987b5cf8a1305f14366daef7c195e Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Tue, 13 Oct 2026 16:16:23 +0100
Subject: [PATCH 11/14] Bump version to 1.4.45

---
 packages/join-block/join.php     | 2 +-
 packages/join-block/readme.txt   | 4 +++-
 packages/join-flow/src/index.tsx | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/join-block/join.php b/packages/join-block/join.php
index e7450df..f65da30 100644
--- a/packages/join-block/join.php
+++ b/packages/join-block/join.php
@@ -3,7 +3,7 @@
 /**
  * Plugin Name:     Common Knowledge Join Flow
  * Description:     Common Knowledge join flow plugin.
- * Version:         1.4.44
+ * Version:         1.4.45
  * Author:          Common Knowledge <hello@commonknowledge.coop>
  * Text Domain:     common-knowledge-join-flow
  * License: GPLv2 or later
diff --git a/packages/join-block/readme.txt b/packages/join-block/readme.txt
index c27d42f..6326a84 100644
--- a/packages/join-block/readme.txt
+++ b/packages/join-block/readme.txt
@@ -4,7 +4,7 @@ Tags: membership, subscription, join
 Contributors: commonknowledgecoop
 Requires at least: 5.4
 Tested up to: 7.0
-Stable tag: 1.4.44
+Stable tag: 1.4.45
 Requires PHP: 8.2
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -107,6 +107,8 @@ Need help? Contact us at [hello@commonknowledge.coop](mailto:hello@commonknowled
 
 == Changelog ==
 
+= 1.4.45 =
+* Add optional income guidance: a table of income bands against membership plans on the membership step, switched on by an add-on
 = 1.4.44 =
 * Fix: keep members lapsed when they pay an overdue invoice after Stripe has cancelled their subscription
 = 1.4.43 =
diff --git a/packages/join-flow/src/index.tsx b/packages/join-flow/src/index.tsx
index 7843f86..df21ac2 100644
--- a/packages/join-flow/src/index.tsx
+++ b/packages/join-flow/src/index.tsx
@@ -24,7 +24,7 @@ const init = () => {
   const sentryDsn = getEnvStr("SENTRY_DSN")
   Sentry.init({
     dsn: sentryDsn,
-    release: "1.4.44"
+    release: "1.4.45"
   });
 
   if (getEnv('USE_CHARGEBEE')) {

From e2578d7175d8b28a668f3006ccf95edd7e0c53a9 Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Tue, 13 Oct 2026 16:42:27 +0100
Subject: [PATCH 12/14] Have income guidance on from the first e2e request so
 the seed can save its settings

---
 packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php | 7 +++++--
 packages/join-e2e/scripts/setup.php                     | 5 +++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php b/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php
index 731666e..69d7d6d 100644
--- a/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php
+++ b/packages/join-e2e/mu-plugins/ck-e2e-income-guidance.php
@@ -1,9 +1,12 @@
 <?php
 /**
  * Plugin Name: CK Join Flow E2E: income guidance switch
- * Description: Switches income guidance on when the ck_e2e_income_guidance_enabled option is set, as an add-on would.
+ * Description: Switches income guidance on, as an add-on would, unless the ck_e2e_income_guidance_enabled option is set to off.
  */
 
+// On unless a spec has turned it off. Defaulting to on matters: the seed
+// saves income guidance settings, and those fields only exist if the flag is
+// on when the request starts, before the seed can set any option.
 add_filter('ck_join_flow_income_guidance_enabled', function ($enabled) {
-    return $enabled || (bool) get_option('ck_e2e_income_guidance_enabled');
+    return $enabled || (bool) get_option('ck_e2e_income_guidance_enabled', '1');
 });
diff --git a/packages/join-e2e/scripts/setup.php b/packages/join-e2e/scripts/setup.php
index c579e0d..08753fd 100644
--- a/packages/join-e2e/scripts/setup.php
+++ b/packages/join-e2e/scripts/setup.php
@@ -90,8 +90,9 @@ function ck_e2e_upsert_page(string $slug, string $title, string $content): int
 carbon_set_theme_option('organisation_bank_name', 'E2E ORG');
 carbon_set_theme_option('organisation_email_address', 'e2e@example.org');
 
-// Switch income guidance on, as an add-on would (see mu-plugins/). Specs that
-// need it off turn the option off and back on again.
+// Income guidance is on unless a spec turns it off (see mu-plugins/). It has
+// to be on before this script starts for the guidance settings below to save,
+// so this only puts it back for the next run after an interrupted spec.
 update_option('ck_e2e_income_guidance_enabled', '1');
 
 // Configure pretty permalinks so test URLs are predictable.

From 4c0066dda67265da582fc108730848e76447a182 Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Tue, 13 Oct 2026 16:45:18 +0100
Subject: [PATCH 13/14] Sanitise the income guidance note before it reaches the
 join form

---
 packages/join-block/src/Settings.php          |  2 +-
 .../tests/SettingsIncomeGuidanceTest.php      | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/join-block/src/Settings.php b/packages/join-block/src/Settings.php
index db4bf3e..252611b 100644
--- a/packages/join-block/src/Settings.php
+++ b/packages/join-block/src/Settings.php
@@ -732,7 +732,7 @@ public static function getIncomeGuidanceEnv()
         return [
             'INCOME_GUIDANCE_ENABLED' => true,
             'INCOME_GUIDANCE_HEADING' => (string) self::get('INCOME_GUIDANCE_HEADING'),
-            'INCOME_GUIDANCE_NOTE' => wpautop((string) self::get('INCOME_GUIDANCE_NOTE')),
+            'INCOME_GUIDANCE_NOTE' => wp_kses_post(wpautop((string) self::get('INCOME_GUIDANCE_NOTE'))),
         ];
     }
 
diff --git a/packages/join-block/tests/SettingsIncomeGuidanceTest.php b/packages/join-block/tests/SettingsIncomeGuidanceTest.php
index 4414e88..1de0275 100644
--- a/packages/join-block/tests/SettingsIncomeGuidanceTest.php
+++ b/packages/join-block/tests/SettingsIncomeGuidanceTest.php
@@ -59,6 +59,7 @@ private function withSettings(array $settings): void
     {
         Monkey\Functions\when('carbon_get_theme_option')->alias(fn($key) => $settings[$key] ?? null);
         Monkey\Functions\when('wpautop')->alias(fn($text) => $text === '' ? '' : "<p>$text</p>");
+        Monkey\Functions\when('wp_kses_post')->alias(fn($html) => str_replace(' onerror="steal()"', '', $html));
     }
 
     public function test_plans_carry_no_income_bands_when_off()
@@ -111,6 +112,24 @@ public function test_the_form_gets_the_heading_and_note_when_on()
         ], Settings::getIncomeGuidanceEnv());
     }
 
+    /**
+     * The note is shown as HTML on the join form. An admin without the
+     * unfiltered_html capability must not be able to put script in it.
+     */
+    public function test_the_note_is_sanitised_before_reaching_the_form()
+    {
+        $this->switchOn();
+        $this->withSettings([
+            'income_guidance_heading' => 'Suggested dues by income',
+            'income_guidance_note' => 'Email us <img src="x" onerror="steal()">',
+        ]);
+
+        $this->assertSame(
+            '<p>Email us <img src="x"></p>',
+            Settings::getIncomeGuidanceEnv()['INCOME_GUIDANCE_NOTE']
+        );
+    }
+
     public function test_an_unset_note_is_sent_empty()
     {
         $this->switchOn();

From 77374379243c4584eaca460f87c8c3f0f7f23d5e Mon Sep 17 00:00:00 2001
From: Alex Worrad-Andrews <alex@alexandrews.info>
Date: Tue, 13 Oct 2026 16:45:18 +0100
Subject: [PATCH 14/14] Check script saved in the income guidance note is
 stripped end to end

---
 packages/join-e2e/scripts/setup.php             | 7 ++++++-
 packages/join-e2e/tests/income-guidance.spec.ts | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/join-e2e/scripts/setup.php b/packages/join-e2e/scripts/setup.php
index 08753fd..312d203 100644
--- a/packages/join-e2e/scripts/setup.php
+++ b/packages/join-e2e/scripts/setup.php
@@ -364,7 +364,12 @@ function ck_e2e_upsert_page(string $slug, string $title, string $content): int
         $ck_e2e_plan('Other', 'other', '1', ['allow_custom_amount' => '1']),
     ])
 );
-carbon_set_theme_option('income_guidance_note', "Can't afford dues? Email dues@example.org.");
+// The image's handler is script an admin without unfiltered_html could save;
+// the form must strip it rather than run it.
+carbon_set_theme_option(
+    'income_guidance_note',
+    "Can't afford dues? Email dues@example.org.<img src=\"x\" onerror=\"document.body.dataset.injected='yes'\">"
+);
 
 // Enable STRIPE_DIRECT_DEBIT_ONLY globally so that allow_cards_override has
 // something to override. Without this the global default is false and the
diff --git a/packages/join-e2e/tests/income-guidance.spec.ts b/packages/join-e2e/tests/income-guidance.spec.ts
index 3a7e53e..35e6650 100644
--- a/packages/join-e2e/tests/income-guidance.spec.ts
+++ b/packages/join-e2e/tests/income-guidance.spec.ts
@@ -51,6 +51,13 @@ test.describe('The income guidance table', () => {
     await expect(page.getByText(NOTE)).toBeVisible();
   });
 
+  test('script saved in the note is stripped, not run', async ({ page }) => {
+    const note = page.locator('.income-guidance-note');
+    await expect(note).toContainText(NOTE);
+    await expect(note.locator('[onerror]')).toHaveCount(0);
+    expect(await page.evaluate(() => document.body.dataset.injected)).toBeUndefined();
+  });
+
   test('choosing a row selects its tier, and that tier is the one taken to payment', async ({ page }) => {
     await rowButton(page, '£12 monthly').click();