From 2026ea4aea29d424eba3d8725006cf787a90ad36 Mon Sep 17 00:00:00 2001
From: Andrew Polk <andrew_polk@sil.org>
Date: Fri, 23 Oct 2026 16:23:11 -0700
Subject: [PATCH] Collection Settings in React: Subscription page (BL-16734)

The page, laid out like the card's mockup, shares the code box and status line with the WinForms tab, which becomes a self-contained LegacySubscriptionSettings that the cutover deletes whole. The dialog keeps the code being typed and posts it with the other values; Apply hands it to ApplySubscriptionAndBookshelf before the xmatter check. A typed code is described by a stateless settings/subscription?code=, so Cancel leaves nothing behind.

Subscription badges and gated menu items open the dialog in the browser; a badge on the dialog's own pages switches page through Config-R's ConfigrPaneHandle, keeping edits. E2E tests: Notion Test Case 849.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/collection-settings-react/PLAN.md        |  39 +-
 src/BloomBrowserUI/bookEdit/workspaceRoot.ts  |   5 +
 .../CollectionSettingsDialog.test.tsx         | 432 +++++++++++++-----
 .../collection/CollectionSettingsDialog.tsx   |  85 ++--
 .../collection/collectionSettingsTypes.ts     |   6 +
 .../settingsPages/SubscriptionPage.tsx        | 100 ++++
 .../collection/subscriptionCodeControl.tsx    | 109 +++--
 .../subscriptionSettingsTab.entry.tsx         |   4 +-
 .../collection/subscriptionSettingsTab.tsx    |  34 +-
 .../collection/useSubscriptionInfo.ts         |  46 +-
 .../collectionsTab/SubscriptionStatus.tsx     |   4 +-
 .../react_components/featureStatus.ts         |   8 +-
 .../react_components/localizableMenuItem.tsx  |  10 +-
 src/BloomE2E/AUTOMATION-DEBT.md               |  12 +
 src/BloomE2E/README.md                        |   8 +-
 src/BloomE2E/helpers/collection.ts            |  50 ++
 src/BloomE2E/helpers/collectionSettings.ts    | 119 ++++-
 .../collection-settings-subscription.spec.ts  | 150 ++++++
 .../Collection/CollectionSettingsUpdater.cs   |  41 +-
 src/BloomExe/Workspace/WorkspaceView.cs       |  14 +-
 .../controllers/CollectionSettingsTypes.cs    |  28 +-
 src/BloomExe/web/controllers/CommonApi.cs     |  22 +-
 .../SubscriptionSettingsEditorApi.cs          |  28 +-
 .../CollectionSettingsUpdaterTests.cs         |  50 ++
 .../controllers/CollectionSettingsApiTests.cs |   1 +
 25 files changed, 1135 insertions(+), 270 deletions(-)
 create mode 100644 src/BloomBrowserUI/collection/settingsPages/SubscriptionPage.tsx
 create mode 100644 src/BloomE2E/tests/collection-settings-subscription.spec.ts

diff --git a/docs/collection-settings-react/PLAN.md b/docs/collection-settings-react/PLAN.md
index bfbffd908f69..1e36c2a8ed79 100644
--- a/docs/collection-settings-react/PLAN.md
+++ b/docs/collection-settings-react/PLAN.md
@@ -87,7 +87,10 @@ What a page card builds on:
 
 **Known gap for reused components.** The Subscription, Team Collection and bookshelf components
 post their edits to `settings/*` endpoints that only feed the WinForms dialog. The first card that
-reuses one decides how its edits reach the React POST.
+reuses one decides how its edits reach the React POST. BL-16734 did it for the subscription: the
+dialog keeps the code being typed in its own state (the editor is not a Config-R control), puts it
+into `values.subscription.code` for the restart check and the POST, and the reused components
+describe it with a stateless `GET settings/subscription?code=`, so Cancel has nothing to reset.
 
 ## 4. Decisions
 
@@ -138,13 +141,20 @@ client), Page Numbering Style (Q5). Values for xmatter, QR and places already ex
 **BL-16736 Bloom Library.** The bookshelf, with subscription gating (Q10). Post it and hand it to
 `ApplySubscriptionAndBookshelf`, which has the expired-bookshelf rules.
 
-**BL-16734 Subscription.** Reuse `SubscriptionSettings`. Hand the entered subscription to
-`ApplySubscriptionAndBookshelf` (its descriptor-change bookshelf clearing never fires; BL-16904).
-Reset its preview on Cancel. The "fix invalid branding" startup path must open this page. Decide
-whether the other pages' subscription gating (Experimental's Team Collections box, the bookshelf)
-should follow a code typed here but not yet saved; `features/status` only knows the saved one. If
-so, replace the Experimental page's own `useGetFeatureStatus` call with a small dialog-level
-subscription lookup that every page reads.
+**BL-16734 Subscription.** Built. The page lays out its own markup around the shared
+`SubscriptionControls` and `SubscriptionStatus`; the WinForms tab is a self-contained copy
+(`LegacySubscriptionSettings`, deleted whole in the cutover). The entered code goes
+to `ApplySubscriptionAndBookshelf` (its descriptor-change bookshelf clearing never fires;
+BL-16904), before the xmatter check, since the branding can choose the pack. It also moved the
+"open settings on the Subscription page" callers to the new dialog. Subscription badges and gated
+menu items call `showCollectionSettingsDialog` in the browser (from an iframe, through the
+workspace bundle's exports); `common/showSettingsDialog` remains for the comic book ReadMe links,
+and `CheckForInvalidBranding` launches it from C#. That startup check never fires (nothing sets
+`InvalidBranding`); it is removed in the cutover (section 6), not revived. Until the cutover, a
+badge on one of the WinForms dialog's own tabs does nothing. A badge on one of the dialog's own
+pages switches the open pane to the Subscription page, keeping the edits so far,
+through the page control Config-R gains in BL-17032.
+The other pages' gating still follows the saved subscription, not a code typed but not saved.
 
 **BL-16735 Team Collection.** Reuse `TeamCollectionSettingsPanel` with its overlay and warning.
 Validate administrator emails in the client (`CollectionSettings.ValidateAdministrators` has the
@@ -163,7 +173,7 @@ were on another tab there); in the values the font is already part of each langu
 **BL-16738 Experimental.** Per Q9. Built: a feature that lands adds an `ExperimentalFeatureSetting`
 row in `settingsPages/ExperimentalPage.tsx` and a property in `ExperimentalValues`.
 
-## 6. Cutover (new card)
+## 6. Cutover (BL-17042)
 
 - First go through the WinForms OK handler (`_okButton_Click`) line by line and confirm each rule
   exists in the React path or was dropped on purpose.
