From 93c6aea75b9529160a600fec364a4473771eeae9 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <chris@prereview.org>
Date: Mon, 13 Jan 2025 13:14:11 +0000
Subject: [PATCH] Separate rendering into a testable module

Refs #2173
---
 .../competing-interests-form.ts               | 202 +++++++++++++++++
 .../competing-interests-page/index.ts         | 206 +-----------------
 ...Desktop-Chrome-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...esktop-Firefox-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...ht-1-iPhone-11-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...Desktop-Chrome-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...esktop-Firefox-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...ng-1-iPhone-11-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...Desktop-Chrome-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...esktop-Firefox-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...ng-1-iPhone-11-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...Desktop-Chrome-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...esktop-Firefox-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...-high-contrast-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 ...rs-1-iPhone-11-Visual-Regression-linux.png |   3 +
 ...Visual-Regression-no-JavaScript--linux.png |   3 +
 .../write-review-competing-interests.spec.ts  |  83 +++++++
 43 files changed, 412 insertions(+), 199 deletions(-)
 create mode 100644 src/write-review/competing-interests-page/competing-interests-form.ts
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-linux.png
 create mode 100644 visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
 create mode 100644 visual-regression/write-review/write-review-competing-interests.spec.ts

diff --git a/src/write-review/competing-interests-page/competing-interests-form.ts b/src/write-review/competing-interests-page/competing-interests-form.ts
new file mode 100644
index 000000000..1f7cfd825
--- /dev/null
+++ b/src/write-review/competing-interests-page/competing-interests-form.ts
@@ -0,0 +1,202 @@
+import { format } from 'fp-ts-routing'
+import * as E from 'fp-ts/lib/Either.js'
+import { identity, pipe } from 'fp-ts/lib/function.js'
+import { StatusCodes } from 'http-status-codes'
+import { match, P } from 'ts-pattern'
+import { hasAnError, type MissingE } from '../../form.js'
+import { html, plainText, rawHtml } from '../../html.js'
+import { type SupportedLocale, translate } from '../../locales/index.js'
+import type { PreprintTitle } from '../../preprint.js'
+import { StreamlinePageResponse } from '../../response.js'
+import {
+  writeReviewAddAuthorsMatch,
+  writeReviewAuthorsMatch,
+  writeReviewCompetingInterestsMatch,
+} from '../../routes.js'
+import type { NonEmptyString } from '../../types/string.js'
+import { backNav, errorPrefix, errorSummary, saveAndContinueButton } from '../shared-elements.js'
+
+export interface CompetingInterestsForm {
+  readonly competingInterests: E.Either<MissingE, 'yes' | 'no' | undefined>
+  readonly competingInterestsDetails: E.Either<MissingE, NonEmptyString | undefined>
+}
+
+export function competingInterestsForm(
+  preprint: PreprintTitle,
+  form: CompetingInterestsForm,
+  locale: SupportedLocale,
+  moreAuthors?: 'yes' | 'yes-private' | 'no',
+) {
+  const error = hasAnError(form)
+  const otherAuthors = moreAuthors !== 'no'
+  const backMatch = moreAuthors === 'yes' ? writeReviewAddAuthorsMatch : writeReviewAuthorsMatch
+  const t = translate(locale)
+
+  return StreamlinePageResponse({
+    status: error ? StatusCodes.BAD_REQUEST : StatusCodes.OK,
+    title: pipe(
+      t('write-review', 'competingInterestsTitle')({ otherAuthors, preprintTitle: preprint.title.toString() }),
+      errorPrefix(locale, error),
+      plainText,
+    ),
+    nav: backNav(locale, format(backMatch.formatter, { id: preprint.id })),
+    main: html`
+      <form
+        method="post"
+        action="${format(writeReviewCompetingInterestsMatch.formatter, { id: preprint.id })}"
+        novalidate
+      >
+        ${error ? pipe(form, toErrorItems(locale, otherAuthors), errorSummary(locale)) : ''}
+
+        <div ${rawHtml(E.isLeft(form.competingInterests) ? 'class="error"' : '')}>
+          <conditional-inputs>
+            <fieldset
+              role="group"
+              aria-describedby="competing-interests-tip"
+              ${rawHtml(
+                E.isLeft(form.competingInterests)
+                  ? 'aria-invalid="true" aria-errormessage="competing-interests-error"'
+                  : '',
+              )}
+            >
+              <legend>
+                <h1>${t('write-review', 'doYouHaveCompetingInterests')({ otherAuthors })}</h1>
+              </legend>
+
+              <p id="competing-interests-tip" role="note">${t('write-review', 'whatIsCompetingInterest')()}</p>
+
+              <details>
+                <summary><span>${t('write-review', 'examples')()}</span></summary>
+
+                <div>
+                  <ul>
+                    <li>${t('write-review', 'conflictAuthorOfPreprint')()}</li>
+                    <li>${t('write-review', 'conflictPersonalRelationship')()}</li>
+                    <li>${t('write-review', 'conflictRivalOfAuthor')()}</li>
+                    <li>${t('write-review', 'conflictRecentlyWorkedTogether')()}</li>
+                    <li>${t('write-review', 'conflictCollaborateWithAuthor')()}</li>
+                    <li>${t('write-review', 'conflictPublishedTogether')()}</li>
+                    <li>${t('write-review', 'conflictHoldGrantTogether')()}</li>
+                  </ul>
+                </div>
+              </details>
+
+              ${E.isLeft(form.competingInterests)
+                ? html`
+                    <div class="error-message" id="competing-interests-error">
+                      <span class="visually-hidden">Error:</span>
+                      ${match(form.competingInterests.left)
+                        .with({ _tag: 'MissingE' }, () =>
+                          t('write-review', 'selectYesIfCompetingInterest')({ otherAuthors }),
+                        )
+                        .exhaustive()}
+                    </div>
+                  `
+                : ''}
+
+              <ol>
+                <li>
+                  <label>
+                    <input
+                      name="competingInterests"
+                      id="competing-interests-no"
+                      type="radio"
+                      value="no"
+                      ${match(form.competingInterests)
+                        .with({ right: 'no' }, () => 'checked')
+                        .otherwise(() => '')}
+                    />
+                    <span>${t('write-review', 'no')()}</span>
+                  </label>
+                </li>
+                <li>
+                  <label>
+                    <input
+                      name="competingInterests"
+                      type="radio"
+                      value="yes"
+                      aria-controls="competing-interests-details-control"
+                      ${match(form.competingInterests)
+                        .with({ right: 'yes' }, () => 'checked')
+                        .otherwise(() => '')}
+                    />
+                    <span>Yes</span>
+                  </label>
+                  <div class="conditional" id="competing-interests-details-control">
+                    <div ${rawHtml(E.isLeft(form.competingInterestsDetails) ? 'class="error"' : '')}>
+                      <label for="competing-interests-details" class="textarea"
+                        >${t('write-review', 'whatAreThey')()}</label
+                      >
+
+                      ${E.isLeft(form.competingInterestsDetails)
+                        ? html`
+                            <div class="error-message" id="competing-interests-details-error">
+                              <span class="visually-hidden">Error:</span>
+                              ${match(form.competingInterestsDetails.left)
+                                .with({ _tag: 'MissingE' }, () =>
+                                  t('write-review', 'competingInterestDetails')({ otherAuthors }),
+                                )
+                                .exhaustive()}
+                            </div>
+                          `
+                        : ''}
+
+                      <textarea
+                        name="competingInterestsDetails"
+                        id="competing-interests-details"
+                        rows="5"
+                        ${rawHtml(
+                          E.isLeft(form.competingInterestsDetails)
+                            ? 'aria-invalid="true" aria-errormessage="competing-interests-details-error"'
+                            : '',
+                        )}
+                      >
+${match(form.competingInterestsDetails)
+                          .with({ right: P.select(P.string) }, identity)
+                          .otherwise(() => '')}</textarea
+                      >
+                    </div>
+                  </div>
+                </li>
+              </ol>
+            </fieldset>
+          </conditional-inputs>
+        </div>
+
+        ${saveAndContinueButton(locale)}
+      </form>
+    `,
+    canonical: format(writeReviewCompetingInterestsMatch.formatter, { id: preprint.id }),
+    skipToLabel: 'form',
+    js: error ? ['conditional-inputs.js', 'error-summary.js'] : ['conditional-inputs.js'],
+  })
+}
+
+const toErrorItems = (locale: SupportedLocale, otherAuthors: boolean) => (form: CompetingInterestsForm) => html`
+  ${E.isLeft(form.competingInterests)
+    ? html`
+        <li>
+          <a href="#competing-interests-no">
+            ${match(form.competingInterests.left)
+              .with({ _tag: 'MissingE' }, () =>
+                translate(locale, 'write-review', 'selectYesIfCompetingInterest')({ otherAuthors }),
+              )
+              .exhaustive()}
+          </a>
+        </li>
+      `
+    : ''}
+  ${E.isLeft(form.competingInterestsDetails)
+    ? html`
+        <li>
+          <a href="#competing-interests-details">
+            ${match(form.competingInterestsDetails.left)
+              .with({ _tag: 'MissingE' }, () =>
+                translate(locale, 'write-review', 'competingInterestDetails')({ otherAuthors }),
+              )
+              .exhaustive()}
+          </a>
+        </li>
+      `
+    : ''}
+`
diff --git a/src/write-review/competing-interests-page/index.ts b/src/write-review/competing-interests-page/index.ts
index 8a60c509e..724c4a44d 100644
--- a/src/write-review/competing-interests-page/index.ts
+++ b/src/write-review/competing-interests-page/index.ts
@@ -2,28 +2,21 @@ import { format } from 'fp-ts-routing'
 import * as E from 'fp-ts/lib/Either.js'
 import * as RT from 'fp-ts/lib/ReaderTask.js'
 import * as RTE from 'fp-ts/lib/ReaderTaskEither.js'
-import { identity, pipe } from 'fp-ts/lib/function.js'
-import { StatusCodes } from 'http-status-codes'
+import { pipe } from 'fp-ts/lib/function.js'
 import * as D from 'io-ts/lib/Decoder.js'
 import { get } from 'spectacles-ts'
 import { P, match } from 'ts-pattern'
-import { type MissingE, hasAnError, missingE } from '../../form.js'
-import { html, plainText, rawHtml } from '../../html.js'
+import { missingE } from '../../form.js'
 import { havingProblemsPage, pageNotFound } from '../../http-error.js'
-import { DefaultLocale, type SupportedLocale, translate } from '../../locales/index.js'
+import { DefaultLocale, type SupportedLocale } from '../../locales/index.js'
 import { type GetPreprintTitleEnv, type PreprintTitle, getPreprintTitle } from '../../preprint.js'
-import { type PageResponse, RedirectResponse, StreamlinePageResponse } from '../../response.js'
-import {
-  writeReviewAddAuthorsMatch,
-  writeReviewAuthorsMatch,
-  writeReviewCompetingInterestsMatch,
-  writeReviewMatch,
-} from '../../routes.js'
+import { type PageResponse, RedirectResponse, type StreamlinePageResponse } from '../../response.js'
+import { writeReviewMatch } from '../../routes.js'
 import type { IndeterminatePreprintId } from '../../types/preprint-id.js'