@@ -171,10 +181,13 @@ row in `settingsPages/ExperimentalPage.tsx` and a property in `ExperimentalValue
   bundles and their vite entries, `DialogBeingEdited`, and the legacy launch path. The new save
   path still reads `CollectionSettingsDialog.AutoUpdateSupportedOnThisPlatform` (in
   `AdvancedValues`), so that flag needs a new home when the WinForms class goes.
-- Point the "open settings on the Subscription page" callers (subscription badges, menu items,
-  `CheckForInvalidBranding`) at the new dialog. A caller in an iframe reaches the top frame's
-  `showCollectionSettingsDialog` through the workspace bundle's exports, as `showBookSettingsDialog`
-  does; the Comic Book ReadMe links are `fetch`es in book content, so they keep an endpoint.
+- The "open settings on the Subscription page" callers already open the new dialog (BL-16734).
+  The `forFixingEnterpriseSubscription` parameter of `OpenLegacySettingsDialog` goes with it.
+- Remove the dead invalid-branding startup check: `CollectionSettings.InvalidBranding`,
+  `WorkspaceView.CheckForInvalidBranding`, and its callers in `Shell` and `Program.cs`. Nothing
+  has set `InvalidBranding` since "Generalize Subscriptions (BL-14379)" (March 2025), so the check
+  always returns at once. Bringing back a startup prompt for an expired or wrong code would be a
+  separate product decision; the Collections tab's expiry banner covers that case today.
 - Mark unused `CollectionSettingsDialog.*` strings obsolete (never delete), update the help
   mapping and help pages, add an e2e test that opens the dialog and changes a setting (and update
   `src/BloomE2E/AUTOMATION-DEBT.md`), post test ideas on BL-16271.
diff --git a/src/BloomBrowserUI/bookEdit/workspaceRoot.ts b/src/BloomBrowserUI/bookEdit/workspaceRoot.ts
index 845f82ad0e56..8a1c0f35491a 100644
--- a/src/BloomBrowserUI/bookEdit/workspaceRoot.ts
+++ b/src/BloomBrowserUI/bookEdit/workspaceRoot.ts
@@ -60,6 +60,7 @@ export interface IWorkspaceExports {
     ): void;
     showAboutDialogFromWorkspaceRoot(): void;
     showBookSettingsDialog(initiallySelectedPageKey?: string): void;
+    showCollectionSettingsDialog(initialPageKey?: string): void;
     showDecodableReaderSetupDialog(): void;
     closeDecodableReaderSetupDialog(): void;
     showImageGalleryDialog(img: HTMLElement, searchLang: string): void;
@@ -92,6 +93,8 @@ export { showBookGridSetupDialog };
 import "../lib/errorHandler";
 import { showBookSettingsDialog } from "./bookAndPageSettings/BookAndPageSettingsDialog";
 export { showBookSettingsDialog };
+import { showCollectionSettingsDialog } from "../collection/CollectionSettingsDialog";
+export { showCollectionSettingsDialog };
 import {
     closeDecodableReaderSetupDialog,
     showDecodableReaderSetupDialog,
@@ -449,6 +452,7 @@ interface WorkspaceBundleApi {
     showLinkTargetChooserDialog: typeof showLinkTargetChooserDialog;
     showBookGridSetupDialog: typeof showBookGridSetupDialog;
     showBookSettingsDialog: typeof showBookSettingsDialog;
+    showCollectionSettingsDialog: typeof showCollectionSettingsDialog;
     showDecodableReaderSetupDialog: typeof showDecodableReaderSetupDialog;
     closeDecodableReaderSetupDialog: typeof closeDecodableReaderSetupDialog;
     showRegistrationDialog: typeof showRegistrationDialogForEditTab;
@@ -499,6 +503,7 @@ window.workspaceBundle = {
     showLinkTargetChooserDialog,
     showBookGridSetupDialog,
     showBookSettingsDialog,
+    showCollectionSettingsDialog,
     showDecodableReaderSetupDialog,
     closeDecodableReaderSetupDialog,
     showRegistrationDialog: showRegistrationDialogForEditTab,
diff --git a/src/BloomBrowserUI/collection/CollectionSettingsDialog.test.tsx b/src/BloomBrowserUI/collection/CollectionSettingsDialog.test.tsx
index e1b61e9dd96e..368eb2e25889 100644
--- a/src/BloomBrowserUI/collection/CollectionSettingsDialog.test.tsx
+++ b/src/BloomBrowserUI/collection/CollectionSettingsDialog.test.tsx
@@ -41,6 +41,7 @@ const initialValues: ICollectionSettingsValues = {
         province: "",
         district: "",
     },
+    subscription: { code: "Saved-Code-123456-7890" },
     bloomLibrary: { defaultBookshelf: "" },
     advanced: { autoUpdate: true, collectionName: "Test Collection" },
     experimental: { "team-collections": false, tables: false },
@@ -65,8 +66,9 @@ const {
     mockGet: vi.fn(),
     mockPostJson: vi.fn(),
     mockCloseDialog: vi.fn(),
-    // Lets a test close and re-open the dialog, which is what the real launch plumbing does.
-    dialogState: { open: true },
+    // Lets a test close and re-open the dialog, which is what the real launch plumbing does, and
+    // launch it again (a new event) while it is open.
+    dialogState: { open: true, openingEvent: {} as Record<string, unknown> },
     // Whether Bloom has answered the subscription check yet, and whether the collection's tier
     // includes Team Collections.
     teamCollectionFeature: { loaded: true, enabled: true },
@@ -106,6 +108,40 @@ vi.mock("../react_components/requiresSubscription", () => ({
     ),
 }));
 
+// The Subscription page's code editor and status talk to Bloom themselves. These
+// stand-ins show the code they were given, and let a test type a new one.
+vi.mock("./subscriptionCodeControl", () => ({
+    SubscriptionControls: (props: {
+        code: string;
+        onCodeChange: (code: string) => void;
+    }) => (
+        <div>
+            <div data-testid="subscription-code">{props.code}</div>
+            <button
+                data-testid="type-subscription-code"
+                onClick={() => props.onCodeChange(" New-Code-654321-0987 ")}
+            />
+            <button
+                data-testid="clear-subscription-code"
+                onClick={() => props.onCodeChange("")}
+            />
+        </div>
+    ),
+}));
+
+vi.mock("../collectionsTab/SubscriptionStatus", () => ({
+    SubscriptionStatus: () => null,
+}));
+
+vi.mock("../react_components/markdown", () => ({
+    Markdown: () => null,
+}));
+
+// On the Subscription page, the note box holds only the community invitation.
+vi.mock("../react_components/boxes", () => ({
+    NoteBox: () => <div data-testid="community-invitation" />,
+}));
+
 vi.mock("../utils/bloomApi", () => ({
     get: mockGet,
     postJson: mockPostJson,
@@ -117,7 +153,7 @@ vi.mock("../react_components/l10nHooks", () => ({
 
 vi.mock("../react_components/BloomDialog/BloomDialogPlumbing", () => ({
     useEventLaunchedBloomDialog: () => ({
-        openingEvent: {},
+        openingEvent: dialogState.openingEvent,
         closeDialog: mockCloseDialog,
         propsForBloomDialog: { open: dialogState.open },
     }),
@@ -167,117 +203,183 @@ vi.mock("../react_components/BloomDialog/commonDialogComponents", () => ({
     ),
 }));
 
-const { MockConfigrGroup } = vi.hoisted(() => ({
+const {
+    MockConfigrGroup,
+    MockConfigrStatic,
+    MockMountedWith,
+    MockShownPage,
+    withPaneRef,
+} = vi.hoisted(() => ({
+    // The dialog gives ConfigrPane a ref, so the stand-in must accept one; this passes it on
+    // to the stand-in as its paneRef prop.
+    withPaneRef: <P,>(Pane: React.FunctionComponent<P>) => {
+        const PaneTakingRef = Pane as unknown as React.FunctionComponent<{
+            paneRef: React.ForwardedRef<unknown>;
+        }>;
+        const MockConfigrPane = React.forwardRef((props: object, ref) => (
+            <PaneTakingRef {...props} paneRef={ref} />
+        ));
+        MockConfigrPane.displayName = "MockConfigrPane";
+        return MockConfigrPane;
+    },
+    // The page the pane shows. Like Config-r, it opens on the initially selected page, moves
+    // when the user clicks another one, and moves when the pane's handle asks it to.
+    MockShownPage: (props: {
+        paneRef: React.ForwardedRef<unknown>;
+        initialPageKey?: string;
+    }) => {
+        const [shownPageKey, setShownPageKey] = React.useState(
+            props.initialPageKey,
+        );
+        React.useImperativeHandle(props.paneRef, () => ({
+            selectTopLevelPage: setShownPageKey,
+        }));
+        return (
+            <>
+                <div data-testid="shown-page">{shownPageKey}</div>
+                <button
+                    data-testid="user-shows-bloom-library"
+                    onClick={() => setShownPageKey("bloomLibrary")}
+                />
+            </>
+        );
+    },
+    // What the pane was given as it mounted; later renders do not change it, as in Config-r.
+    MockMountedWith: (props: { collectionName: string; pageKey?: string }) => {
+        const [mountedWith] = React.useState(props);
+        return (
+            <>
+                <div data-testid="initial-collection-name">
+                    {mountedWith.collectionName}
+                </div>
+                <div data-testid="initial-page-key">{mountedWith.pageKey}</div>
+            </>
+        );
+    },
     MockConfigrGroup: (props: React.PropsWithChildren<object>) => (
         <div>{props.children}</div>
     ),
+    MockConfigrStatic: (props: React.PropsWithChildren<object>) => (
+        <div>{props.children}</div>
+    ),
 }));
 
 vi.mock("@sillsdev/config-r", () => ({
-    ConfigrPane: (props: {
-        children: React.ReactNode;
-        initialValues: ICollectionSettingsValues;
-        onChange: (values: unknown) => void;
-        onTopLevelPageChange: (pageKey: string | undefined) => void;
-    }) => (
-        <div>
-            {/* Config-R reports the page it shows; these stand for the user choosing one. */}
-            <button
-                data-testid="show-subscription-page"
-                onClick={() => props.onTopLevelPageChange("subscription")}
-            />
-            <button
-                data-testid="show-advanced-page"
-                onClick={() => props.onTopLevelPageChange("advanced")}
-            />
-            {/* Config-r captures initialValues at mount, so tests check what it was given. */}
-            <div data-testid="initial-collection-name">
-                {props.initialValues.advanced.collectionName}
-            </div>
-            <button
-                data-testid="change-restart-value"
-                onClick={() =>
-                    props.onChange({
-                        ...props.initialValues,
-                        frontBackMatter: {
-                            ...props.initialValues.frontBackMatter,
-                            xmatter: "Device",
-                        },
-                    })
-                }
-            />
-            <button
-                data-testid="add-third-language"
-                onClick={() =>
-                    props.onChange({
-                        ...props.initialValues,
-                        languages: {
-                            ...props.initialValues.languages,
-                            language3: {
-                                ...props.initialValues.languages.language1,
-                                tag: "es",
+    ConfigrPane: withPaneRef(
+        (props: {
+            children: React.ReactNode;
+            initialValues: ICollectionSettingsValues;
+            initiallySelectedTopLevelPageKey?: string;
+            onChange: (values: unknown) => void;
+            onTopLevelPageChange: (pageKey: string | undefined) => void;
+            paneRef: React.ForwardedRef<unknown>;
+        }) => (
+            <div>
+                {/* Config-R reports the page it shows; these stand for the user choosing one. */}
+                <button
+                    data-testid="show-subscription-page"
+                    onClick={() => props.onTopLevelPageChange("subscription")}
+                />
+                <button
+                    data-testid="show-advanced-page"
+                    onClick={() => props.onTopLevelPageChange("advanced")}
+                />
+                {/* Config-r reads initialValues and the page to show only as it mounts, so tests check what it was given. */}
+                <MockMountedWith
+                    collectionName={props.initialValues.advanced.collectionName}
+                    pageKey={props.initiallySelectedTopLevelPageKey}
+                />
+                <MockShownPage
+                    paneRef={props.paneRef}
+                    initialPageKey={props.initiallySelectedTopLevelPageKey}
+                />
+                <button
+                    data-testid="change-restart-value"
+                    onClick={() =>
+                        props.onChange({
+                            ...props.initialValues,
+                            frontBackMatter: {
+                                ...props.initialValues.frontBackMatter,
+                                xmatter: "Device",
                             },
-                        },
-                    })
-                }
-            />{" "}
-            <button
-                data-testid="change-other-value"
-                onClick={() =>
-                    props.onChange({
-                        ...props.initialValues,
-                        advanced: {
-                            ...props.initialValues.advanced,
-                            collectionName: "Renamed",
-                        },
-                    })
-                }
-            />
-            <button
-                data-testid="pad-country"
-                onClick={() =>
-                    props.onChange({
-                        ...props.initialValues,
-                        frontBackMatter: {
-                            ...props.initialValues.frontBackMatter,
-                            country: "  Kenya ",
-                        },
-                    })
-                }
-            />
-            <button
-                data-testid="pad-collection-name"
-                onClick={() =>
-                    props.onChange({
-                        ...props.initialValues,
-                        advanced: {
-                            ...props.initialValues.advanced,
-                            collectionName: ` ${props.initialValues.advanced.collectionName}  `,
-                        },
-                    })
-                }
-            />
-            <button
-                data-testid="choose-no-bookshelf"
-                onClick={() =>
-                    props.onChange({
-                        ...props.initialValues,
-                        bloomLibrary: { defaultBookshelf: "" },
-                    })
-                }
-            />
-            {props.children}
-        </div>
+                        })
+                    }
+                />
+                <button
+                    data-testid="add-third-language"
+                    onClick={() =>
+                        props.onChange({
+                            ...props.initialValues,
+                            languages: {
+                                ...props.initialValues.languages,
+                                language3: {
+                                    ...props.initialValues.languages.language1,
+                                    tag: "es",
+                                },
+                            },
+                        })
+                    }
+                />{" "}
+                <button
+                    data-testid="change-other-value"
+                    onClick={() =>
+                        props.onChange({
+                            ...props.initialValues,
+                            advanced: {
+                                ...props.initialValues.advanced,
+                                collectionName: "Renamed",
+                            },
+                        })
+                    }
+                />
+                <button
+                    data-testid="pad-country"
+                    onClick={() =>
+                        props.onChange({
+                            ...props.initialValues,
+                            frontBackMatter: {
+                                ...props.initialValues.frontBackMatter,
+                                country: "  Kenya ",
+                            },
+                        })
+                    }
+                />
+                <button
+                    data-testid="pad-collection-name"
+                    onClick={() =>
+                        props.onChange({
+                            ...props.initialValues,
+                            advanced: {
+                                ...props.initialValues.advanced,
+                                collectionName: ` ${props.initialValues.advanced.collectionName}  `,
+                            },
+                        })
+                    }
+                />
+                <button
+                    data-testid="choose-no-bookshelf"
+                    onClick={() =>
+                        props.onChange({
+                            ...props.initialValues,
+                            bloomLibrary: { defaultBookshelf: "" },
+                        })
+                    }
+                />
+                {props.children}
+            </div>
+        ),
     ),
     ConfigrPage: (props: React.PropsWithChildren<{ pageKey: string }>) => {
-        // The real ConfigrPage throws (and blanks the whole UI) unless every child is a group.
+        // The real ConfigrPage throws (and blanks the whole UI) unless every child is a group or
+        // a static block.
         React.Children.forEach(props.children, (child) => {
             if (
                 !React.isValidElement(child) ||
-                child.type !== MockConfigrGroup
+                (child.type !== MockConfigrGroup &&
+                    child.type !== MockConfigrStatic)
             ) {
                 throw new Error(
-                    `ConfigrPage "${props.pageKey}" has a child that is not a ConfigrGroup`,
+                    `ConfigrPage "${props.pageKey}" has a child that is neither a ConfigrGroup nor a ConfigrStatic`,
                 );
             }
         });
@@ -288,9 +390,7 @@ vi.mock("@sillsdev/config-r", () => ({
         );
     },
     ConfigrGroup: MockConfigrGroup,
-    ConfigrStatic: (props: React.PropsWithChildren<object>) => (
-        <div>{props.children}</div>
-    ),
+    ConfigrStatic: MockConfigrStatic,
     ConfigrBoolean: (props: { path: string; disabled?: boolean }) => (
         <input
             type="checkbox"
@@ -395,6 +495,7 @@ describe("CollectionSettingsDialog", () => {
         container = document.createElement("div");
         document.body.appendChild(container);
         dialogState.open = true;
+        dialogState.openingEvent = {};
         teamCollectionFeature.loaded = true;
         teamCollectionFeature.enabled = true;
         enterpriseBookshelves.shelves = [];
@@ -923,6 +1024,131 @@ describe("CollectionSettingsDialog", () => {
         });
     });
 
+    describe("Subscription page", () => {
+        const subscriptionPageElement = (testId: string) =>
+            container.querySelector(
+                `[data-testid="configr-page"][data-page-key="subscription"] [data-testid="${testId}"]`,
+            );
+
+        const respondWithSubscriptionRestart = (code: string) => {
+            respondWith({
+                ...settingsResponse,
+                values: { ...initialValues, subscription: { code } },
+                restartPaths: [
+                    ...settingsResponse.restartPaths,
+                    "subscription.code",
+                ],
+            });
+        };
+
+        it("shows the saved code, and no community invitation", async () => {
+            await renderDialog();
+
+            expect(
+                subscriptionPageElement("subscription-code")?.textContent,
+            ).toBe("Saved-Code-123456-7890");
+            expect(subscriptionPageElement("community-invitation")).toBeNull();
+        });
+
+        it("invites a collection with no code to a community subscription", async () => {
+            respondWithSubscriptionRestart("");
+
+            await renderDialog();
+
+            expect(
+                subscriptionPageElement("community-invitation"),
+            ).not.toBeNull();
+        });
+
+        it("saves the code as typed, trimmed, and restarts", async () => {
+            respondWithSubscriptionRestart("Saved-Code-123456-7890");
+            await renderDialog();
+            expect(okButtonLabel()).toBe("OK");
+
+            click("type-subscription-code");
+            expect(
+                subscriptionPageElement("subscription-code")?.textContent,
+            ).toBe(" New-Code-654321-0987 ");
+            expect(okButtonLabel()).toBe("Restart");
+            click("dialog-ok");
+
+            expect(mockPostJson.mock.calls[0][1]).toEqual({
+                values: {
+                    ...initialValues,
+                    subscription: { code: "New-Code-654321-0987" },
+                },
+                restartRequired: true,
+            });
+        });
+
+        it("keeps a typed code when another page's value changes", async () => {
+            respondWithSubscriptionRestart("Saved-Code-123456-7890");
+            await renderDialog();
+
+            click("clear-subscription-code");
+            // Config-R's values still carry the code it was given when the dialog opened.
+            click("change-other-value");
+            await flushDeferredChange();
+            click("dialog-ok");
+
+            expect(mockPostJson.mock.calls[0][1].values.subscription).toEqual({
+                code: "",
+            });
+            expect(
+                mockPostJson.mock.calls[0][1].values.advanced.collectionName,
+            ).toBe("Renamed");
+        });
+
+        it("goes to the Subscription page, keeping the user's changes, when a badge in the open dialog asks for it", async () => {
+            await renderDialog();
+            const textOf = (testId: string) =>
+                container.querySelector(`[data-testid="${testId}"]`)
+                    ?.textContent;
+            expect(textOf("shown-page")).toBe("");
+            click("change-other-value");
+            click("type-subscription-code");
+            await flushDeferredChange();
+
+            // What a subscription badge's click becomes: the dialog is launched again.
+            dialogState.openingEvent = { initialPageKey: "subscription" };
+            await renderDialog();
+            expect(textOf("shown-page")).toBe("subscription");
+
+            // The user goes back to another page, and a badge there asks again.
+            click("user-shows-bloom-library");
+            expect(textOf("shown-page")).toBe("bloomLibrary");
+            dialogState.openingEvent = { initialPageKey: "subscription" };
+            await renderDialog();
+            expect(textOf("shown-page")).toBe("subscription");
+
+            // The pane was never mounted again, so it is still editing the changed values.
+            expect(textOf("initial-collection-name")).toBe("Test Collection");
+            click("dialog-ok");
+            expect(
+                mockPostJson.mock.calls[0][1].values.advanced.collectionName,
+            ).toBe("Renamed");
+            expect(mockPostJson.mock.calls[0][1].values.subscription).toEqual({
+                code: "New-Code-654321-0987",
+            });
+        });
+
+        it("starts a later open from the saved code, not the one typed and cancelled", async () => {
+            await renderDialog();
+            click("type-subscription-code");
+            click("dialog-cancel");
+            expect(mockPostJson).not.toHaveBeenCalled();
+
+            dialogState.open = false;
+            await renderDialog();
+            dialogState.open = true;
+            await renderDialog();
+
+            expect(
+                subscriptionPageElement("subscription-code")?.textContent,
+            ).toBe("Saved-Code-123456-7890");
+        });
+    });
+
     describe("Experimental page", () => {
         const teamCollectionsCheckbox = () => {
             const checkbox = container.querySelector(
diff --git a/src/BloomBrowserUI/collection/CollectionSettingsDialog.tsx b/src/BloomBrowserUI/collection/CollectionSettingsDialog.tsx
index e8605a2a5b78..ff879b254ed8 100644
--- a/src/BloomBrowserUI/collection/CollectionSettingsDialog.tsx
+++ b/src/BloomBrowserUI/collection/CollectionSettingsDialog.tsx
@@ -2,6 +2,7 @@ import { css } from "@emotion/react";
 import * as React from "react";
 import {
     ConfigrValues,
+    type ConfigrPaneHandle,
     ConfigrGroup,
     ConfigrPage,
     ConfigrPane,
@@ -36,6 +37,7 @@ import { collectionSettingsHelpTopic } from "./collectionSettingsHelpTopic";
 import { useAdvancedPage } from "./settingsPages/AdvancedPage";
 import { useBloomLibraryPage } from "./settingsPages/BloomLibraryPage";
 import { useExperimentalPage } from "./settingsPages/ExperimentalPage";
+import { useSubscriptionPage } from "./settingsPages/SubscriptionPage";
 
 // Temporary content for every page. Each of the seven tab cards replaces its page's group with
 // real controls, so this text is deliberately plain English and is never localized.
@@ -112,6 +114,10 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
     const [currentValues, setCurrentValues] =
         React.useState<ICollectionSettingsValues>();
     const [saving, setSaving] = React.useState(false);
+    // The subscription code as the user is typing it. It is kept here rather than in Config-R's
+    // values because its editor is not a Config-R control; withSubscriptionCode puts it in.
+    const [subscriptionCode, setSubscriptionCode] = React.useState<string>();
+    const paneRef = React.useRef<ConfigrPaneHandle>(null);
     // The top-level page Config-R is showing, so Help can open that page's topic.
     const [shownPageKey, setShownPageKey] = React.useState<string>();
 
@@ -128,6 +134,7 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
             latestValuesRef.current = undefined;
             setLoadedSettings(undefined);
             setCurrentValues(undefined);
+            setSubscriptionCode(undefined);
             setSaving(false);
             setShownPageKey(undefined);
             return;
@@ -139,9 +146,21 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
             latestValuesRef.current = response.values;
             setLoadedSettings(response);
             setCurrentValues(response.values);
+            // A user who may not edit the settings gets no values.
+            setSubscriptionCode(response.values?.subscription.code);
         });
     }, [propsForBloomDialog.open]);
 
+    // A launch that arrives while the dialog is already open comes from a subscription badge on
+    // one of its own pages, asking for the Subscription page. This effect hands that launch on to
+    // the open pane, which switches page keeping the user's edits. A launch that opens the dialog
+    // finds no pane yet; the pane opens on its page through initiallySelectedTopLevelPageKey.
+    React.useEffect(() => {
+        if (initialPageKey) paneRef.current?.selectTopLevelPage(initialPageKey);
+        // Only a new launch should do this.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [openingEvent]);
+
     const dialogTitle = useL10n(
         "Collection Settings",
         "CollectionSettingsDialog.Title",
@@ -154,10 +173,6 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
         "Front & Back Matter",
         "CollectionSettingsDialog.FrontBackMatterPage",
     );
-    const subscriptionLabel = useL10n(
-        "Subscription",
-        "CollectionSettingsDialog.SubscriptionPage",
-    );
     const teamCollectionLabel = useL10n(
         "Team Collection",
         "TeamCollection.TeamCollection",
@@ -170,12 +185,26 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
     // C# names these pageKeys when it asks us to open on a particular page. Each built page is a
     // hook in its own file under settingsPages/ that returns its ConfigrPage (Config-R rejects a
     // page wrapped in a component); each placeholder below moves to one when its tab card adds it.
-    const placeholderPages = [
-        { pageKey: "languages", label: languagesLabel },
-        { pageKey: "frontBackMatter", label: frontBackMatterLabel },
-        { pageKey: "subscription", label: subscriptionLabel },
-        { pageKey: "teamCollection", label: teamCollectionLabel },
-    ];
+    function placeholderPage(pageKey: string, label: string) {
+        return (
+            <ConfigrPage
+                key={pageKey}
+                label={label}
+                pageKey={pageKey}
+                topLevel={true}
+            >
+                <ConfigrGroup label={label}>
+                    <ConfigrStatic>
+                        <PagePlaceholder />
+                    </ConfigrStatic>
+                </ConfigrGroup>
+            </ConfigrPage>
+        );
+    }
+    const subscriptionPage = useSubscriptionPage({
+        code: subscriptionCode,
+        onCodeChange: setSubscriptionCode,
+    });
     const bloomLibraryPage = useBloomLibraryPage({
         dialogOpen: propsForBloomDialog.open,
         settings: loadedSettings,
@@ -206,12 +235,22 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
             )
         );
     }
+    // Config-R's values with the subscription code being typed in place of the one loaded.
+    function withSubscriptionCode(
+        values: ICollectionSettingsValues,
+    ): ICollectionSettingsValues {
+        return { ...values, subscription: { code: subscriptionCode! } };
+    }
+
     // Both are checked: a deferred onChange can set currentValues after a close has already
     // cleared loadedSettings.
     const needsRestart = restartNeededFor(
         currentValues &&
             loadedSettings &&
-            withEditedTextTrimmed(currentValues, loadedSettings.values),
+            withEditedTextTrimmed(
+                withSubscriptionCode(currentValues),
+                loadedSettings.values,
+            ),
     );
 
     function saveAndCloseDialog() {
@@ -223,7 +262,7 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
         // the restart flag is worked out from it too.
         // OK is enabled only once the values have loaded.
         const valuesToSave = withEditedTextTrimmed(
-            latestValuesRef.current!,
+            withSubscriptionCode(latestValuesRef.current!),
             loadedSettings!.values,
         );
         postJson(
@@ -277,6 +316,7 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
                 )}
                 {loadedSettings && !notAllowedMessage && (
                     <ConfigrPane
+                        ref={paneRef}
                         className={kConfigrPaneClassName}
                         label={dialogTitle}
                         showAppBar={false}
@@ -297,20 +337,13 @@ export const CollectionSettingsDialog: React.FunctionComponent = () => {
                             }, 0);
                         }}
                     >
-                        {placeholderPages.map((page) => (
-                            <ConfigrPage
-                                key={page.pageKey}
-                                label={page.label}
-                                pageKey={page.pageKey}
-                                topLevel={true}
-                            >
-                                <ConfigrGroup label={page.label}>
-                                    <ConfigrStatic>
-                                        <PagePlaceholder />
-                                    </ConfigrStatic>
-                                </ConfigrGroup>
-                            </ConfigrPage>
-                        ))}
+                        {placeholderPage("languages", languagesLabel)}
+                        {placeholderPage(
+                            "frontBackMatter",
+                            frontBackMatterLabel,
+                        )}
+                        {subscriptionPage}
+                        {placeholderPage("teamCollection", teamCollectionLabel)}
                         {bloomLibraryPage}
                         {advancedPage}
                         {experimentalPage}
diff --git a/src/BloomBrowserUI/collection/collectionSettingsTypes.ts b/src/BloomBrowserUI/collection/collectionSettingsTypes.ts
index 1fc2d4be8c9c..e845ffbcbd6a 100644
--- a/src/BloomBrowserUI/collection/collectionSettingsTypes.ts
+++ b/src/BloomBrowserUI/collection/collectionSettingsTypes.ts
@@ -39,6 +39,11 @@ export interface ICollectionSettingsFrontBackMatter {
     district: string;
 }
 
+export interface ICollectionSettingsSubscription {
+    // As the user typed it; "" for none.
+    code: string;
+}
+
 export interface ICollectionSettingsBloomLibrary {
     // The url key of the bookshelf uploaded books go into, or "" for none.
     defaultBookshelf: string;
@@ -53,6 +58,7 @@ export interface ICollectionSettingsAdvanced {
 export interface ICollectionSettingsValues {
     languages: ICollectionSettingsLanguages;
     frontBackMatter: ICollectionSettingsFrontBackMatter;
+    subscription: ICollectionSettingsSubscription;
     bloomLibrary: ICollectionSettingsBloomLibrary;
     advanced: ICollectionSettingsAdvanced;
     // Keyed by experimental feature token.
diff --git a/src/BloomBrowserUI/collection/settingsPages/SubscriptionPage.tsx b/src/BloomBrowserUI/collection/settingsPages/SubscriptionPage.tsx
new file mode 100644
index 000000000000..d1f125475688
--- /dev/null
+++ b/src/BloomBrowserUI/collection/settingsPages/SubscriptionPage.tsx
@@ -0,0 +1,100 @@
+import { css } from "@emotion/react";
+import * as React from "react";
+import { ConfigrGroup, ConfigrPage, ConfigrStatic } from "@sillsdev/config-r";
+import { useL10n } from "../../react_components/l10nHooks";
+import { Markdown } from "../../react_components/markdown";
+import { NoteBox } from "../../react_components/boxes";
+import { SubscriptionStatus } from "../../collectionsTab/SubscriptionStatus";
+import { SubscriptionControls } from "../subscriptionCodeControl";
+import { kUiFontStack } from "../../bloomMaterialUITheme";
+
+// Config-R's own rows are padded like this (MUI ListItem).
+const kRowPadding = "8px 16px";
+// The page's text is in Bloom's UI font, as in the rest of Bloom's subscription UI.
+const kTextStyle = css`
+    font-family: ${kUiFontStack};
+    font-size: 10pt;
+`;
+
+/**
+ * The Subscription page of the Collection Settings dialog: what a subscription is for and how to
+ * get one, then the subscription code and what it gives the collection. The code is not a
+ * Config-R value, because its editor is not a Config-R control; the dialog keeps it and puts it
+ * into the values it saves.
+ */
+export function useSubscriptionPage(props: {
+    // Undefined until the dialog's GET collection/settings has answered.
+    code: string | undefined;
+    onCodeChange: (code: string) => void;
+}): React.ReactElement {
+    const label = useL10n(
+        "Subscription",
+        "CollectionSettingsDialog.SubscriptionPage",
+    );
+
+    return (
+        <ConfigrPage label={label} pageKey="subscription" topLevel={true}>
+            <ConfigrStatic>
+                <div css={kTextStyle}>
+                    <Markdown
+                        l10nKey="Settings.Subscription.IntroText"
+                        l10nParam0={"https://bloomlibrary.org/feature-matrix"} // redirected by cloudflare
+                    >
+                        To help cover a portion of the costs associated with
+                        providing Bloom, we offer [advanced features](%0) and
+                        customizations as a subscription service.
+                    </Markdown>
+                    <Markdown
+                        l10nKey="Settings.Subscription.RequestSubscription"
+                        l10nParam0={"subscriptions@bloomlibrary.org"}
+                        l10nParam1={"mailto:subscriptions@bloomlibrary.org"}
+                    >
+                        Please contact [%0](%1) to purchase your subscription
+                        code.
+                    </Markdown>
+                </div>
+            </ConfigrStatic>
+            <ConfigrGroup>
+                <div
+                    css={[
+                        kTextStyle,
+                        css`
+                            padding: ${kRowPadding};
+                        `,
+                    ]}
+                >
+                    <SubscriptionControls
+                        // The dialog shows its pages only once the settings have loaded.
+                        code={props.code!}
+                        onCodeChange={props.onCodeChange}
+                    />
+                    <SubscriptionStatus minimalUI code={props.code} />
+                    {/* A blank code means the collection has no subscription. */}
+                    {props.code?.trim() === "" && (
+                        <NoteBox
+                            css={css`
+                                p {
+                                    margin: 0; // markdown wraps everything in a p tag which adds a big margin we don't need
+                                }
+                            `}
+                        >
+                            {/* wrap in a div with display inline */}
+                            <div
+                                css={css`
+                                    display: inline;
+                                `}
+                            >
+                                <Markdown l10nKey="Settings.Subscription.Community.Invitation">
+                                    If your project is fully funded and managed
+                                    by your local language community, you may
+                                    qualify for a free [Bloom Community
+                                    Subscription](https://bloomlibrary.org/subscriptions).
+                                </Markdown>
+                            </div>
+                        </NoteBox>
+                    )}
+                </div>
+            </ConfigrGroup>
+        </ConfigrPage>
+    );
+}
diff --git a/src/BloomBrowserUI/collection/subscriptionCodeControl.tsx b/src/BloomBrowserUI/collection/subscriptionCodeControl.tsx
index 5f4e8e87d713..1bacf37f2790 100644
--- a/src/BloomBrowserUI/collection/subscriptionCodeControl.tsx
+++ b/src/BloomBrowserUI/collection/subscriptionCodeControl.tsx
@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import * as React from "react";
 import { Label } from "../react_components/l10nComponents";
-import { get, post, postJson, useApiStringState } from "../utils/bloomApi";
+import { get, post, postJson } from "../utils/bloomApi";
 import CheckIcon from "@mui/icons-material/Check";
 import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
 import ErrorIcon from "@mui/icons-material/Error";
@@ -49,8 +49,12 @@ type Status =
 //      because we are using a branding permitted in a special collection made by
 //      downloading a book for editing from BloomLibrary. We show a special message.
 
-// Component for managing subscription code input and display
-export const SubscriptionControls: React.FC = () => {
+// Component for managing subscription code input and display.
+// The dialog showing it keeps the code being typed, and passes it in with a function to change it.
+export const SubscriptionControls: React.FC<{
+    code: string;
+    onCodeChange: (code: string) => void;
+}> = (props) => {
     const {
         code,
         tier,
@@ -60,7 +64,7 @@ export const SubscriptionControls: React.FC = () => {
         missingBrandingFiles,
         editingBlorgBook,
         haveData,
-    } = useSubscriptionInfo();
+    } = useSubscriptionInfo(props.code);
 
     const [status, setStatus] = useState<Status>("None");
 
@@ -101,7 +105,11 @@ export const SubscriptionControls: React.FC = () => {
                 </NoteBox>
             )}
 
-            <Editor status={status} />
+            <Editor
+                status={status}
+                subscriptionCode={props.code}
+                onCodeChange={props.onCodeChange}
+            />
 
             <StatusText
                 tier={tier}
@@ -127,7 +135,10 @@ const StatusText: React.FC<{
             {props.status === "SubscriptionIncorrect" && (
                 <Label
                     l10nKey="Settings.Subscription.NotValid"
-                    className={"error"}
+                    css={css`
+                        display: block;
+                        color: red;
+                    `}
                 >
                     That code appears to be incorrect.
                 </Label>
@@ -136,7 +147,10 @@ const StatusText: React.FC<{
             {props.status === "SubscriptionIncomplete" && (
                 <Label
                     l10nKey="Settings.Subscription.Incomplete"
-                    className={"incomplete"}
+                    css={css`
+                        display: block;
+                        color: ${kBloomBlue};
+                    `}
                 >
                     The code should look like SOMENAME-123456-7890
                 </Label>
@@ -170,7 +184,10 @@ const StatusText: React.FC<{
             {props.status === "SubscriptionExpired" && (
                 <Label
                     l10nKey="Settings.Subscription.Expired"
-                    className={"error"}
+                    css={css`
+                        display: block;
+                        color: red;
+                    `}
                 >
                     That code has expired.
                 </Label>
@@ -184,6 +201,7 @@ const StatusText: React.FC<{
                 >
                     <Label l10nKey="Subscription.TierWithColon">Tier:</Label>{" "}
                     <span
+                        data-testid="subscription-tier"
                         css={css`
                             margin-right: 20px;
                         `}
@@ -281,11 +299,48 @@ function getStatusSansEditingBlorgBook(
 export const BrandingSummary: React.FC<{ summaryHtml: string }> = (props) => {
     return (
         <div
-            className="summary"
             css={css`
                 background-color: white;
                 padding: 5px;