-import { type NonEmptyString, NonEmptyStringC } from '../../types/string.js'
+import { NonEmptyStringC } from '../../types/string.js'
 import type { User } from '../../user.js'
 import { type Form, type FormStoreEnv, getForm, nextFormMatch, saveForm, updateForm } from '../form.js'
-import { backNav, errorPrefix, errorSummary, saveAndContinueButton } from '../shared-elements.js'
+import { type CompetingInterestsForm, competingInterestsForm } from './competing-interests-form.js'
 
 export const writeReviewCompetingInterests = ({
   body,
@@ -148,188 +141,3 @@ const CompetingInterestsDetailsFieldD = pipe(
   D.struct({ competingInterestsDetails: NonEmptyStringC }),
   D.map(get('competingInterestsDetails')),
 )
-
-interface CompetingInterestsForm {
-  readonly competingInterests: E.Either<MissingE, 'yes' | 'no' | undefined>
-  readonly competingInterestsDetails: E.Either<MissingE, NonEmptyString | undefined>
-}
-
-function competingInterestsForm(
-  preprint: PreprintTitle,
-  form: CompetingInterestsForm,
-  locale: SupportedLocale,
-  moreAuthors?: 'yes' | 'yes-private' | 'no',
-) {
-  const error = hasAnError(form)
-  const otherAuthors = moreAuthors !== 'no'
-  const backMatch = moreAuthors === 'yes' ? writeReviewAddAuthorsMatch : writeReviewAuthorsMatch
-  const t = translate(locale)
-
-  return StreamlinePageResponse({
-    status: error ? StatusCodes.BAD_REQUEST : StatusCodes.OK,
-    title: pipe(
-      t('write-review', 'competingInterestsTitle')({ otherAuthors, preprintTitle: preprint.title.toString() }),
-      errorPrefix(locale, error),
-      plainText,
-    ),
-    nav: backNav(locale, format(backMatch.formatter, { id: preprint.id })),
-    main: html`
-      <form
-        method="post"
-        action="${format(writeReviewCompetingInterestsMatch.formatter, { id: preprint.id })}"
-        novalidate
-      >
-        ${error ? pipe(form, toErrorItems(locale, otherAuthors), errorSummary(locale)) : ''}
-
-        <div ${rawHtml(E.isLeft(form.competingInterests) ? 'class="error"' : '')}>
-          <conditional-inputs>
-            <fieldset
-              role="group"
-              aria-describedby="competing-interests-tip"
-              ${rawHtml(
-                E.isLeft(form.competingInterests)
-                  ? 'aria-invalid="true" aria-errormessage="competing-interests-error"'
-                  : '',
-              )}
-            >
-              <legend>
-                <h1>${t('write-review', 'doYouHaveCompetingInterests')({ otherAuthors })}</h1>
-              </legend>
-
-              <p id="competing-interests-tip" role="note">${t('write-review', 'whatIsCompetingInterest')()}</p>
-
-              <details>
-                <summary><span>${t('write-review', 'examples')()}</span></summary>
-
-                <div>
-                  <ul>
-                    <li>${t('write-review', 'conflictAuthorOfPreprint')()}</li>
-                    <li>${t('write-review', 'conflictPersonalRelationship')()}</li>
-                    <li>${t('write-review', 'conflictRivalOfAuthor')()}</li>
-                    <li>${t('write-review', 'conflictRecentlyWorkedTogether')()}</li>
-                    <li>${t('write-review', 'conflictCollaborateWithAuthor')()}</li>
-                    <li>${t('write-review', 'conflictPublishedTogether')()}</li>
-                    <li>${t('write-review', 'conflictHoldGrantTogether')()}</li>
-                  </ul>
-                </div>
-              </details>
-
-              ${E.isLeft(form.competingInterests)
-                ? html`
-                    <div class="error-message" id="competing-interests-error">
-                      <span class="visually-hidden">Error:</span>
-                      ${match(form.competingInterests.left)
-                        .with({ _tag: 'MissingE' }, () =>
-                          t('write-review', 'selectYesIfCompetingInterest')({ otherAuthors }),
-                        )
-                        .exhaustive()}
-                    </div>
-                  `
-                : ''}
-
-              <ol>
-                <li>
-                  <label>
-                    <input
-                      name="competingInterests"
-                      id="competing-interests-no"
-                      type="radio"
-                      value="no"
-                      ${match(form.competingInterests)
-                        .with({ right: 'no' }, () => 'checked')
-                        .otherwise(() => '')}
-                    />
-                    <span>${t('write-review', 'no')()}</span>
-                  </label>
-                </li>
-                <li>
-                  <label>
-                    <input
-                      name="competingInterests"
-                      type="radio"
-                      value="yes"
-                      aria-controls="competing-interests-details-control"
-                      ${match(form.competingInterests)
-                        .with({ right: 'yes' }, () => 'checked')
-                        .otherwise(() => '')}
-                    />
-                    <span>Yes</span>
-                  </label>
-                  <div class="conditional" id="competing-interests-details-control">
-                    <div ${rawHtml(E.isLeft(form.competingInterestsDetails) ? 'class="error"' : '')}>
-                      <label for="competing-interests-details" class="textarea"
-                        >${t('write-review', 'whatAreThey')()}</label
-                      >
-
-                      ${E.isLeft(form.competingInterestsDetails)
-                        ? html`
-                            <div class="error-message" id="competing-interests-details-error">
-                              <span class="visually-hidden">Error:</span>
-                              ${match(form.competingInterestsDetails.left)
-                                .with({ _tag: 'MissingE' }, () =>
-                                  t('write-review', 'competingInterestDetails')({ otherAuthors }),
-                                )
-                                .exhaustive()}
-                            </div>
-                          `
-                        : ''}
-
-                      <textarea
-                        name="competingInterestsDetails"
-                        id="competing-interests-details"
-                        rows="5"
-                        ${rawHtml(
-                          E.isLeft(form.competingInterestsDetails)
-                            ? 'aria-invalid="true" aria-errormessage="competing-interests-details-error"'
-                            : '',
-                        )}
-                      >
-${match(form.competingInterestsDetails)
-                          .with({ right: P.select(P.string) }, identity)
-                          .otherwise(() => '')}</textarea
-                      >
-                    </div>
-                  </div>
-                </li>
-              </ol>
-            </fieldset>
-          </conditional-inputs>
-        </div>
-
-        ${saveAndContinueButton(locale)}
-      </form>
-    `,
-    canonical: format(writeReviewCompetingInterestsMatch.formatter, { id: preprint.id }),
-    skipToLabel: 'form',
-    js: error ? ['conditional-inputs.js', 'error-summary.js'] : ['conditional-inputs.js'],
-  })
-}
-
-const toErrorItems = (locale: SupportedLocale, otherAuthors: boolean) => (form: CompetingInterestsForm) => html`
-  ${E.isLeft(form.competingInterests)
-    ? html`
-        <li>
-          <a href="#competing-interests-no">
-            ${match(form.competingInterests.left)
-              .with({ _tag: 'MissingE' }, () =>
-                translate(locale, 'write-review', 'selectYesIfCompetingInterest')({ otherAuthors }),
-              )
-              .exhaustive()}
-          </a>
-        </li>
-      `
-    : ''}
-  ${E.isLeft(form.competingInterestsDetails)
-    ? html`
-        <li>
-          <a href="#competing-interests-details">
-            ${match(form.competingInterestsDetails.left)
-              .with({ _tag: 'MissingE' }, () =>
-                translate(locale, 'write-review', 'competingInterestDetails')({ otherAuthors }),
-              )
-              .exhaustive()}
-          </a>
-        </li>
-      `
-    : ''}
-`
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-linux.png
new file mode 100644
index 000000000..c3e6c858b
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:552db1b09e571c9b61264e8d58ada26feb4e731ba9acf6f3e18661e00c394d72
+size 27243
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..b2b91de09
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0e6b89e07af09766059ed7d671766763330c82a2c3c1e7e2b332bdd17a191a1e
+size 30688
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..27196ac39
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b6e4c32e7fa91ac16c93126866b8b8462536406701585e949cb52047bebb6e7d
+size 23883
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..ef84fcbec
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:135c1471eaf6ea0787e9ba552ca67aefa46345818aa688c3ef30b887e397ca8d
+size 27141
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-linux.png
new file mode 100644
index 000000000..17d4efdcf
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9a253366871aaf674dd36d67cd8142c3cb1082ac9bb825420f12c6faef4220b6
+size 43178
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..b4e538fdc
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99563c5697519d1aff6353b1dfa14a197162524ddfea26c67c806ceca13dfd3a
+size 52293
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..f4cc34488
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6209a70adfa71a8d2ec032b5aeb6d954579f594c08f2ae230cf7c4f192b50507
+size 16840
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..58659f0c4
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3ed6ec153b6112b9fcfa62152c039f75f4a160bfe5de618aba53c51a25c7f15
+size 19059
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-linux.png
new file mode 100644
index 000000000..c6cb7a2bf
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d179659603cc378bfe29b407dadc64d02aa17cabc466be01d9d00515f864ef45
+size 21228
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..5bac1d823
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b0f5f8df15cc0f56b3b8ec35d9ab193358736fbb8cb606d87bb3c45eaa16ba6
+size 23642
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png
new file mode 100644
index 000000000..1fcc81de2
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e9807d4565995d07207130673d44ecfc83583b95aa4e2bda319d2b7fb7a351fd
+size 38980
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..c182de4e7
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0d77d059ff0de985aa6ae1f76fea4e6bf07f41bce6c21e4250c4c89374813935
+size 42485
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..fd16c51dd
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3194ebcba30d85f4c592b8ccc03eb9fb57fe79fed63f887f5343d2d928a3605b
+size 34650
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..63013747e
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:56bfaaa4ad631aa5c1846fc9daea3677623d95f085444a5a1d383f486f7014f2
+size 37911
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png
new file mode 100644
index 000000000..e9b99f5dd
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a3260badf7fbda82141a1fde059c689b06b0c8c4776ecca51948261d554d930a
+size 66381
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..6758a9ae8
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2c047a49f049542f578b10ed3b7ab4acdf8a5571d38be35cc3464012976958ad
+size 75237
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..958a49ec4
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b27b69aecade1d8b9200ef7286a2eb6982a1ca969cc93737ad9224437827ac20
+size 25215
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..bc327eab6
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4798ed2dccceda5d7414ae81bf64cd3d118a9b4384427b20658dabff6754b55c
+size 27270
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-linux.png
new file mode 100644
index 000000000..beb29ec52
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:280308232f61253e55ae7beb289f338e3c56928a59d6f8af4b4ae928c82cacab
+size 31061
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..83a488aa1
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-competing-interests-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ad6b7696786b6fe534897ac071abf350ae8ed1f1cbee75586088e1a1f8d17e4
+size 33569
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png
new file mode 100644
index 000000000..6e73aec51
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fef36f540a7c49217889d5bc41f99d386edda8ceecd68e693704ea76254f531
+size 41650
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..ebaf05f16
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3a73d4a39fe24bcfc3978a2d778dc4ab5a3ed93e7b0b0f5c24d8a3a45fc095e7
+size 41589
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..6a2804d21
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ad5170bdeaa7dd9ca21f36d7280a4e6587f62b6c24e3779659309d72e7deba90
+size 36681
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..93ea825be
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:03a9cf15b823ab8d3087eaf466c9e019f10777d530615c0dafdc04a36debc8b7
+size 36530
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png
new file mode 100644
index 000000000..f7c1c54d3
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e06b2584612c9b7ae718869970d8b526215ee5976dad9be66d325130783b696
+size 72994
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..2edd52e37
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4922dcdf56d848ee34fcf6a00fc3655f73a40bc28a47c23b372210a0f8a393a5
+size 73024
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..a7793f488
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9d78beb0077792cbb47eae93beb7215ccf4db18e5ac3b4bf1396a502a3c1effc
+size 26022
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..2b2a1ccf5
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4dfd2f7676a3fbaa0482ad4b90e868958af765a734752e7a8ab9fd420f22d398
+size 25872
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-linux.png
new file mode 100644
index 000000000..d233f3137
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b76984b1158d7e4278c9c6e1859ef52b55a96c05274c90215af8a1e0547be6e8
+size 32622
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..f47827863
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-details-are-missing-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e22b26686ef3160371851443cd3ee5a53142cf7da87773a939a082c15dd23f43
+size 32652
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-linux.png
new file mode 100644
index 000000000..1feb15e00
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9a435babaee5e77e0f71de301dc567881cc2f1f130de58c4fb4414bb32061e8d
+size 28442
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..64ddc6298
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f0bee2b2bc11f64acfb6c0bce46393a6d5b356a7dc0d3408d1299467b46d8ef3
+size 31903
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..2ac1f9242
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e3eedcff89cf8e15d5954c3d065539c058b9da9849c4a4ec2cfe7ded01d26e5
+size 25152
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..2a2c63bc7
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f62cc543819470658816b97a50fc8fca4b6e02c04d881ed044e114dc85218102
+size 28415
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-linux.png
new file mode 100644
index 000000000..25666fdd6
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:72bed3fb9b9e01692d72a44d6932278cc716d143e192cb062c585d595bf9e241
+size 46678
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..9488c901b
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Desktop-Firefox-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8c28dc5f9561e52a2a5660077f286edeb8cc2e315c8f089b1b486bd377e47c4d
+size 55784
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
new file mode 100644
index 000000000..3af9c65fa
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2624956ee5ea867ce1d176c7636fed0e81258917fe0d74a7ba49dd2fdb4f5a7
+size 19533
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..e7ddb66eb
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:36c3110584ab5f25baf8e91546c2074b90b53140d0a94c516e7dc42952f81ca9
+size 21769
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-linux.png
new file mode 100644
index 000000000..f3eefb6bd
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32012a7d493f11fbcaf04f1501cb35c9899e6fb7c16fe2c0caa63fb24fc16696
+size 24400
diff --git a/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
new file mode 100644
index 000000000..36530337a
--- /dev/null
+++ b/visual-regression/snapshots/write-review/write-review-competing-interests.spec.ts-snapshots/content-looks-right-when-there-are-other-authors-1-iPhone-11-Visual-Regression-no-JavaScript--linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:375cdf8f520afe6cb481645a091c348d383e3db7a8b61cc9dc824854ec298a08
+size 26872
diff --git a/visual-regression/write-review/write-review-competing-interests.spec.ts b/visual-regression/write-review/write-review-competing-interests.spec.ts
new file mode 100644
index 000000000..5f46746f6
--- /dev/null
+++ b/visual-regression/write-review/write-review-competing-interests.spec.ts
@@ -0,0 +1,83 @@
+import { Doi } from 'doi-ts'
+import * as E from 'fp-ts/lib/Either.js'
+import { missingE } from '../../src/form.js'
+import { html } from '../../src/html.js'
+import { DefaultLocale } from '../../src/locales/index.js'
+import type { PreprintTitle } from '../../src/preprint.js'
+import { competingInterestsForm } from '../../src/write-review/competing-interests-page/competing-interests-form.js'
+import { expect, test } from '../base.js'
+
+test('content looks right', async ({ showPage }) => {
+  const response = competingInterestsForm(
+    preprint,
+    {
+      competingInterests: E.right(undefined),
+      competingInterestsDetails: E.right(undefined),
+    },
+    locale,
+    'no',
+  )
+
+  const content = await showPage(response)
+
+  await expect(content).toHaveScreenshot()
+})
+
+test('content looks right when there are other authors', async ({ showPage }) => {
+  const response = competingInterestsForm(
+    preprint,
+    {
+      competingInterests: E.right(undefined),
+      competingInterestsDetails: E.right(undefined),
+    },
+    locale,
+    'yes',
+  )
+
+  const content = await showPage(response)
+
+  await expect(content).toHaveScreenshot()
+})
+
+test('content looks right when competing interests are missing', async ({ showPage }) => {
+  const response = competingInterestsForm(
+    preprint,
+    {
+      competingInterests: E.left(missingE()),
+      competingInterestsDetails: E.right(undefined),
+    },
+    locale,
+    'no',
+  )
+
+  const content = await showPage(response)
+
+  await expect(content).toHaveScreenshot()
+})
+
+test('content looks right when details are missing', async ({ showPage }) => {
+  const response = competingInterestsForm(
+    preprint,
+    {
+      competingInterests: E.right('yes'),
+      competingInterestsDetails: E.left(missingE()),
+    },
+    locale,
+    'no',
+  )
+
+  const content = await showPage(response)
+
+  await expect(content).toHaveScreenshot()
+})
+
+const locale = DefaultLocale
+
+const preprint = {
+  id: {
+    type: 'biorxiv',
+    value: Doi('10.1101/2022.01.13.476201'),
+  },
+  title: html`The role of LHCBM1 in non-photochemical quenching in <i>Chlamydomonas reinhardtii</i>`,
+  language: 'en',
+} satisfies PreprintTitle