+                margin-top: 5px;
                 height: 106px;
+                overflow-y: hidden;
+                // Each summary.htm file has one top-level div of one of these classes. In the
+                // horizontal layout, there should be one child div, with whatever should appear
+                // beside the picture.
+                .horizontal {
+                    display: flex;
+                    box-sizing: border-box;
+                    div {
+                        margin-right: 20px;
+                        // allowing both to grow tends to distribute any extra white space,
+                        // rather than putting the image right next to the text (default) or
+                        // against the right border (as would making the parent
+                        // justify-content:space-between). Unlike justify-content:space-around,
+                        // this won't put any space before the div, so the text stays aligned with
+                        // the other two items in the column as desired.
+                        flex-grow: 1;
+                    }
+                    img {
+                        max-height: 100px;
+                        max-width: 250px;
+                        flex-grow: 1;
+                        object-fit: contain;
+                    }
+                }
+                .vertical {
+                    display: flex;
+                    height: 100%;
+                    box-sizing: border-box;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    img {
+                        flex: 1 1 0;
+                        object-fit: contain;
+                        margin-top: 3px;
+                        min-height: 0;
+                    }
+                }
             `}
             dangerouslySetInnerHTML={{
                 __html: props.summaryHtml,
@@ -294,11 +349,13 @@ export const BrandingSummary: React.FC<{ summaryHtml: string }> = (props) => {
     );
 };
 
-const Editor: React.FC<{ status: Status }> = ({ status }) => {
-    const [subscriptionCode, setSubscriptionCode] = useApiStringState(
-        "settings/subscriptionCode",
-        "",
-    );
+const Editor: React.FC<{
+    status: Status;
+    subscriptionCode: string;
+    onCodeChange: (code: string) => void;
+}> = (props) => {
+    const status = props.status;
+    const subscriptionCode = props.subscriptionCode;
 
     // Handle copy/paste operations
     const handleCopy = () => {
@@ -314,8 +371,7 @@ const Editor: React.FC<{ status: Status }> = ({ status }) => {
             let resultText = result.data as string;
             if (resultText) {
                 resultText = resultText.trim();
-                setSubscriptionCode(resultText);
-                document.dispatchEvent(new Event("subscriptionCodeChanged"));
+                props.onCodeChange(resultText);
             }
         });
     };
@@ -358,8 +414,7 @@ const Editor: React.FC<{ status: Status }> = ({ status }) => {
             )?.selectionStart,
         );
 
-        setSubscriptionCode(event.target.value);
-        document.dispatchEvent(new Event("subscriptionCodeChanged"));
+        props.onCodeChange(event.target.value);
     };
 
     return (
@@ -379,7 +434,9 @@ const Editor: React.FC<{ status: Status }> = ({ status }) => {
                 `}
             >
                 <Label
-                    className="subscriptionCodeLabel"
+                    css={css`
+                        display: inline-block;
+                    `}
                     l10nKey="Settings.Subscription.SubscriptionCodeLabel"
                 >
                     Subscription Code:
@@ -433,23 +490,13 @@ const Editor: React.FC<{ status: Status }> = ({ status }) => {
             <Button variant="text" onClick={handleCopy} size="small">
                 <Stack direction="column" alignItems="center">
                     <ContentCopy />
-                    <Label
-                        className="editButtonLabel"
-                        l10nKey="EditTab.CopyButton"
-                    >
-                        Copy
-                    </Label>
+                    <Label l10nKey="EditTab.CopyButton">Copy</Label>
                 </Stack>
             </Button>
             <Button variant="text" onClick={handlePaste} size="small">
                 <Stack direction="column" alignItems="center">
                     <ContentPaste />
-                    <Label
-                        className="editButtonLabel"
-                        l10nKey="EditTab.PasteButton"
-                    >
-                        Paste
-                    </Label>
+                    <Label l10nKey="EditTab.PasteButton">Paste</Label>
                 </Stack>
             </Button>
         </div>
diff --git a/src/BloomBrowserUI/collection/subscriptionSettingsTab.entry.tsx b/src/BloomBrowserUI/collection/subscriptionSettingsTab.entry.tsx
index d6df7b6d4ad1..078f978e5bf6 100644
--- a/src/BloomBrowserUI/collection/subscriptionSettingsTab.entry.tsx
+++ b/src/BloomBrowserUI/collection/subscriptionSettingsTab.entry.tsx
@@ -1,4 +1,4 @@
 import { bootstrapReactComponent } from "../utils/entryPointBootstrap";
-import { SubscriptionSettings } from "./subscriptionSettingsTab";
+import { LegacySubscriptionSettings } from "./subscriptionSettingsTab";
 
-bootstrapReactComponent(SubscriptionSettings);
+bootstrapReactComponent(LegacySubscriptionSettings);
diff --git a/src/BloomBrowserUI/collection/subscriptionSettingsTab.tsx b/src/BloomBrowserUI/collection/subscriptionSettingsTab.tsx
index 183d4a322441..4b467b2c0f87 100644
--- a/src/BloomBrowserUI/collection/subscriptionSettingsTab.tsx
+++ b/src/BloomBrowserUI/collection/subscriptionSettingsTab.tsx
@@ -9,14 +9,34 @@ import { SubscriptionStatus } from "../collectionsTab/SubscriptionStatus";
 import { NoteBox } from "../react_components/boxes";
 import { SubscriptionControls } from "./subscriptionCodeControl";
 import { useSubscriptionInfo } from "./useSubscriptionInfo";
+import { get, postString } from "../utils/bloomApi";
+import { useMountEffect } from "../utils/useMountEffect";
 
-// This component implements the Bloom Subscription tab of the Settings dialog.
-export const SubscriptionSettings: React.FunctionComponent = () => {
-    const { subscriptionCodeIntegrity, haveData } = useSubscriptionInfo();
+// This component implements the Bloom Subscription tab of the WinForms Settings dialog. (The React
+// Collection Settings dialog has its own page, settingsPages/SubscriptionPage.tsx.) The code being
+// typed lives in C#, which that dialog saves on OK, so each change is posted to it.
+export const LegacySubscriptionSettings: React.FunctionComponent = () => {
+    const [code, setCode] = React.useState<string>();
+    // This effect fetches, once, the code the WinForms dialog is editing. A reply that arrives
+    // after the tab has gone is dropped.
+    useMountEffect(() => {
+        let isCurrent = true;
+        get("settings/subscriptionCode", (result) => {
+            if (isCurrent) setCode(result.data);
+        });
+        return () => {
+            isCurrent = false;
+        };
+    });
+    const { subscriptionCodeIntegrity, haveData } = useSubscriptionInfo(code);
 
-    if (!haveData) {
+    if (code === undefined || !haveData) {
         return null;
     }
+    const changeCode = (newCode: string) => {
+        postString("settings/subscriptionCode", newCode);
+        setCode(newCode);
+    };
 
     return (
         <div
@@ -48,9 +68,9 @@ export const SubscriptionSettings: React.FunctionComponent = () => {
                     Please contact [%0](%1) to purchase your subscription code.
                 </Markdown>
 
-                <SubscriptionControls />
+                <SubscriptionControls code={code} onCodeChange={changeCode} />
                 <br />
-                <SubscriptionStatus minimalUI />
+                <SubscriptionStatus minimalUI code={code} />
                 {subscriptionCodeIntegrity === "none" && (
                     <NoteBox
                         css={css`
@@ -80,4 +100,4 @@ export const SubscriptionSettings: React.FunctionComponent = () => {
     );
 };
 
-WireUpForWinforms(() => <SubscriptionSettings />);
+WireUpForWinforms(() => <LegacySubscriptionSettings />);
diff --git a/src/BloomBrowserUI/collection/useSubscriptionInfo.ts b/src/BloomBrowserUI/collection/useSubscriptionInfo.ts
index 0873a453f8de..de0657ccb91c 100644
--- a/src/BloomBrowserUI/collection/useSubscriptionInfo.ts
+++ b/src/BloomBrowserUI/collection/useSubscriptionInfo.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { get } from "../utils/bloomApi";
 import { useL10n2 } from "../react_components/l10nHooks";
 
@@ -20,9 +20,10 @@ interface SubscriptionData {
     EditingBlorgBook: boolean;
 }
 
-// This hook supplies information about the Subscription as it is in the Collection Settings Dialog.
-// It automatically refreshes the values when it anything raises the "subscriptionCodeChanged" event.
-export const useSubscriptionInfo = () => {
+// This hook supplies information about a subscription. Given a code, it describes that code, and
+// asks again whenever the code changes; the Collection Settings dialogs use this for the code being
+// typed. Without one, it describes the collection's subscription.
+export const useSubscriptionInfo = (code?: string) => {
     const [subscriptionData, setSubscriptionData] = useState<SubscriptionData>({
         Code: "",
         Tier: "",
@@ -35,33 +36,24 @@ export const useSubscriptionInfo = () => {
     });
     const [haveData, setHaveData] = useState(false);
 
-    // This is called once initially, then each time the user types in the subscription code field or does a paste
-    const querySubscriptionInfo = useCallback(() => {
-        get("settings/subscription", (result) => {
-            setSubscriptionData(result.data);
-            setHaveData(true);
-        });
-    }, [setSubscriptionData]);
-
-    // refresh when the subscription code changes
+    // This effect fetches from Bloom: once, then again for each change of the code (each keystroke
+    // or paste). An answer that arrives after a newer question was asked is dropped.
     useEffect(() => {
-        document.addEventListener(
-            "subscriptionCodeChanged",
-            querySubscriptionInfo,
+        let isCurrent = true;
+        get(
+            code === undefined
+                ? "settings/subscription"
+                : `settings/subscription?code=${encodeURIComponent(code)}`,
+            (result) => {
+                if (!isCurrent) return;
+                setSubscriptionData(result.data);
+                setHaveData(true);
+            },
         );
-
         return () => {
-            document.removeEventListener(
-                "subscriptionCodeChanged",
-                querySubscriptionInfo,
-            );
+            isCurrent = false;
         };
-    }, [querySubscriptionInfo]);
-
-    // get initial info once at startup
-    useEffect(() => {
-        querySubscriptionInfo();
-    }, [querySubscriptionInfo]);
+    }, [code]);
 
     return {
         code: subscriptionData.Code,
diff --git a/src/BloomBrowserUI/collectionsTab/SubscriptionStatus.tsx b/src/BloomBrowserUI/collectionsTab/SubscriptionStatus.tsx
index 2b2f3110dfc7..c499e8d1cff5 100644
--- a/src/BloomBrowserUI/collectionsTab/SubscriptionStatus.tsx
+++ b/src/BloomBrowserUI/collectionsTab/SubscriptionStatus.tsx
@@ -19,6 +19,8 @@ import { useIsTeamCollection } from "../teamCollection/teamCollectionApi";
 
 export const SubscriptionStatus: React.FunctionComponent<{
     minimalUI?: boolean;
+    // The code to describe instead of the one Bloom knows (see useSubscriptionInfo).
+    code?: string;
 }> = (props) => {
     const deprecatedBrandingsExpiryDateAsYYYYMMDD = useApiString(
         "settings/deprecatedBrandingsExpiryDate",
@@ -29,7 +31,7 @@ export const SubscriptionStatus: React.FunctionComponent<{
         expiryDateStringAsYYYYMMDD,
         subscriptionDescriptor,
         haveData,
-    } = useSubscriptionInfo();
+    } = useSubscriptionInfo(props.code);
 
     let descriptorToShow = "";
     let subscriptionTier: SubscriptionTier = "Basic"; // default value
diff --git a/src/BloomBrowserUI/react_components/featureStatus.ts b/src/BloomBrowserUI/react_components/featureStatus.ts
index 2b624e3eaf4d..d93ee865c995 100644
--- a/src/BloomBrowserUI/react_components/featureStatus.ts
+++ b/src/BloomBrowserUI/react_components/featureStatus.ts
@@ -1,8 +1,9 @@
 // See also: the backend version of this in FeatureStatus.cs
 
 import { useMemo } from "react";
-import { post, useApiObject, get } from "../utils/bloomApi";
+import { useApiObject, get } from "../utils/bloomApi";
 import { useL10n2 } from "./l10nHooks";
+import { getWorkspaceBundleExports } from "../bookEdit/js/workspaceFrames";
 
 // NB: this must match c# enum SubscriptionTier in Subscription.cs
 export type SubscriptionTier =
@@ -58,8 +59,11 @@ export function useGetFeatureStatus(
     return featureName ? featureStatus : undefined;
 }
 
+// Opens the Collection Settings dialog on its Subscription page. Every subscription badge and gated
+// command calls this. The dialog lives in the workspace's top document, which an iframe (the
+// toolbox, the page) reaches through the workspace bundle.
 export function openBloomSubscriptionSettings() {
-    post("common/showSettingsDialog?tab=subscription");
+    getWorkspaceBundleExports().showCollectionSettingsDialog("subscription");
 }
 
 // Use this when you just want a minimal label type message, not a fully informative sentence.
diff --git a/src/BloomBrowserUI/react_components/localizableMenuItem.tsx b/src/BloomBrowserUI/react_components/localizableMenuItem.tsx
index 015bd159fd63..8c25ddbb71f6 100644
--- a/src/BloomBrowserUI/react_components/localizableMenuItem.tsx
+++ b/src/BloomBrowserUI/react_components/localizableMenuItem.tsx
@@ -33,11 +33,12 @@ const NestedMenuItem = NestedMenuItemRaw as React.ComponentType<
 import CheckIcon from "@mui/icons-material/Check";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import { getBoolean, post, postBoolean } from "../utils/bloomApi";
+import { getBoolean, postBoolean } from "../utils/bloomApi";
 import { kBloomDisabledOpacity } from "../utils/colorUtils";
 import { kUiFontStack } from "../bloomMaterialUITheme";
 import { Variant } from "@mui/material/styles/createTypography";
 import {
+    openBloomSubscriptionSettings,
     useGetFeatureStatus,
     useGetFeatureAvailabilityMessage,
 } from "./featureStatus";
@@ -230,10 +231,9 @@ export const LocalizableMenuItem: React.FunctionComponent<
     const localizedSubLabel = useL10n("", props.subLabelL10nId ?? null);
     const subLabel =
         props.subLabel ?? props.generatedSubLabel ?? localizedSubLabel;
-    const openSubscriptionSettings = () =>
-        post("common/showSettingsDialog?tab=subscription");
-
-    const menuClickHandler = enabled ? props.onClick : openSubscriptionSettings;
+    const menuClickHandler = enabled
+        ? props.onClick
+        : openBloomSubscriptionSettings;
 
     // The "div" wrapper is necessary to get the tooltip to work on a disabled MenuItem.
     return (
diff --git a/src/BloomE2E/AUTOMATION-DEBT.md b/src/BloomE2E/AUTOMATION-DEBT.md
index 4619533db8d3..db75e3e0b32d 100644
--- a/src/BloomE2E/AUTOMATION-DEBT.md
+++ b/src/BloomE2E/AUTOMATION-DEBT.md
@@ -178,6 +178,18 @@ seen again 2026-10-06 (`collection-settings-advanced.spec.ts`, BL-16737): once i
 of that file, and this time *after* its first test had passed, so a worker can also die between
 tests, not only at startup. The next five runs of the same file were green.
 
+seen again 2026-10-20 (`collection-settings-subscription.spec.ts`, BL-16734), and this time it
+followed one test: its first test, which makes a book from Basic Book and right-clicks it on the
+Collections tab, crashed its worker in about one run in ten (four times in some thirty runs, alone
+or with the rest of the file), always reported at 0ms. Run on its own eight times each, the same
+file's cancel test (no book, never leaves the Collections tab) and
+`collection-settings-bloom-library.spec.ts` never crashed. With `DEBUG=pw:*` the book test passed
+eight runs in a row, so the extra logging hides it, and `NODE_OPTIONS=--report-on-fatalerror`
+wrote no report: the worker dies by a fail-fast that skips Node's own reporting. Later the same
+day it struck `collection-settings-bloom-library.spec.ts`'s first test, which makes no book and
+had passed eight times alone, so making a book is not the trigger. The next thing to try is a
+Windows crash dump of the worker (WER LocalDumps for node.exe needs an administrator).
+
 ## An api that captures CollectionSettings.Subscription cannot see a subscription change
 
 `FeatureStatusApi` used to snapshot `collectionSettings.Subscription` in its constructor, so
diff --git a/src/BloomE2E/README.md b/src/BloomE2E/README.md
index b5a7be79d253..b58c63368558 100644
--- a/src/BloomE2E/README.md
+++ b/src/BloomE2E/README.md
@@ -143,7 +143,8 @@ real bug in the code under test; read the message and fix it rather than working
   dialog it opens: `openFormatDialog`, `clickOutsideFormatDialog`, `dragFormatDialog`,
   `getFormatDialogPlacement`, and the scrolling and zooming that put the gear at the edge of the
   screen.
-- `helpers/collection.ts` — `selectBook`, `waitForCollectionReady`.
+- `helpers/collection.ts` — `selectBook`, `waitForCollectionReady`, and the selected book's
+  right-click menu (`chooseFromSelectedBookMenu`, `closeBookMenu`).
 - `helpers/bookMaking.ts` — make a book, add pages, type into it, read its pages.
 - `helpers/addPageDialog.ts` — open, read, scroll and close the real Add Page dialog, and add a
   page through it. Tests that only need a page in their book call `addPage` instead.
@@ -166,8 +167,9 @@ real bug in the code under test; read the message and fix it rather than working
   subscription code and restart Bloom on them; `setBranding`; `getFeatureStatus`, the same
   answer the front end asks for before it shows a tier-gated control;
   `kEnterpriseSubscriptionCode` and its `kTestBookshelves`; and the new (React) Settings dialog:
-  open it, show a page, read and change its checkboxes, text boxes and drop-down lists, read its
-  subscription badge, and save, cancel or restart.
+  open it, show a page or read which one is showing, read and change its checkboxes, text boxes
+  and drop-down lists, read or click its subscription badge, read the Subscription page and type
+  a code on it, and save, cancel or restart.
 - `helpers/keys.ts` — `pressKey`, `pressKeyIn`, `typeWithKeys`: real key presses, for tests whose
   subject is the key. `typeInGroup` inserts text and raises no key events, so use it for
   everything else.
diff --git a/src/BloomE2E/helpers/collection.ts b/src/BloomE2E/helpers/collection.ts
index b2f6db743732..f5c7b191940e 100644
--- a/src/BloomE2E/helpers/collection.ts
+++ b/src/BloomE2E/helpers/collection.ts
@@ -7,6 +7,7 @@
 
 import { expect, type Page } from "@playwright/test";
 import { apiGet, apiPost } from "./api";
+import { realClick } from "./realClick";
 
 /**
  * Wait until the editable collection is loaded and its books can be enumerated. Switching to the
@@ -61,3 +62,52 @@ export async function selectBook(
             `&collection-id=${encodeURIComponent(collectionId)}`,
     );
 }
+
+/**
+ * Choose a command from the menu a person gets by right-clicking the selected book's tile on the
+ * Collections tab, which must be showing. `menuPath` is the menu's own words, one entry per level,
+ * e.g. ["More", "Export to Spreadsheet..."]. Clicking a command the subscription tier lacks opens
+ * the Subscription page of the Settings dialog instead of doing it. Fails naming what the menu
+ * offered when an entry is not there.
+ */
+export async function chooseFromSelectedBookMenu(
+    page: Page,
+    menuPath: string[],
+): Promise<void> {
+    await page
+        .locator(".bookButton.selected")
+        .click({ button: "right", timeout: 15000 });
+    for (const entry of menuPath) {
+        const items = page.getByRole("menuitem");
+        // Each level opens in answer to the click before, so wait for it to appear.
+        const item = items.filter({ hasText: entry }).last();
+        try {
+            await item.waitFor({ state: "visible", timeout: 15000 });
+        } catch {
+            const offered = (await items.allInnerTexts()).map((t) => t.trim());
+            throw new Error(
+                `The book menu has no "${entry}"; it offers: ${offered.join(", ")}.`,
+            );
+        }
+        await realClick(item);
+    }
+}
+
+/**
+ * Close the selected book's menu with Escape, as a person does, and wait until it has gone. A
+ * command the subscription tier lacks opens the Settings dialog but leaves this menu open behind
+ * it, and the menu's backdrop then takes every click aimed at the Collections tab.
+ */
+export async function closeBookMenu(page: Page): Promise<void> {
+    // The menu stays mounted when closed, so only showing entries count. Each Escape closes one
+    // level (the More submenu, then the menu).
+    const showingEntries = page.locator('[role="menuitem"]:visible');
+    await expect(
+        showingEntries.first(),
+        "there is no book menu open to close",
+    ).toBeVisible();
+    await expect(async () => {
+        await page.keyboard.press("Escape");
+        await expect(showingEntries).toHaveCount(0, { timeout: 1000 });
+    }, "the book menu did not close").toPass({ timeout: 10000 });
+}
diff --git a/src/BloomE2E/helpers/collectionSettings.ts b/src/BloomE2E/helpers/collectionSettings.ts
index 7f1a7aee71fe..bd3675df9e37 100644
--- a/src/BloomE2E/helpers/collectionSettings.ts
+++ b/src/BloomE2E/helpers/collectionSettings.ts
@@ -94,9 +94,10 @@ export async function restartWithCollectionSettings(
 
 /**
  * Put the collection under this branding, e.g. "Story-Producer-App", and bring the selected book up
- * to date with it. This stands for entering a subscription code in the Settings dialog, which a
- * test cannot do: the dialog is WinForms, and a real code carries a checksum. The e2e/setBranding
- * hook exists for exactly this.
+ * to date with it. This stands for entering that branding's subscription code on the Subscription
+ * page of the Settings dialog, which a test cannot do: a real code carries a checksum, and the
+ * only code tests may use is kEnterpriseSubscriptionCode. The e2e/setBranding hook exists for
+ * exactly this.
  *
  * The change lives in memory only. A restart puts the collection back under the branding its
  * .bloomCollection names.
@@ -237,6 +238,107 @@ export async function showCollectionSettingsPage(
     await expect(tab).toHaveAttribute("aria-selected", "true");
 }
 
+/**
+ * The name of the page the Collection Settings dialog is showing, e.g. "Subscription", or
+ * undefined while the dialog is not open. A test that expects some action to open the dialog on a
+ * page polls this.
+ */
+export async function getShowingCollectionSettingsPage(
+    page: Page,
+): Promise<string | undefined> {
+    const selected = collectionSettingsDialog(page).locator(
+        '[role="tab"][aria-selected="true"]',
+    );
+    if ((await selected.count()) !== 1) return undefined;
+    return (await selected.innerText()).trim();
+}
+
+/** What the Subscription page of the Collection Settings dialog shows. */
+export interface ISubscriptionPageState {
+    /** The text in the Subscription Code box. */
+    code: string;
+    /**
+     * The tier the code gives, e.g. "Enterprise", shown only for a valid, current code; otherwise
+     * undefined.
+     */
+    tier: string | undefined;
+    /** Whether the page invites the user to apply for a free community subscription. */
+    communityInvitation: boolean;
+}
+
+/** The Subscription Code box on the Subscription page of the dialog. */
+function subscriptionCodeBox(page: Page): Locator {
+    return collectionSettingsDialog(page).locator("#subscriptionCodeInput");
+}
+
+/**
+ * Read the Subscription page of the Collection Settings dialog, which must be showing. Bloom works
+ * out the tier from the code after the code changes, so poll this for a tier that is expected to
+ * appear.
+ */
+export async function getSubscriptionPage(
+    page: Page,
+): Promise<ISubscriptionPageState> {
+    const dialog = collectionSettingsDialog(page);
+    const box = subscriptionCodeBox(page);
+    await expect(
+        box,
+        "the Collection Settings dialog is not showing its Subscription page",
+    ).toHaveCount(1);
+    const tier = dialog.getByTestId("subscription-tier");
+    return {
+        code: await box.inputValue(),
+        tier:
+            (await tier.count()) === 1
+                ? (await tier.innerText()).trim()
+                : undefined,
+        communityInvitation:
+            (await dialog
+                .locator('a[href="https://bloomlibrary.org/subscriptions"]')
+                .count()) > 0,
+    };
+}
+
+/**
+ * Type a subscription code into the Subscription page of the Collection Settings dialog, replacing
+ * what the box held, as a person does by typing or pasting one. Returns once the box shows it.
+ * Nothing is saved until OK.
+ */
+export async function typeSubscriptionCode(
+    page: Page,
+    code: string,
+): Promise<void> {
+    const box = subscriptionCodeBox(page);
+    await box.fill(code);
+    await expect(box).toHaveValue(code);
+}
+
+/**
+ * The subscription code the collection's settings file holds, or undefined when it holds none.
+ * Read from the .bloomCollection on disk, which is where a save puts it.
+ */
+export function readSavedSubscriptionCode(
+    collectionDir: string,
+): string | undefined {
+    const settingsFile = fs
+        .readdirSync(collectionDir)
+        .find((name) => name.endsWith(".bloomCollection"));
+    if (!settingsFile)
+        throw new Error(`There is no .bloomCollection in ${collectionDir}.`);
+    const xml = fs.readFileSync(Path.join(collectionDir, settingsFile), "utf8");
+    return /<SubscriptionCode>([^<]+)<\/SubscriptionCode>/.exec(xml)?.[1];
+}
+
+/**
+ * Click the subscription badge on the showing page of the Collection Settings dialog, as a person
+ * does whose tier lacks the feature beside it. That asks Bloom to show the Subscription page.
+ */
+export async function clickCollectionSettingsSubscriptionBadge(
+    page: Page,
+): Promise<void> {
+    await realClick(collectionSettingsSubscriptionBadge(page));
+}
+
 /** The checkbox of the setting with this label on the showing page of the dialog. */
 function collectionSettingsCheckbox(page: Page, label: string): Locator {
     // Config-R puts the setting's label on the element that wraps its checkbox.
@@ -456,6 +558,13 @@ export async function chooseCollectionSettingsListChoice(
         .toBe(choice);
 }
 
+/** The subscription badge on the showing page of the dialog: its icon and its words. */
+function collectionSettingsSubscriptionBadge(page: Page): Locator {
+    return collectionSettingsDialog(page)
+        .locator('img[src*="bloom-enterprise-badge"]')
+        .locator("xpath=..");
+}
+
 /**
  * What the subscription badge on the showing page of the Collection Settings dialog says:
  * "Available with your Bloom Subscription" when the collection's tier includes the feature, or
@@ -465,9 +574,7 @@ export async function chooseCollectionSettingsListChoice(
 export async function getCollectionSettingsSubscriptionBadge(
     page: Page,
 ): Promise<string> {
-    const badge = collectionSettingsDialog(page)
-        .locator('img[src*="bloom-enterprise-badge"]')
-        .locator("xpath=..");
+    const badge = collectionSettingsSubscriptionBadge(page);
     await expect(
         badge,
         "the showing Collection Settings page has no subscription badge",
diff --git a/src/BloomE2E/tests/collection-settings-subscription.spec.ts b/src/BloomE2E/tests/collection-settings-subscription.spec.ts
new file mode 100644
index 000000000000..74eda4d25842
--- /dev/null
+++ b/src/BloomE2E/tests/collection-settings-subscription.spec.ts
@@ -0,0 +1,150 @@
+// Tests for the Subscription page of the new (React) Collection Settings dialog: a person in a
+// collection without a subscription is sent there by the subscription badges, from inside the
+// dialog and from elsewhere in Bloom; a code typed there and cancelled is forgotten; and a code
+// typed there and saved puts the collection on its tier once Bloom reopens it.
+//
+// The tests share one Bloom and one collection, and run in order: the last one gives the
+// collection a subscription.
+
+import { expect, test } from "../fixtures/bloomTest";
+import { makeBookFromTemplate } from "../helpers/bookMaking";
+import {
+    chooseFromSelectedBookMenu,
+    closeBookMenu,
+} from "../helpers/collection";
+import {
+    cancelCollectionSettings,
+    clickCollectionSettingsSubscriptionBadge,
+    getCollectionSettingsOkLabel,
+    getFeatureStatus,
+    getShowingCollectionSettingsPage,
+    getSubscriptionPage,
+    kEnterpriseSubscriptionCode,
+    openCollectionSettings,
+    readSavedSubscriptionCode,
+    restartFromCollectionSettings,
+    showCollectionSettingsPage,
+    typeSubscriptionCode,
+} from "../helpers/collectionSettings";
+import { switchTab } from "../helpers/workspace";
+
+test.use({
+    collectionSpec: { name: "subscription-settings", languages: ["en"] },
+});
+
+test.describe.configure({ mode: "serial" });
+
+// What the Subscription page shows a collection without a subscription.
+const kNoSubscription = {
+    code: "",
+    tier: undefined,
+    communityInvitation: true,
+};
+
+test("a gated command in a collection without a subscription opens the Subscription page [Test Case ID 849]", async ({
+    page,
+}) => {
+    await makeBookFromTemplate(page, "Basic Book");
+    await switchTab(page, "collection");
+    expect(
+        (await getFeatureStatus(page, "Spreadsheet")).enabled,
+        "Sanity check: without a subscription, export to a spreadsheet should be unavailable",
+    ).toBe(false);
+
+    await chooseFromSelectedBookMenu(page, ["More", "Export to Spreadsheet"]);
+
+    await expect
+        .poll(() => getShowingCollectionSettingsPage(page), {
+            message: "the dialog should have opened on its Subscription page",
+            timeout: 30000,
+        })
+        .toBe("Subscription");
+    expect(await getSubscriptionPage(page)).toEqual(kNoSubscription);
+    await cancelCollectionSettings(page);
+    // A gated command leaves the book menu open behind the dialog (it always has; the old dialog
+    // did the same), and the next test needs the Collections tab clickable.
+    await closeBookMenu(page);
+});
+
+test("a subscription badge inside the dialog takes it to the Subscription page [Test Case ID 849]", async ({
+    page,
+}) => {
+    await openCollectionSettings(page);
+    await showCollectionSettingsPage(page, "Bloom Library");
+
+    await clickCollectionSettingsSubscriptionBadge(page);
+
+    await expect
+        .poll(() => getShowingCollectionSettingsPage(page), {
+            message:
+                "the badge should have switched the open dialog to its Subscription page",
+            timeout: 30000,
+        })
+        .toBe("Subscription");
+    await cancelCollectionSettings(page);
+});
+
+test("a code typed on the Subscription page and cancelled is not saved [Test Case ID 849]", async ({
+    page,
+    bloomApp,
+}) => {
+    await openCollectionSettings(page);
+    await showCollectionSettingsPage(page, "Subscription");
+
+    await typeSubscriptionCode(page, kEnterpriseSubscriptionCode);
+    // The page describes the code before it is saved.
+    await expect
+        .poll(async () => (await getSubscriptionPage(page)).tier)
+        .toBe("Enterprise");
+    await cancelCollectionSettings(page);
+
+    expect(readSavedSubscriptionCode(bloomApp.collectionDir)).toBeUndefined();
+    await openCollectionSettings(page);
+    await showCollectionSettingsPage(page, "Subscription");
+    expect(await getSubscriptionPage(page)).toEqual(kNoSubscription);
+    await cancelCollectionSettings(page);
+});
+
+test("entering a subscription code saves it and reopens the collection on its tier [Test Case ID 849]", async ({
+    page,
+    bloomApp,
+}) => {
+    await openCollectionSettings(page);
+    await showCollectionSettingsPage(page, "Subscription");
+    expect(await getSubscriptionPage(page)).toEqual(kNoSubscription);
+    expect(await getCollectionSettingsOkLabel(page)).toBe("OK");
+
+    await typeSubscriptionCode(page, kEnterpriseSubscriptionCode);
+    await expect
+        .poll(() => getSubscriptionPage(page), {
+            message:
+                "the page should show the code's tier and drop the invitation",
+        })
+        .toEqual({
+            code: kEnterpriseSubscriptionCode,
+            tier: "Enterprise",
+            communityInvitation: false,
+        });
+    // The branding, and so every book, comes from the code, so a new one needs a restart.
+    expect(await getCollectionSettingsOkLabel(page)).toBe("Restart");
+
+    const reopened = await restartFromCollectionSettings(bloomApp);
+
+    expect(readSavedSubscriptionCode(bloomApp.collectionDir)).toBe(
+        kEnterpriseSubscriptionCode,
+    );
+    expect(
+        (await getFeatureStatus(reopened, "Spreadsheet")).enabled,
+        "the reopened collection should have the code's tier",
+    ).toBe(true);
+    await openCollectionSettings(reopened);
+    await showCollectionSettingsPage(reopened, "Subscription");
+    await expect
+        .poll(() => getSubscriptionPage(reopened))
+        .toEqual({
+            code: kEnterpriseSubscriptionCode,
+            tier: "Enterprise",
+            communityInvitation: false,
+        });
+    await cancelCollectionSettings(reopened);
+});
diff --git a/src/BloomExe/Collection/CollectionSettingsUpdater.cs b/src/BloomExe/Collection/CollectionSettingsUpdater.cs
index b2bfec7021dd..8349ae0ba462 100644
--- a/src/BloomExe/Collection/CollectionSettingsUpdater.cs
+++ b/src/BloomExe/Collection/CollectionSettingsUpdater.cs
@@ -37,16 +37,26 @@ Action<string> queueRenameOfCollection
             // rename) before anything is saved, so if a save below fails, the in-memory settings
             // are left partly changed. We accept that, as the WinForms OK handler always has: the
             // failure is reported, and the collection is read from disk again when it reopens.
+            var values = new CollectionSettingsValues(settings, queueRenameOfCollection);
             using (var reader = postedValues.CreateReader())
             {
                 JsonSerializer
                     .Create(CollectionSettingsApi.kCamelCaseSettings)
-                    .Populate(
-                        reader,
-                        new CollectionSettingsValues(settings, queueRenameOfCollection)
-                    );
+                    .Populate(reader, values);
             }
 
+            // The posted bookshelf is already in settings.DefaultBookshelf, which is what a null
+            // newBookshelf means. This runs on every save, even with the subscription unchanged:
+            // it is what keeps an expired subscription's bookshelf in the file (BL-15056). It
+            // comes before the xmatter check because the new subscription's branding may
+            // specify the pack.
+            var clearDefaultBookshelfAfterSaving = ApplySubscriptionAndBookshelf(
+                GetChangedSubscription(settings, values.Subscription.Code),
+                null,
+                settings,
+                currentCollectionIsTeamCollection
+            );
+
             // A pack that is no longer available, or one the branding overrides, is replaced.
             settings.XMatterPackName = xmatterPackFinder.GetValidXmatter(
                 settings.GetXMatterPackNameSpecifiedByBrandingOrNull(),
@@ -55,23 +65,26 @@ Action<string> queueRenameOfCollection
 
             Settings.Default.Save(); // AutoUpdate is a user-level setting
 
-            // The dialog does not post the administrators or the subscription yet (their tab cards
-            // will), so these rules run with "unchanged". The posted bookshelf is already in
-            // settings.DefaultBookshelf, which is what a null newBookshelf means. That still
-            // matters: it is what keeps an expired subscription's bookshelf in the file (BL-15056).
+            // The dialog does not post the administrators yet (their tab card will), so this
+            // runs with "unchanged".
             ApplyAdministrators(null, settings, currentCollectionIsTeamCollection);
-            var clearDefaultBookshelfAfterSaving = ApplySubscriptionAndBookshelf(
-                null,
-                null,
-                settings,
-                currentCollectionIsTeamCollection
-            );
             settings.Save();
 
             if (clearDefaultBookshelfAfterSaving)
                 settings.DefaultBookshelf = "";
         }
 
+        /// <summary>
+        /// The subscription a code the user entered stands for, or null if it is the code the
+        /// collection already has. Keeping the collection's own object for an unchanged code
+        /// matters: it can carry more than the code says (a book downloaded for editing has a
+        /// redacted code, and is allowed its branding even when expired).
+        /// </summary>
+        public static Subscription GetChangedSubscription(CollectionSettings settings, string code)
+        {
+            return settings.Subscription.IsDifferent(code) ? new Subscription(code) : null;
+        }
+
         /// <summary>
         /// Writes the administrators of a Team Collection.
         /// </summary>
diff --git a/src/BloomExe/Workspace/WorkspaceView.cs b/src/BloomExe/Workspace/WorkspaceView.cs
index 5b67976495db..1219b8b59857 100644
--- a/src/BloomExe/Workspace/WorkspaceView.cs
+++ b/src/BloomExe/Workspace/WorkspaceView.cs
@@ -1545,6 +1545,18 @@ public void OpenLegacySettingsDialog(
             }
         }
 
+        /// <summary>
+        /// Opens the React Collection Settings dialog (rendered by the workspace's App), on the
+        /// page with the given key if there is one.
+        /// </summary>
+        public void OpenSettingsDialog(string pageKey = null)
+        {
+            dynamic dialogParameters = new DynamicJson();
+            if (pageKey != null)
+                dialogParameters.initialPageKey = pageKey;
+            _webSocketServer.LaunchDialog("CollectionSettingsDialog", dialogParameters);
+        }
+
         /// <summary>
         /// Closes the collection and opens it again, as the Settings dialog does when a change
         /// needs a restart.
@@ -1564,7 +1576,7 @@ public void CheckForInvalidBranding()
             StartupScreenManager.AddStartupAction(
                 () =>
                 {
-                    OpenLegacySettingsDialog("subscription", forFixingEnterpriseSubscription: true);
+                    OpenSettingsDialog("subscription");
                 },
                 shouldHideSplashScreen: true,
                 lowPriority: true
diff --git a/src/BloomExe/web/controllers/CollectionSettingsTypes.cs b/src/BloomExe/web/controllers/CollectionSettingsTypes.cs
index dc2e22293119..fa2ef368b32c 100644
--- a/src/BloomExe/web/controllers/CollectionSettingsTypes.cs
+++ b/src/BloomExe/web/controllers/CollectionSettingsTypes.cs
@@ -47,9 +47,9 @@ public class RequiresRestartAttribute : Attribute { }
     /// The editable settings, grouped by the page of the dialog that shows them. Most of them
     /// are a live view of a CollectionSettings: serializing reads the collection's values, and
     /// populating from the posted JSON writes them straight back, so a simple setting is spelled
-    /// out once here, as a property that reads and writes it. The languages are the exception;
-    /// see Languages. The subscription and the team collection administrators have endpoints of
-    /// their own and so are not here.
+    /// out once here, as a property that reads and writes it. The languages and the subscription
+    /// are the exceptions; see those properties. The team collection administrators have an
+    /// endpoint of their own and so are not here.
     /// </summary>
     public class CollectionSettingsValues
     {
@@ -63,6 +63,7 @@ public CollectionSettingsValues(
         )
         {
             _settings = settings;
+            Subscription = new SubscriptionValues { Code = settings.Subscription.Code ?? "" };
             FrontBackMatter = new FrontBackMatterValues(settings);
             BloomLibrary = new BloomLibraryValues(settings);
             Advanced = new AdvancedValues(settings, queueRenameOfCollection);
@@ -81,6 +82,14 @@ public LanguagesValues Languages
             set => CollectionSettingsUpdater.ApplyLanguages(value, _settings);
         }
 
+        /// <summary>
+        /// The subscription is not written as it is read, because its rules need the bookshelf
+        /// too: this is a copy of the collection's code, which populating overwrites with the
+        /// posted one, and CollectionSettingsUpdater.Apply hands it to ApplySubscriptionAndBookshelf
+        /// once all the values are in.
+        /// </summary>
+        public SubscriptionValues Subscription { get; }
+
         public FrontBackMatterValues FrontBackMatter { get; }
         public BloomLibraryValues BloomLibrary { get; }
         public AdvancedValues Advanced { get; }
@@ -291,6 +300,19 @@ public string District
         }
     }
 
+    /// <summary>
+    /// The Subscription page's value.
+    /// </summary>
+    public class SubscriptionValues
+    {
+        /// <summary>
+        /// The subscription code as the user typed it ("" for none). The branding, and so the
+        /// look of every book, comes from it.
+        /// </summary>
+        [RequiresRestart]
+        public string Code;
+    }
+
     /// <summary>
     /// The Bloom Library page's values.
     /// </summary>
diff --git a/src/BloomExe/web/controllers/CommonApi.cs b/src/BloomExe/web/controllers/CommonApi.cs
index 9c1619c1061e..ff16a64ec1ff 100644
--- a/src/BloomExe/web/controllers/CommonApi.cs
+++ b/src/BloomExe/web/controllers/CommonApi.cs
@@ -531,32 +531,20 @@ private void ReloadOnIdle(object sender, EventArgs e)
         }
 
         /// <summary>
-        /// The tab which should display first when the settings dialog opens.
-        /// </summary>
-        private string SettingsDialogTab;
-
-        /// <summary>
-        /// Handle showing the settings dialog, opening it to the desired tab.
+        /// Handle showing the settings dialog, opening it on the page named by "tab". The links in
+        /// the comic book templates' ReadMe files use this; subscription badges open the dialog in
+        /// the browser directly.
         /// </summary>
         /// <remarks>
         /// This is here instead of CollectionSettingsApi because we have easier access to
-        /// showing the dialog via the WorkspaceView object.  Starting the dialog on the idle
-        /// loop allows the full functionality without locking up the API.
+        /// showing the dialog via the WorkspaceView object.
         /// </remarks>
         private void HandleShowSettingsDialog(ApiRequest request)
         {
-            SettingsDialogTab = request.Parameters["tab"];
-            Application.Idle += ShowSettingsDialogOnIdle;
+            WorkspaceView.OpenSettingsDialog(request.Parameters["tab"]);
             request.PostSucceeded();
         }
 
-        private void ShowSettingsDialogOnIdle(object sender, EventArgs e)
-        {
-            Application.Idle -= ShowSettingsDialogOnIdle;
-            WorkspaceView.OpenLegacySettingsDialog(SettingsDialogTab);
-            SettingsDialogTab = null;
-        }
-
         private void HandleLogEvent(ApiRequest request)
         {
             var message = request.RequiredPostString();
diff --git a/src/BloomExe/web/controllers/SubscriptionSettingsEditorApi.cs b/src/BloomExe/web/controllers/SubscriptionSettingsEditorApi.cs
index 34bb68464eb2..51c44ff2bd62 100644
--- a/src/BloomExe/web/controllers/SubscriptionSettingsEditorApi.cs
+++ b/src/BloomExe/web/controllers/SubscriptionSettingsEditorApi.cs
@@ -40,22 +40,32 @@ public void RegisterWithApiHandler(BloomApiHandler apiHandler)
                 {
                     if (request.HttpMethod == HttpMethods.Get)
                     {
+                        // This describes the collection's subscription, or, given ?code=, the one
+                        // that code stands for (a Settings dialog asks about the code being typed).
+                        var code = request.GetParamOrNull("code");
+                        var subscription =
+                            code == null
+                                ? _collectionSettings.Subscription
+                                : CollectionSettingsUpdater.GetChangedSubscription(
+                                    _collectionSettings,
+                                    code
+                                ) ?? _collectionSettings.Subscription;
                         var subscriptionData = new
                         {
-                            Code = _subscription.Code ?? "",
-                            Tier = _subscription.Tier.ToString(),
-                            Summary = BrandingSettings.GetSummaryHtml(_subscription.Descriptor),
-                            Expiration = _subscription.ExpirationDate.ToString(
+                            Code = subscription.Code ?? "",
+                            Tier = subscription.Tier.ToString(),
+                            Summary = BrandingSettings.GetSummaryHtml(subscription.Descriptor),
+                            Expiration = subscription.ExpirationDate.ToString(
                                 "yyyy-MM-dd",
                                 CultureInfo.InvariantCulture
                             ),
-                            CodeIntegrity = _subscription.GetIntegrityLabel(),
-                            SubscriptionDescriptor = _subscription.Descriptor,
+                            CodeIntegrity = subscription.GetIntegrityLabel(),
+                            SubscriptionDescriptor = subscription.Descriptor,
                             MissingBrandingFiles = (
-                                _subscription.Tier == SubscriptionTier.Enterprise
-                                && !BrandingProject.HaveFilesForBranding(_subscription.BrandingKey)
+                                subscription.Tier == SubscriptionTier.Enterprise
+                                && !BrandingProject.HaveFilesForBranding(subscription.BrandingKey)
                             ),
-                            EditingBlorgBook = _subscription.EditingBlorgBook,
+                            EditingBlorgBook = subscription.EditingBlorgBook,
                         };
 
                         request.ReplyWithJson(JsonConvert.SerializeObject(subscriptionData));
diff --git a/src/BloomTests/Collection/CollectionSettingsUpdaterTests.cs b/src/BloomTests/Collection/CollectionSettingsUpdaterTests.cs
index bf655bfd5069..4d40d4500153 100644
--- a/src/BloomTests/Collection/CollectionSettingsUpdaterTests.cs
+++ b/src/BloomTests/Collection/CollectionSettingsUpdaterTests.cs
@@ -365,6 +365,56 @@ public void Apply_ChangedBookshelf_SavedToTheFile()
             );
         }
 
+        [Test]
+        public void Apply_NewSubscriptionCode_SavedToTheFile()
+        {
+            const string kTestEnterpriseCode = "Test-727011-1339";
+            var settings = CreateCollectionSettings("ApplySavesSubscription");
+            var values = CurrentValuesJson(settings);
+            Assert.That(
+                (string)values["subscription"]["code"],
+                Is.Empty,
+                "Sanity check: a new collection should have no subscription code"
+            );
+            values["subscription"]["code"] = kTestEnterpriseCode;
+
+            Apply(values, settings);
+
+            Assert.That(settings.Subscription.Code, Is.EqualTo(kTestEnterpriseCode));
+            Assert.That(settings.Subscription.Tier, Is.EqualTo(SubscriptionTier.Enterprise));
+            Assert.That(
+                new CollectionSettings(settings.SettingsFilePath).Subscription.Code,
+                Is.EqualTo(kTestEnterpriseCode),
+                "Apply should have saved the new code to disk"
+            );
+        }
+
+        /// <summary>
+        /// A book downloaded from Bloom Library for editing gets its subscription with the right to
+        /// its branding even when expired, which the code alone does not say. Posting the same code
+        /// back must not replace that subscription with one made from the code.
+        /// </summary>
+        [Test]
+        public void Apply_UnchangedSubscriptionCode_KeepsTheCollectionsSubscription()
+        {
+            var settings = CreateCollectionSettings("ApplyKeepsSubscription");
+            var downloadedForEditing = Subscription.FromCollectionSettingsInfo(
+                "Test-Expired-005691-4935",
+                "Default",
+                editingABlorgBook: true
+            );
+            settings.Subscription = downloadedForEditing;
+            Assert.That(
+                new Subscription(downloadedForEditing.Code).EditingBlorgBook,
+                Is.False,
+                "Sanity check: a subscription made from the code alone should lose the editing right"
+            );
+
+            Apply(CurrentValuesJson(settings), settings);
+
+            Assert.That(settings.Subscription, Is.SameAs(downloadedForEditing));
+        }
+
         [Test]
         public void Apply_BookshelfSetToNone_RemovedFromTheFile()
         {
diff --git a/src/BloomTests/web/controllers/CollectionSettingsApiTests.cs b/src/BloomTests/web/controllers/CollectionSettingsApiTests.cs
index 9ce5c5ea3402..ac40bd7eb3fe 100644
--- a/src/BloomTests/web/controllers/CollectionSettingsApiTests.cs
+++ b/src/BloomTests/web/controllers/CollectionSettingsApiTests.cs
@@ -92,6 +92,7 @@ public void EveryRestartPath_ResolvesInFullyPopulatedValues()
             Assert.That(
                 restartPaths,
                 Has.Member("frontBackMatter.xmatter")
+                    .And.Member("subscription.code")
                     .And.Member("languages.language3.fontName")
                     .And.Member("languages.signLanguage.tag")
                     .And.Member("experimental." + ExperimentalFeatures.kTeamCollections)