diff --git a/.eslintrc.js b/.eslintrc.js
index 6f44c8b18f3..3017f94a396 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,7 +11,6 @@ module.exports = {
 		// window.guardian is our global config/settings object
 		'id-denylist': ['error', 'guardian'],
 	},
-	ignorePatterns: ['javascripts.flow.archive'],
 	overrides: [
 		{
 			files: ['*.ts', '*.tsx'],
@@ -35,13 +34,13 @@ module.exports = {
 				],
 			},
 		},
-        {
-            files: ['*.spec.ts'],
-            rules: {
-              // This rule erroneously flags up instances where you expect(obj.fn).toHaveBeenCalled
-              // Enabled for test files only
-              '@typescript-eslint/unbound-method': 'off',
-            },
-          },
+		{
+			files: ['*.spec.ts'],
+			rules: {
+				// This rule erroneously flags up instances where you expect(obj.fn).toHaveBeenCalled
+				// Enabled for test files only
+				'@typescript-eslint/unbound-method': 'off',
+			},
+		},
 	],
 };
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 25083f88586..632b76009ce 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,8 +6,7 @@
 	"recommendations": [
         "dbaeumer.vscode-eslint",
         "editorconfig.editorconfig",
-        "esbenp.prettier-vscode",
-        "flowtype.flow-for-vscode"
+        "esbenp.prettier-vscode"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [
diff --git a/docs/01-start-here/04-troubleshooting.md b/docs/01-start-here/04-troubleshooting.md
index e3687dbfa60..dc0a1e12cd5 100644
--- a/docs/01-start-here/04-troubleshooting.md
+++ b/docs/01-start-here/04-troubleshooting.md
@@ -30,7 +30,7 @@ If this doesn't work, you can clean everything with `cleanAll` in `root`.
 
 If you're still seeing errors, try clearing out all build and `.gitignore`d folders, which includes `target` folders:
 
-> **Note:** This will wipe *everything*, not just `target/` (built) folders - including `node_modules/` 
+> **Note:** This will wipe *everything*, not just `target/` (built) folders - including `node_modules/`
 
 ```
 git clean -fxd
@@ -67,17 +67,6 @@ Run `make reinstall` to resolve.
 ### Accidentally ran `npm install` or `yarn install`
 Run `make reinstall` to resolve.
 
-### Run Flowtype checks takes forever
-The Flowtype checks happen automatically when you push your branch, assuming you have made JavaScript changes.
-
-Flow can sometimes take a long time to run. The first time you run Flowtype checks, Flow starts up a Flow server which is a slow process. If you think Flow is hanging ([a known bug](https://github.com/facebook/flow/issues/3528)), you can try stopping the Flow server by running:
-
-```bash
-$ yarn flow stop
-```
-
-Next time you push your branch or manually run the Flow checks, a new Flow server will be started.
-
 ### Global install permissions errors
 The script installs global npm packages without sudo. If you get npm permission errors, follow the guide to using npm without sudo [here](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md).
 
diff --git a/docs/01-start-here/05-development-tips.md b/docs/01-start-here/05-development-tips.md
index bfdcd60e3f9..64413a92c3d 100644
--- a/docs/01-start-here/05-development-tips.md
+++ b/docs/01-start-here/05-development-tips.md
@@ -24,10 +24,9 @@ make test
 make fix
 make validate
 ```
-These will fix up the linting issues and check all the flow types to make sure you won't have any issue
-trying to push or with the simple parts of the build.
+These will fix the linting issues to make sure you won't have any issue trying to push or with the simple parts of the build.
 
-If you have already committed you can use `make fix-commits` to verify & fix your commited code. It's 
+If you have already committed you can use `make fix-commits` to verify & fix your commited code. It's
 faster than `make fix` but you will need to amend your previous commits to get a clean history.
 
 If you are wondering what other options make has, you can simply type `make` at the comment line.
@@ -53,16 +52,16 @@ Ensure the Transport is Socket, the Debugger mode is Attach, and the port is set
 Start a new Debug session, and your breakpoints should be active.
 
 ### Developing in IntelliJ
- 
+
 To use the sbt shell, you should use the same configuration for the JVM as in the [custom sbt script](../../sbt).
-As an example of how to achieve this, the picture below demonstrates increasing the maximum heap size to 8000 and 
+As an example of how to achieve this, the picture below demonstrates increasing the maximum heap size to 8000 and
 providing the `APP_SECRET` as a Java system property.
 
 ![sbt_options](https://user-images.githubusercontent.com/4085817/67011346-4ce99980-f0e7-11e9-81fd-f1208e672800.png)
 
 Being able to use sbt shell has a number of advantages:
 - IntelliJ can be [configured to use sbt shell for build and import](https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000117230-Sbt-shell-for-build-an-import);
-- and (perhaps more pertinently), by clicking on the debug icon (pictured below) you can debug the Scala application(s) 
+- and (perhaps more pertinently), by clicking on the debug icon (pictured below) you can debug the Scala application(s)
 without having to configure the debugger yourself:
 
   ![debug_icon](https://user-images.githubusercontent.com/4085817/67011976-7bb43f80-f0e8-11e9-93fd-052ede190e34.png)
diff --git a/static/src/javascripts.flow.archive/__flow__/stubs/raw.js b/static/src/javascripts.flow.archive/__flow__/stubs/raw.js
deleted file mode 100644
index 6b568bdd545..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/stubs/raw.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/stubs/raw.js
- * to .ts, then delete it.
- */
-
-export default '';
diff --git a/static/src/javascripts.flow.archive/__flow__/stubs/svg.js b/static/src/javascripts.flow.archive/__flow__/stubs/svg.js
deleted file mode 100644
index c1cb56eb831..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/stubs/svg.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/stubs/svg.js
- * to .ts, then delete it.
- */
-
-export default {
-    markup: '',
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/ab-tests.js b/static/src/javascripts.flow.archive/__flow__/types/ab-tests.js
deleted file mode 100644
index cdf7824ae39..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/ab-tests.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/ab-tests.js
- * to .ts, then delete it.
- */
-
-import type { ReminderFields } from 'common/modules/commercial/templates/acquisitions-epic-reminder';
-import type { TickerSettings } from 'common/modules/commercial/ticker';
-
-type ListenerFunction = (f: () => void) => void;
-
-declare type EpicCta = { url: string, ctaText: string };
-
-declare type EpicTemplate = (
-    EpicVariant,
-    AcquisitionsEpicTemplateCopy
-) => string;
-
-declare type Variant = {
-    id: string,
-    test: (x: Object) => void,
-    campaignCode?: string,
-    canRun?: () => boolean,
-    impression?: ListenerFunction,
-    success?: ListenerFunction,
-    engagementBannerParams?: EngagementBannerTestParams,
-};
-
-declare type EpicVariant = Variant & {
-    // filters, where empty is taken to mean 'all', multiple entries are combined with OR
-    countryGroups: string[],
-    tagIds: string[],
-    sections: string[],
-    excludedTagIds: string[],
-    excludedSections: string[],
-
-    supportURL: string,
-    componentName: string,
-    template: EpicTemplate,
-    classNames: string[],
-    showTicker?: boolean,    // Deprecated, use tickerSettings instead
-    tickerSettings?: TickerSettings | null,
-    showReminderFields?: ReminderFields | null,
-
-    buttonTemplate?: (
-        primaryCta: EpicCta,
-        secondaryCta?: EpicCta,
-        reminderCta?: ReminderFields
-    ) => string,
-    ctaText?: string,
-    secondaryCta?: EpicCta,
-    copy: AcquisitionsEpicTemplateCopy,
-    backgroundImageUrl?: string,
-};
-
-declare type ABTest = {
-    id: string,
-    start: string,
-    expiry: string,
-    author: string,
-    description: string,
-    audience: number,
-    audienceOffset: number,
-    successMeasure: string,
-    audienceCriteria: string,
-    showForSensitive: boolean,
-    idealOutcome?: string,
-    dataLinkNames?: string,
-    ophanComponentId?: string,
-    variants: $ReadOnlyArray<Variant>,
-    canRun: () => boolean,
-    notInTest?: () => void,
-};
-
-declare type Runnable<T: ABTest> = T & {
-    variantToRun: Variant,
-};
-
-declare type AcquisitionsABTest = ABTest & {
-    campaignId: string,
-    componentType: OphanComponentType,
-    geolocation: ?string,
-};
-
-declare type MaxViews = {
-    days: number,
-    count: number,
-    minDaysBetweenViews: number,
-};
-
-declare type ArticlesViewedSettings = {
-    minViews?: number,
-    maxViews?: number,
-    count: number,
-};
-
-declare type DeploymentRules = 'AlwaysAsk' | MaxViews;
-
-declare type EpicABTest = AcquisitionsABTest & {
-    campaignPrefix: string,
-    useLocalViewLog: boolean,
-    userCohort: AcquisitionsComponentUserCohort,
-    pageCheck: (page: Object) => boolean,
-    useTargetingTool: boolean,
-    insertEvent: string,
-    viewEvent: string,
-    highPriority: boolean,
-    deploymentRules: DeploymentRules,
-};
-
-declare type InitEpicABTestVariant = {
-    id: string,
-    products: $ReadOnlyArray<OphanProduct>,
-    test?: (html: string, variant: EpicVariant, parentTest: EpicABTest) => void,
-    countryGroups?: string[],
-    tagIds?: string[],
-    sections?: string[],
-    excludedTagIds?: string[],
-    excludedSections?: string[],
-    buttonTemplate?: (
-        primaryCta: EpicCta,
-        secondaryCta?: EpicCta,
-        reminderCta?: ReminderFields
-    ) => string,
-    ctaText?: string,
-    secondaryCta?: EpicCta,
-    copy: AcquisitionsEpicTemplateCopy,
-    classNames?: string[],
-    showTicker?: boolean,
-    tickerSettings?: TickerSettings | null,
-    showReminderFields?: ReminderFields | null,
-    supportBaseURL?: string,
-    backgroundImageUrl?: string,
-    canRun?: () => boolean,
-    template?: EpicTemplate,
-};
-
-declare type InitBannerABTestVariant = {
-    id: string,
-    products: $ReadOnlyArray<OphanProduct>,
-    engagementBannerParams: () => Promise<?EngagementBannerTemplateParams>,
-};
-
-declare type InitEpicABTest = {
-    id: string,
-    start: string,
-    expiry: string,
-    author: string,
-    description: string,
-    audience: number,
-    audienceOffset: number,
-    successMeasure: string,
-    audienceCriteria: string,
-    idealOutcome: string,
-    campaignId: string,
-    canRun?: () => boolean,
-    variants: $ReadOnlyArray<InitEpicABTestVariant>,
-
-    campaignPrefix?: string,
-    useLocalViewLog?: boolean,
-    useTargetingTool?: boolean,
-    userCohort?: AcquisitionsComponentUserCohort,
-    pageCheck?: (page: Object) => boolean,
-    template?: EpicTemplate,
-    deploymentRules?: DeploymentRules,
-    testHasCountryName?: boolean,
-    geolocation: ?string,
-    highPriority: boolean,
-    articlesViewedSettings?: ArticlesViewedSettings,
-};
-
-declare type Interaction = {
-    component: string,
-    value: string,
-};
-
-/**
- * the structure stored in localStorage
- */
-declare type Participations = {
-    [testId: string]: {
-        variant: string,
-    },
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/acquisitions.js b/static/src/javascripts.flow.archive/__flow__/types/acquisitions.js
deleted file mode 100644
index 722698aadfa..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/acquisitions.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/acquisitions.js
- * to .ts, then delete it.
- */
-
-declare type AcquisitionsEpicTestimonialCopy = {
-    text: string,
-    name: string
-}
-
-declare type AcquisitionsEpicTemplateCopy = {
-    heading?: string,
-    paragraphs: Array<string>,
-    highlightedText?: string,
-    testimonial?: AcquisitionsEpicTestimonialCopy,
-    footer?: Array<string>,
-};
-
-declare type EngagementBannerTemplateParams = {
-    titles?: Array<string>,
-    leadSentence?: string,
-    closingSentence?: string,
-    messageText: string,
-    mobileMessageText?: string,
-    ctaText: string,
-    buttonCaption: string,
-    linkUrl: string,
-    hasTicker: boolean,
-    tickerHeader?: string,
-    signInUrl?: string,
-    secondaryLinkUrl?: string,
-    secondaryLinkLabel?: string,
-    subsLinkUrl?: string,
-};
-
-/**
- * AllExistingSupporters - all recurring, all one-offs in last 3 months
- * AllNonSupporters - no recurring, no one-offs in last 3 months
- * Everyone
- * PostAskPauseSingleContributors - people who made a contribution more than 3 months ago
- *
- * Note - PostAskPauseSingleContributors is a subset of AllNonSupporters, so priority ordering of these tests is important
- */
-declare type AcquisitionsComponentUserCohort = 'AllExistingSupporters' | 'AllNonSupporters' | 'Everyone' | 'PostAskPauseSingleContributors';
-
-declare type EngagementBannerParams = EngagementBannerTemplateParams & {
-    campaignCode: string,
-    pageviewId: string,
-    products: OphanProduct[],
-    isHardcodedFallback: boolean,
-    template: (templateParams: EngagementBannerTemplateParams) => string,
-    minArticlesBeforeShowingBanner: number,
-    userCohort: AcquisitionsComponentUserCohort,
-    bannerModifierClass?: string,
-    abTest?: {
-        name: string,
-        variant: string
-    },
-    bannerShownCallback?: () => void,
-};
-
-declare type EngagementBannerTestParams = {
-    titles?: Array<string>,
-    leadSentence?: string,
-    messageText?: string,
-    ctaText?: string,
-    buttonCaption?: string,
-    linkUrl?: string,
-    hasTicker?: boolean,
-    tickerHeader?: string,
-    products?: OphanProduct[],
-    template?: (templateParams: EngagementBannerTemplateParams) => string,
-    bannerModifierClass?: string,
-    minArticlesBeforeShowingBanner?: number,
-    userCohort?: AcquisitionsComponentUserCohort,
-    bannerShownCallback?: () => void,
-}
diff --git a/static/src/javascripts.flow.archive/__flow__/types/crosswords.js b/static/src/javascripts.flow.archive/__flow__/types/crosswords.js
deleted file mode 100644
index 7a6ccb44a9f..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/crosswords.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/crosswords.js
- * to .ts, then delete it.
- */
-
-type Direction = 'across' | 'down';
-
-type Separator = '-' | ',';
-
-type Axis = 'x' | 'y';
-
-type SeparatorDescription = {
-    direction: Direction,
-    separator: Separator,
-};
-
-type SeparatorMap = {
-    [key: string]: SeparatorDescription,
-};
-
-type SeparatorLocations = {
-    [separator: Separator]: Array<number>,
-}
-
-type Position = {
-    [axis: Axis]: number
-};
-
-type Cell = {
-    number: number | string,
-    isHighlighted: boolean,
-    isEditable: boolean,
-    isError: boolean,
-    isAnimating: boolean,
-    value: string,
-};
-
-type Grid = Array<Array<Cell>>;
-
-type Clue = {
-    id: string,
-    number: number | string,
-    humanNumber: number | string,
-    group: Array<string>,
-    clue: string,
-    position: Position,
-    separatorLocations: SeparatorLocations,
-    direction: Direction,
-    length: number,
-    solution: string,
-};
-
-type GroupClue = {
-    id: string,
-    number: ?number | ?string,
-    length: number,
-    separatorLocations: SeparatorLocations,
-    direction: '',
-    clue: ?string,
-}
-
-type CluesIntersect = {
-    across?: Clue,
-    down?: Clue,
-};
-
-type ClueMap = {
-    [key: string]: CluesIntersect,
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/discussion-comment.js b/static/src/javascripts.flow.archive/__flow__/types/discussion-comment.js
deleted file mode 100644
index 1722613fb92..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/discussion-comment.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/discussion-comment.js
- * to .ts, then delete it.
- */
-
-declare type Comment = {
-    body: string,
-    id: string,
-    replyTo?: Object,
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/discussion-profile.js b/static/src/javascripts.flow.archive/__flow__/types/discussion-profile.js
deleted file mode 100644
index 3ae69cbcc42..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/discussion-profile.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/discussion-profile.js
- * to .ts, then delete it.
- */
-
-// model: https://github.com/guardian/discussion-api/blob/master/discussion-api/src/main/scala/com.gu.discussion.api/model/Profile.scala#L26
-
-declare type DiscussionProfile = {
-    apiUrl: string,
-    avatar: string,
-    badge: Array<{
-        name: string,
-    }>,
-    details: {
-        about: string,
-        age: string,
-        gender: string,
-        interests: string,
-        location: string,
-        realName: string,
-        webPage: string,
-    },
-    displayName: string,
-    isStaff?: boolean,
-    privateFields: {
-        canPostComment: boolean,
-        hasCommented: boolean,
-        isPremoderated: boolean,
-    },
-    secureAvatarUrl: string,
-    userId: string,
-    webUrl: string,
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/global.js b/static/src/javascripts.flow.archive/__flow__/types/global.js
deleted file mode 100644
index 400edb4807a..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/global.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/global.js
- * to .ts, then delete it.
- */
-
-declare var __webpack_public_path__: string;
-
-declare var twttr: {
-    widgets?: {
-        load?: (?Element) => void,
-    },
-};
-
-// #? TODO: this type def conflates definitions for CommonJS require and Webpack's require
-// When we replace Webpack's require with dynamic imports, we can remove this type def
-// https://webpack.js.org/guides/code-splitting/#dynamic-imports
-declare var require: {
-    (id: string): any,
-    ensure(
-        ids: Array<string>,
-        callback?: { (require: typeof require): void },
-        chunkName?: string
-    ): void,
-    resolve: (id: string) => string,
-    cache: any,
-    main: typeof module,
-};
-
-declare type TagAtrribute = {
-    name: string,
-    value: string,
-};
-
-declare type ThirdPartyTag = {
-    shouldRun: boolean,
-    url?: string,
-    name?: string,
-    onLoad?: () => any,
-    beforeLoad?: () => any,
-    useImage?: boolean,
-    attrs?: Array<TagAtrribute>,
-    async?: boolean,
-    loaded?: boolean,
-    insertSnippet?: () => any,
-};
-
-declare var jsdom: {
-    reconfigure: (settings: {}) => any,
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/membership.js b/static/src/javascripts.flow.archive/__flow__/types/membership.js
deleted file mode 100644
index 06e3a3ca7b7..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/membership.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/membership.js
- * to .ts, then delete it.
- */
-
-declare type StripeCard = {
-    last4: string,
-    type: string,
-    stripePublicKeyForUpdate: string
-}
-
-//the type of the response returned by https://github.com/guardian/members-data-api/blob/b5b7eeb9eff00fbcdf07dce6e95d1eac58d9b5e0/membership-attribute-service/app/models/AccountDetails.scala#L11-L16
-declare type UserDetails = {
-    tier: string,
-    isPaidTier: boolean,
-    regNumber?: string,
-    joinDate: string,
-    optIn: boolean,
-    subscription: {
-        start: string,
-        end: string,
-        trialLength: number,
-        nextPaymentDate: string,
-        nextPaymentPrice: number,
-        paymentMethod: string,
-        renewalDate: string,
-        cancelledAt: boolean,
-        subscriberId: string,
-        plan: {
-            name: string,
-            amount: number,
-            interval: string,
-            currency: string
-        },
-        payPalEmail?: string,
-        account?: {
-            accountName: string,
-        },
-        card?: StripeCard,
-        account?: {
-            accountName: string
-        },
-    },
-    alertText?: string
-}
diff --git a/static/src/javascripts.flow.archive/__flow__/types/ophan.js b/static/src/javascripts.flow.archive/__flow__/types/ophan.js
deleted file mode 100644
index a48bac1602f..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/ophan.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/ophan.js
- * to .ts, then delete it.
- */
-
-/**
- * an individual A/B test, structured for Ophan
- */
-declare type OphanABEvent = {
-    variantName: string,
-    complete: string | boolean,
-    campaignCodes?: $ReadOnlyArray<string>,
-};
-
-/**
- * the actual payload we send to Ophan: an object of OphanABEvents with test IDs as keys
- */
-declare type OphanABPayload = {
-    [testId: string]: OphanABEvent,
-};
-
-declare type OphanProduct =
-    | 'CONTRIBUTION'
-    | 'RECURRING_CONTRIBUTION'
-    | 'MEMBERSHIP_SUPPORTER'
-    | 'MEMBERSHIP_PATRON'
-    | 'MEMBERSHIP_PARTNER'
-    | 'DIGITAL_SUBSCRIPTION'
-    | 'PRINT_SUBSCRIPTION';
-
-declare type OphanAction =
-    | 'INSERT'
-    | 'VIEW'
-    | 'EXPAND'
-    | 'LIKE'
-    | 'DISLIKE'
-    | 'SUBSCRIBE'
-    | 'ANSWER'
-    | 'VOTE'
-    | 'CLICK';
-
-declare type OphanComponentType =
-    | 'READERS_QUESTIONS_ATOM'
-    | 'QANDA_ATOM'
-    | 'PROFILE_ATOM'
-    | 'GUIDE_ATOM'
-    | 'TIMELINE_ATOM'
-    | 'NEWSLETTER_SUBSCRIPTION'
-    | 'SURVEYS_QUESTIONS'
-    | 'ACQUISITIONS_EPIC'
-    | 'ACQUISITIONS_ENGAGEMENT_BANNER'
-    | 'ACQUISITIONS_THANK_YOU_EPIC'
-    | 'ACQUISITIONS_HEADER'
-    | 'ACQUISITIONS_FOOTER'
-    | 'ACQUISITIONS_INTERACTIVE_SLICE'
-    | 'ACQUISITIONS_NUGGET'
-    | 'ACQUISITIONS_STANDFIRST'
-    | 'ACQUISITIONS_THRASHER'
-    | 'ACQUISITIONS_EDITORIAL_LINK'
-    | 'ACQUISITIONS_SUBSCRIPTIONS_BANNER'
-    | 'ACQUISITIONS_OTHER'
-    | 'SIGN_IN_GATE'
-    | 'RETENTION_ENGAGEMENT_BANNER';
-
-declare type OphanComponent = {
-    componentType: OphanComponentType,
-    id?: string,
-    products?: $ReadOnlyArray<OphanProduct>,
-    campaignCode?: string,
-    labels?: $ReadOnlyArray<string>
-};
-
-declare type OphanComponentEvent = {
-    component: OphanComponent,
-    action: OphanAction,
-    value?: string,
-    id?: string,
-    abTest?: {
-        name: string,
-        variant: string
-    }
-};
diff --git a/static/src/javascripts.flow.archive/__flow__/types/user-attributes.js b/static/src/javascripts.flow.archive/__flow__/types/user-attributes.js
deleted file mode 100644
index d86e8dcf690..00000000000
--- a/static/src/javascripts.flow.archive/__flow__/types/user-attributes.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/__flow__/types/user-attributes.js
- * to .ts, then delete it.
- */
-
-
-//the type of the response returned by https://members-data-api.theguardian.com/user-attributes/me/mma-monthlycontribution
-declare type ContributorDetails = {
-    tier: string,
-    isPaidTier: boolean,
-    joinDate: string,
-    optIn: boolean,
-    subscription: {
-        paymentMethod: string,
-        payPalEmail?: string,
-        card?: StripeCard,
-        start: string,
-        end: string,
-        nextPaymentPrice: number,
-        nextPaymentDate: string,
-        renewalDate: string,
-        cancelledAt: boolean,
-        subscriberId: string,
-        trialLength: number,
-        plan: {
-            name: string,
-            amount: number,
-            currency: string,
-            interval: string
-        }
-    },
-    alertText?: string
-}
diff --git a/static/src/javascripts.flow.archive/boot.js b/static/src/javascripts.flow.archive/boot.js
deleted file mode 100644
index 6cc1c3e6f3c..00000000000
--- a/static/src/javascripts.flow.archive/boot.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/boot.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// es7 polyfills not provided by pollyfill.io
-import 'core-js/modules/es7.object.get-own-property-descriptors';
-
-import domready from 'domready';
-import { bootStandard } from 'bootstraps/standard/main';
-import config from 'lib/config';
-import { markTime } from 'lib/user-timing';
-import { captureOphanInfo } from 'lib/capture-ophan-info';
-import reportError from 'lib/report-error';
-import { cmp, onConsentChange } from '@guardian/consent-management-platform';
-import { getLocale } from '@guardian/libs';
-import { getCookie } from 'lib/cookies';
-import { trackPerformance } from 'common/modules/analytics/google';
-
-// Let webpack know where to get files from
-// __webpack_public_path__ is a special webpack variable
-// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
-// eslint-disable-next-line camelcase,no-undef
-__webpack_public_path__ = `${config.get('page.assetsPath')}javascripts/`;
-
-// Debug preact in DEV
-if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-unused-expressions
-    import(/* webpackChunkName: "preact-debug" */ 'preact/debug');
-}
-
-// kick off the app
-const go = () => {
-    domready(async () => {
-        // 1. boot standard, always
-        markTime('standard boot');
-        bootStandard();
-
-        // Start CMP
-        // CCPA and TCFv2
-        const browserId: ?string = getCookie('bwid') || undefined;
-        const pageViewId: ?string = config.get('ophan.pageViewId');
-        const pubData: {
-            browserId?: ?string,
-            platform?: ?string,
-            pageViewId?: ?string,
-        } = {
-            platform: 'next-gen',
-            browserId,
-            pageViewId,
-        };
-
-        // keep this in sync with CONSENT_TIMING in src/web/components/App.tsx in frontend
-        // mark: CONSENT_TIMING
-        let recordedConsentTime = false;
-        onConsentChange(() => {
-            if (!recordedConsentTime) {
-                recordedConsentTime = true;
-                cmp.willShowPrivacyMessage().then(willShow => {
-                    trackPerformance(
-                        'consent',
-                        'acquired',
-                        willShow ? 'new' : 'existing'
-                    );
-                });
-            }
-        });
-
-        cmp.init({ pubData, country: await getLocale() });
-
-        // 2. once standard is done, next is commercial
-        if (process.env.NODE_ENV !== 'production') {
-            window.guardian.adBlockers.onDetect.push(isInUse => {
-                const needsMessage =
-                    isInUse && window.console && window.console.warn;
-                const message =
-                    'Do you have an adblocker enabled? Commercial features might fail to run, or throw exceptions.';
-                if (needsMessage) {
-                    window.console.warn(message);
-                }
-            });
-        }
-
-        // Start downloading these ASAP
-
-        // eslint-disable-next-line no-nested-ternary
-        const fetchCommercial = config.get('switches.commercial')
-            ? (markTime('commercial request'),
-              import(/* webpackChunkName: "commercial" */ 'bootstraps/commercial'))
-            : Promise.resolve({ bootCommercial: () => {} });
-
-        const fetchEnhanced = window.guardian.isEnhanced
-            ? (markTime('enhanced request'),
-              import(/* webpackChunkName: "enhanced" */ 'bootstraps/enhanced/main'))
-            : Promise.resolve({ bootEnhanced: () => {} });
-
-        Promise.all([
-            fetchCommercial.then(({ bootCommercial }) => {
-                markTime('commercial boot');
-                try {
-                    return bootCommercial();
-                } catch (err) {
-                    /**
-                     * report sync errors in bootCommercial to
-                     * Sentry with the commercial feature tag
-                     *  */
-                    reportError(
-                        err,
-                        {
-                            feature: 'commercial',
-                        },
-                        false
-                    );
-                }
-            }),
-            fetchEnhanced.then(({ bootEnhanced }) => {
-                markTime('enhanced boot');
-                try {
-                    return bootEnhanced();
-                } catch (err) {
-                    /**
-                     * report sync errors in bootEnhanced to
-                     * Sentry with the enhanced feature tag
-                     *  */
-                    reportError(
-                        err,
-                        {
-                            feature: 'enhanced',
-                        },
-                        false
-                    );
-                }
-            }),
-        ]).then(() => {
-            if (document.readyState === 'complete') {
-                captureOphanInfo();
-            } else {
-                window.addEventListener('load', captureOphanInfo);
-            }
-        });
-    });
-};
-
-// make sure we've patched the env before running the app
-if (window.guardian.polyfilled) {
-    go();
-} else {
-    window.guardian.onPolyfilled = go;
-}
diff --git a/static/src/javascripts.flow.archive/bootstraps/admin.js b/static/src/javascripts.flow.archive/bootstraps/admin.js
deleted file mode 100644
index aaa11c5cd71..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/admin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/admin.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { init as initDrama } from 'admin/bootstraps/drama';
-import { initABTests } from 'admin/bootstraps/abtests';
-import { initRadiator } from 'admin/bootstraps/radiator';
-import domReady from 'domready';
-
-domReady(() => {
-    switch (window.location.pathname) {
-        case '/analytics/abtests':
-            initABTests();
-            break;
-
-        case '/dev/switchboard':
-            initDrama();
-            break;
-
-        case '/radiator':
-            initRadiator();
-            break;
-
-        default: // do nothing
-    }
-});
diff --git a/static/src/javascripts.flow.archive/bootstraps/atoms/snippet.js b/static/src/javascripts.flow.archive/bootstraps/atoms/snippet.js
deleted file mode 100644
index e97313a666b..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/atoms/snippet.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/atoms/snippet.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import domready from 'domready';
-import config from 'lib/config';
-import fastdom from 'lib/fastdom-promise';
-import { comready } from 'lib/comready';
-import { send } from 'commercial/modules/messenger/send';
-
-// let webpack know where to get files from
-// __webpack_public_path__ is a special webpack variable
-// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
-// eslint-disable-next-line camelcase,no-undef
-__webpack_public_path__ = `${config.get('page.assetsPath')}javascripts/`;
-
-const updateHeight = () => {
-    fastdom
-        .measure(
-            () =>
-                document.documentElement &&
-                document.documentElement.getBoundingClientRect().height
-        )
-        .then(height => {
-            send('resize', { height });
-        });
-};
-
-Promise.all([
-    window.guardian.polyfilled
-        ? Promise.resolve()
-        : new Promise(resolve => {
-              window.guardian.onPolyfilled = resolve;
-          }),
-    new Promise(domready),
-    new Promise(comready),
-]).then(() => {
-    updateHeight();
-    Array.from(document.getElementsByTagName('details'))
-        .slice(0, 1)
-        .forEach(details => {
-            new MutationObserver(updateHeight).observe(details, {
-                attributes: true,
-            });
-        });
-});
diff --git a/static/src/javascripts.flow.archive/bootstraps/atoms/storyquestions.js b/static/src/javascripts.flow.archive/bootstraps/atoms/storyquestions.js
deleted file mode 100644
index 99e387e5ed9..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/atoms/storyquestions.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/atoms/storyquestions.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import domready from 'domready';
-import { comready } from 'lib/comready';
-import config from 'lib/config';
-import fastdom from 'lib/fastdom-promise';
-import { send } from 'commercial/modules/messenger/send';
-
-// let webpack know where to get files from
-// __webpack_public_path__ is a special webpack variable
-// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
-// eslint-disable-next-line camelcase,no-undef
-__webpack_public_path__ = `${config.get('page.assetsPath')}javascripts/`;
-
-const updateHeight = () => {
-    fastdom
-        .measure(
-            () =>
-                document.documentElement &&
-                document.documentElement.getBoundingClientRect().height
-        )
-        .then(height => {
-            send('resize', { height });
-        });
-};
-
-Promise.all([
-    window.guardian.polyfilled
-        ? Promise.resolve()
-        : new Promise(resolve => {
-              window.guardian.onPolyfilled = resolve;
-          }),
-    new Promise(domready),
-    new Promise(comready),
-]).then(() => {
-    updateHeight();
-
-    // Brittle but will work
-    Array.from(document.getElementsByClassName('user__question'))
-        .slice(0, 1)
-        .forEach((sq: Element) => {
-            new MutationObserver(updateHeight).observe(sq, {
-                childList: true,
-                subtree: true,
-            });
-        });
-});
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/accessibility.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/accessibility.js
deleted file mode 100644
index 8ccdcd0c290..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/accessibility.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/accessibility.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component, render } from 'preact/compat';
-
-import { saveState, isOn } from 'common/modules/accessibility/main';
-
-const DOM_ID: string = 'js-accessibility-preferences';
-
-type AccessibilityState = {
-    'flashing-elements': boolean,
-};
-
-class BinaryToggle extends Component<*, *> {
-    render() {
-        return (
-            <div className="form-field">
-                <div className="checkbox">
-                    <label
-                        className="label"
-                        htmlFor={`checkbox-${this.props.name}`}>
-                        <input
-                            id={`checkbox-${this.props.name}`}
-                            key={this.props.name}
-                            type="checkbox"
-                            data-link-name={this.props.name}
-                            defaultChecked={this.props.enabled}
-                            onChange={this.props.handleChange.bind(this)}
-                            // TODO damn me when I decided to implement this page
-                            // global.css includes pasteup-forms 5 which applies ugly styles
-                            // on all inputs. The proper solution is to upgrade pasteup to 6
-                            // but I prefer to leave the pleasure to someone else
-                            // The style object should be removed once we upgrade. Never probably.
-                            style={{
-                                float: 'none',
-                                margin: '3px 0.5ex',
-                            }}
-                        />
-                        {this.props.label}
-                    </label>
-                </div>
-            </div>
-        );
-    }
-}
-
-class Accessibility extends Component<*, *> {
-    constructor() {
-        super();
-        this.state = ({
-            'flashing-elements': isOn('flashing-elements'),
-        }: AccessibilityState);
-    }
-
-    toggle(key: string): void {
-        const newState = {};
-        newState[key] = !this.state[key];
-        this.setState(newState, function() {
-            saveState(this.state);
-        });
-    }
-
-    render(): Object {
-        return (
-            <form className="form">
-                <fieldset className="fieldset">
-                    <p key="p1">
-                        We aim to make this site accessible to a wide audience
-                        and to ensure a great experience for all users by
-                        conforming to World Wide Web Consortium accessibility
-                        guidelines (W3C&apos;s WCAG)
-                    </p>
-                    <p key="p2">
-                        However, if you are having trouble reading this website
-                        you can change the way it looks or disable some of its
-                        functionalities.
-                    </p>
-                    <BinaryToggle
-                        key="flashing-elements"
-                        name="flashing-elements"
-                        label={[
-                            <strong key="label">
-                                Allow flashing elements
-                            </strong>,
-                            this.state['flashing-elements']
-                                ? ' Untick this to disable flashing and moving elements'
-                                : ' Tick this to enable flashing or moving elements.',
-                        ]}
-                        enabled={this.state['flashing-elements']}
-                        handleChange={this.toggle.bind(
-                            this,
-                            'flashing-elements'
-                        )}
-                    />
-                </fieldset>
-            </form>
-        );
-    }
-}
-
-const init = (callback: () => void): void => {
-    const el = document.getElementById(DOM_ID);
-
-    if (el) {
-        render(<Accessibility />, el, callback);
-    }
-};
-
-export { DOM_ID, init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/article-liveblog-common.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/article-liveblog-common.js
deleted file mode 100644
index 533445ecfca..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/article-liveblog-common.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/article-liveblog-common.js
- * to .ts, then delete it.
- */
-
-// @flow
-/** Bootstrap for functionality common to articles and live blogs */
-import fence from 'fence';
-import $ from 'lib/$';
-import { catchErrorsWithContext } from 'lib/robust';
-import { shouldHideFlashingElements } from 'common/modules/accessibility/helpers';
-import { init as initT, enhanceTweets } from 'common/modules/article/twitter';
-import { lastModified } from 'common/modules/ui/last-modified';
-import { init as selectionSharingInit } from 'common/modules/ui/selection-sharing';
-
-const initFence = (): void => {
-    $('.fenced').each(fence.render);
-};
-
-const initTwitter = (): void => {
-    initT();
-    enhanceTweets();
-};
-
-const init = (): void => {
-    catchErrorsWithContext([
-        ['trail-a11y', shouldHideFlashingElements],
-        ['trail-fence', initFence],
-        ['trail-twitter', initTwitter],
-        ['trail-sharing', selectionSharingInit],
-        ['trail-last-modified', lastModified],
-    ]);
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/article-minute.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/article-minute.js
deleted file mode 100644
index b9446610d3e..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/article-minute.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/article-minute.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { init as initLiveblogCommon } from 'bootstraps/enhanced/article-liveblog-common';
-import { initTrails } from 'bootstraps/enhanced/trail';
-import { init as fullHeight } from 'common/modules/ui/full-height';
-
-const init = (): void => {
-    initLiveblogCommon();
-    initTrails();
-    fullHeight();
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/article.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/article.js
deleted file mode 100644
index dc99a787449..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/article.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/article.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable no-new */
-import config from 'lib/config';
-import qwery from 'qwery';
-import $ from 'lib/$';
-import { catchErrorsWithContext } from 'lib/robust';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { getUrlVars } from 'lib/url';
-import {
-    insertTagRichLink,
-    upgradeRichLinks,
-} from 'common/modules/article/rich-links';
-import { upgradeMembershipEvents } from 'common/modules/article/membership-events';
-import { geoMostPopular } from 'common/modules/onward/geo-most-popular';
-import { handleCompletion as handleQuizCompletion } from 'common/modules/atoms/quiz';
-import { init as initLiveblogCommon } from 'bootstraps/enhanced/article-liveblog-common';
-import { initTrails } from 'bootstraps/enhanced/trail';
-import { initCampaign } from 'journalism/modules/render-campaign';
-
-import ophan from 'ophan/ng';
-
-const modules = {
-    initCmpParam() {
-        const allvars = getUrlVars();
-
-        if (allvars.CMP) {
-            $('.element-pass-cmp').each(el => {
-                el.src = `${el.src}?CMP=${allvars.CMP}`;
-            });
-        }
-    },
-
-    initRightHandComponent() {
-        const mainColumn = qwery('.js-content-main-column');
-        // only render when we have >1000px or more (enough space for ad + most popular)
-        if (
-            !config.hasTone('Match reports') &&
-            mainColumn[0] &&
-            mainColumn[0].offsetHeight > 1150 &&
-            isBreakpoint({
-                min: 'desktop',
-            })
-        ) {
-            geoMostPopular.render();
-        } else {
-            mediator.emit('modules:onward:geo-most-popular:cancel');
-        }
-    },
-
-    initQuizListeners() {
-        // This event is for older-style quizzes implemented as interactives. See https://github.com/guardian/quiz-builder
-        mediator.on('quiz/ophan-event', ophan.record);
-    },
-
-    emitReadyEvent() {
-        mediator.emit('page:article:ready');
-    },
-};
-
-const init = () => {
-    catchErrorsWithContext([
-        ['article-trails', initTrails],
-        ['article-liveblog-common', initLiveblogCommon],
-        ['article-righthand-component', modules.initRightHandComponent],
-        ['article-cmp-param', modules.initCmpParam],
-        ['article-quiz-listeners', modules.initQuizListeners],
-        ['article-rich-links', upgradeRichLinks],
-        ['article-tag-rich-link', insertTagRichLink],
-        ['article-upgrade-membership-events', upgradeMembershipEvents],
-        ['article-mediator-emit-event', modules.emitReadyEvent],
-        ['article-handle-quiz-completion', handleQuizCompletion],
-        ['article-campaign', initCampaign],
-    ]);
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/common.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/common.js
deleted file mode 100644
index a8cefa40d6a..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/common.js
+++ /dev/null
@@ -1,355 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/common.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable no-new */
-/* TODO - fix module constructors */
-import bean from 'bean';
-import config from 'lib/config';
-import { cleanUp, addSessionCookie } from 'lib/cookies';
-import mediator from 'lib/mediator';
-import { getUrlVars } from 'lib/url';
-import { catchErrorsWithContext } from 'lib/robust';
-import { storage } from '@guardian/libs';
-import { mediaListener } from 'common/modules/analytics/media-listener';
-import interactionTracking from 'common/modules/analytics/interaction-tracking';
-import { initAnalyticsRegister } from 'common/modules/analytics/register';
-import { ScrollDepth } from 'common/modules/analytics/scrollDepth';
-import { requestUserSegmentsFromId } from 'common/modules/commercial/user-ad-targeting';
-import {
-    refresh as refreshUserFeatures,
-    extendContribsCookieExpiry,
-} from 'common/modules/commercial/user-features';
-import { initCommentCount } from 'common/modules/discussion/comment-count';
-import { init as initCookieRefresh } from 'common/modules/identity/cookierefresh';
-import { initNavigation } from 'common/modules/navigation/navigation';
-import { Profile } from 'common/modules/navigation/profile';
-import { Search } from 'common/modules/navigation/search';
-import { emailSignInBanner } from 'common/modules/identity/email-sign-in-banner/index';
-import {
-    initMembership,
-    membershipBanner,
-} from 'common/modules/navigation/membership';
-import {
-    logHistory,
-    logSummary,
-    showInMegaNav,
-    incrementDailyArticleCount,
-    incrementWeeklyArticleCount,
-} from 'common/modules/onward/history';
-import { initAccessibilityPreferences } from 'common/modules/ui/accessibility-prefs';
-import { initClickstream } from 'common/modules/ui/clickstream';
-import { init as initDropdowns } from 'common/modules/ui/dropdowns';
-import { fauxBlockLink } from 'common/modules/ui/faux-block-link';
-import { init as initRelativeDates } from 'common/modules/ui/relativedates';
-import { init as initTabs } from 'common/modules/ui/tabs';
-import { Toggles } from 'common/modules/ui/toggles';
-import { init as initIdentity } from 'bootstraps/enhanced/identity-common';
-import { init as initBannerPicker } from 'common/modules/ui/bannerPicker';
-import { trackConsentCookies } from 'common/modules/analytics/send-privacy-prefs';
-import { getAllAdConsentsWithState } from 'common/modules/commercial/ad-prefs.lib';
-import ophan from 'ophan/ng';
-import { adFreeBanner } from 'common/modules/commercial/ad-free-banner';
-import { init as initReaderRevenueDevUtils } from 'common/modules/commercial/reader-revenue-dev-utils';
-import {
-    cmpBannerCandidate,
-    addPrivacySettingsLink,
-} from 'common/modules/ui/cmp-ui';
-import { signInGate } from 'common/modules/identity/sign-in-gate';
-import { brazeBanner } from 'commercial/modules/brazeBanner';
-import { readerRevenueBanner } from 'common/modules/commercial/reader-revenue-banner';
-import { getArticleCountConsent } from 'common/modules/commercial/contributions-service';
-import { init as initGoogleAnalytics } from 'common/modules/tracking/google-analytics';
-
-const initialiseTopNavItems = (): void => {
-    const header: ?HTMLElement = document.getElementById('header');
-
-    new Search();
-
-    if (header) {
-        if (config.get('switches.idProfileNavigation')) {
-            const profile: Profile = new Profile({
-                url: config.get('page.idUrl'),
-            });
-            profile.init();
-        }
-    }
-};
-
-const initialiseNavigation = (): void => {
-    initNavigation();
-};
-
-const showTabs = (): void => {
-    ['modules:popular:loaded', 'modules:geomostpopular:ready'].forEach(
-        event => {
-            mediator.on(event, initTabs);
-        }
-    );
-};
-
-const showToggles = (): void => {
-    const toggles: Toggles = new Toggles();
-    toggles.init();
-    toggles.reset();
-    initDropdowns();
-};
-
-const showRelativeDates = (): void => {
-    initRelativeDates();
-};
-
-const initialiseClickstream = (): void => {
-    initClickstream({
-        filter: ['a', 'button'],
-    });
-};
-
-const loadAnalytics = (): void => {
-    interactionTracking.init();
-    if (config.get('switches.ophan')) {
-        if (config.get('switches.scrollDepth')) {
-            mediator.on('scrolldepth:data', ophan.record);
-
-            new ScrollDepth({
-                isContent: /Article|LiveBlog/.test(
-                    config.get('page.contentType')
-                ),
-            });
-        }
-    }
-};
-
-const loadGoogleAnalytics = (): void => {
-    const handleGoogleAnalytics = (gaHasConsent: boolean): void => {
-        if (gaHasConsent && !config.get('page.gaIsInitalised')) {
-            window.guardian.googleAnalytics.initialiseGa()
-        } else {
-            // set window.ga back to a stub function when ga consents are removed so that we don't track events
-            window.ga = function() {}
-            config.set('page.gaIsInitalised', false)
-        }
-    }
-    mediator.on('ga:gaConsentChange', handleGoogleAnalytics)
-}
-
-const cleanupCookies = (): void => {
-    cleanUp([
-        'mmcore.pd',
-        'mmcore.srv',
-        'mmid',
-        'GU_ABFACIA',
-        'GU_FACIA',
-        'GU_ALPHA',
-        'GU_ME',
-        'at',
-        'gu_join_date',
-    ]);
-};
-
-const cleanupLocalStorage = (): void => {
-    const deprecatedKeys = [
-        'gu.subscriber',
-        'gu.contributor',
-        'gu.cachedRecommendations',
-        'gu.recommendationsEnabled',
-        'gu.abb3.exempt',
-    ];
-    deprecatedKeys.forEach(key => storage.local.remove(key));
-};
-
-const updateHistory = (): void => {
-    const page = config.get('page');
-
-    if (page) {
-        const { contentType } = page;
-
-        if (contentType !== 'Network Front') {
-            logSummary(page);
-        }
-
-        logHistory(page);
-    }
-};
-
-const updateArticleCounts = async (): Promise<void> => {
-    const page = config.get('page');
-    const hasConsentedToArticleCounts = await getArticleCountConsent();
-
-    if (page && hasConsentedToArticleCounts) {
-        incrementDailyArticleCount(page);
-        incrementWeeklyArticleCount(page);
-    }
-};
-
-const showHistoryInMegaNav = (): void => {
-    if (config.get('switches.historyTags')) {
-        mediator.once('modules:nav:open', () => {
-            showInMegaNav();
-        });
-    }
-};
-
-const idCookieRefresh = (): void => {
-    if (config.get('switches.idCookieRefresh')) {
-        initCookieRefresh();
-    }
-};
-
-const windowEventListeners = (): void => {
-    ['orientationchange'].forEach(event => {
-        window.addEventListener(
-            event,
-            mediator.emit.bind(mediator, `window:${event}`)
-        );
-    });
-};
-
-const checkIframe = (): void => {
-    if (window.self !== window.top) {
-        const html = document.documentElement;
-        if (html) {
-            html.classList.add('iframed');
-        }
-    }
-};
-
-const normalise = (): void => {
-    if (document.location.hash === '#nfn') {
-        storage.local.set('nfn', true);
-    }
-    if (document.location.hash === '#nnfn') {
-        storage.local.remove('nfn');
-    }
-    if (storage.local.get('nfn')) {
-        import('common/modules/ui/normalise').then(({ go }) => {
-            go();
-        });
-    }
-};
-
-const startRegister = (): void => {
-    initAnalyticsRegister();
-};
-
-const initDiscussion = (): void => {
-    if (config.get('switches.enableDiscussionSwitch')) {
-        initCommentCount();
-    }
-};
-
-const testCookie = (): void => {
-    const queryParams = getUrlVars();
-    if (queryParams.test) {
-        addSessionCookie('GU_TEST', encodeURIComponent(queryParams.test));
-    }
-};
-
-const initOpenOverlayOnClick = (): void => {
-    let offset: ?number;
-    const body = document.body;
-
-    if (!body) return;
-
-    bean.on(body, 'click', '[data-open-overlay-on-click]', e => {
-        const elId = (e.currentTarget: any).getAttribute(
-            'data-open-overlay-on-click'
-        );
-        offset = body.scrollTop;
-        body.classList.add('has-overlay');
-        const el = document.getElementById(elId);
-        if (el) {
-            el.classList.add('overlay--open');
-            body.appendChild(el);
-        }
-    });
-
-    bean.on(body, 'click', '.js-overlay-close', e => {
-        const overlay = (e.target: any).closest('.overlay');
-        if (overlay) {
-            overlay.classList.remove('overlay--open');
-        }
-        body.classList.remove('has-overlay');
-        window.setTimeout(() => {
-            if (offset) {
-                body.scrollTop = offset;
-                offset = null;
-            }
-        }, 1);
-    });
-};
-
-const initPublicApi = (): void => {
-    // BE CAREFUL what you expose here...
-    window.guardian.api = {};
-};
-
-const initialiseBanner = (): void => {
-    // ordered by priority
-    const bannerList = [
-        cmpBannerCandidate,
-        signInGate,
-        membershipBanner,
-        readerRevenueBanner,
-        adFreeBanner,
-        emailSignInBanner,
-        brazeBanner,
-    ];
-
-    initBannerPicker(bannerList);
-};
-
-const initialiseConsentCookieTracking = (): void =>
-    trackConsentCookies(getAllAdConsentsWithState());
-
-const init = (): void => {
-    catchErrorsWithContext([
-        // Analytics comes at the top. If you think your thing is more important then please think again...
-        ['c-analytics', loadAnalytics],
-        ['c-consent-cookie-tracking', initialiseConsentCookieTracking],
-        ['c-identity', initIdentity],
-        ['c-adverts', requestUserSegmentsFromId],
-        ['c-discussion', initDiscussion],
-        ['c-test-cookie', testCookie],
-        ['c-event-listeners', windowEventListeners],
-        ['c-block-link', fauxBlockLink],
-        ['c-iframe', checkIframe],
-        ['c-normalise', normalise],
-        ['c-tabs', showTabs],
-        ['c-top-nav', initialiseTopNavItems],
-        ['c-init-nav', initialiseNavigation],
-        ['c-toggles', showToggles],
-        ['c-dates', showRelativeDates],
-        ['c-clickstream', initialiseClickstream],
-        ['c-history', updateHistory],
-        ['c-id-cookie-refresh', idCookieRefresh],
-        ['c-history-nav', showHistoryInMegaNav],
-        ['c-start-register', startRegister],
-        ['c-cookies', cleanupCookies],
-        ['c-extend-contribs-expiry', extendContribsCookieExpiry],
-        ['c-localStorage', cleanupLocalStorage],
-        ['c-overlay', initOpenOverlayOnClick],
-        ['c-public-api', initPublicApi],
-        ['c-media-listeners', mediaListener],
-        ['c-accessibility-prefs', initAccessibilityPreferences],
-        ['c-user-features', refreshUserFeatures],
-        ['c-membership', initMembership],
-        ['c-banner-picker', initialiseBanner],
-        ['c-increment-article-counts', updateArticleCounts],
-        ['c-reader-revenue-dev-utils', initReaderRevenueDevUtils],
-        ['c-add-privacy-settings-link', addPrivacySettingsLink],
-        ['c-load-google-analytics', loadGoogleAnalytics],
-        ['c-google-analytics', initGoogleAnalytics],
-    ]);
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/crosswords.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/crosswords.js
deleted file mode 100644
index 33abcf41673..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/crosswords.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/crosswords.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { initCrosswords } from 'common/modules/crosswords/main';
-import { initCrosswordDiscussion } from 'common/modules/crosswords/comments';
-import { initSeries } from 'common/modules/crosswords/series';
-
-export const init = (): void => {
-    initCrosswords();
-    initCrosswordDiscussion();
-    initSeries();
-};
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/facia.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/facia.js
deleted file mode 100644
index 0c1a31102e5..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/facia.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/facia.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import config from 'lib/config';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { catchErrorsWithContext } from 'lib/robust';
-import { shouldHideFlashingElements } from 'common/modules/accessibility/helpers';
-import stocks from 'common/modules/business/stocks';
-import { GeoMostPopularFront } from 'facia/modules/onwards/geo-most-popular-front';
-import { GeoMostPopularFrontExtended } from 'facia/modules/onwards/geo-most-popular-front-extended';
-import { ContainerToggle } from 'facia/modules/ui/container-toggle';
-import { init as initShowMore } from 'facia/modules/ui/container-show-more';
-import { lazyLoadContainers } from 'facia/modules/ui/lazy-load-containers';
-import { showUpdatesFromLiveBlog } from 'facia/modules/ui/live-blog-updates';
-import { init as initSnaps } from 'facia/modules/ui/snaps';
-import { Weather } from 'facia/modules/onwards/weather';
-import partial from 'lodash/partial';
-import { videoContainerInit } from 'common/modules/video/video-container';
-import { addContributionsBanner } from 'journalism/modules/audio-series-add-contributions';
-
-const showSnaps = (): void => {
-    initSnaps();
-    mediator.on('modules:container:rendered', initSnaps);
-};
-
-const showContainerShowMore = (): void => {
-    mediator.addListeners({
-        'modules:container:rendered': initShowMore,
-        'page:front:ready': initShowMore,
-    });
-};
-
-const showContainerToggle = (): void => {
-    const containerToggleAdd = context => {
-        $('.js-container--toggle', $(context || document)[0]).each(
-            container => {
-                const toggle = new ContainerToggle(container);
-                toggle.addToggle();
-            }
-        );
-    };
-    mediator.addListeners({
-        'page:front:ready': containerToggleAdd,
-        'modules:geomostpopular:ready': partial(
-            containerToggleAdd,
-            '.js-popular-trails'
-        ),
-    });
-};
-
-const upgradeMostPopularToGeo = (): void => {
-    if (config.get('switches.geoMostPopular')) {
-        if (config.get('switches.extendedMostPopularFronts')) {
-            new GeoMostPopularFrontExtended().go();
-        } else {
-            new GeoMostPopularFront().go();
-        }
-    }
-};
-
-const showWeather = (): void => {
-    if (config.get('switches.weather')) {
-        mediator.on('page:front:ready', () => {
-            Weather.init();
-        });
-    }
-};
-
-const showLiveblogUpdates = (): void => {
-    if (
-        isBreakpoint({
-            min: 'desktop',
-        })
-    ) {
-        mediator.on('page:front:ready', () => {
-            showUpdatesFromLiveBlog();
-        });
-    }
-};
-
-const upgradeVideoPlaylists = (): void => {
-    $('.js-video-playlist').each(el => {
-        videoContainerInit(el);
-    });
-};
-
-const finished = (): void => {
-    mediator.emit('page:front:ready');
-};
-
-const addContributionBannerToAudioSeries = (): void => {
-    const isFlagshipPage = $('#flagship-audio').length > 0;
-    if (isFlagshipPage) {
-        addContributionsBanner();
-    }
-};
-
-const init = (): void => {
-    catchErrorsWithContext([
-        ['f-accessibility', shouldHideFlashingElements],
-        ['f-snaps', showSnaps],
-        ['f-show-more', showContainerShowMore],
-        ['f-container-toggle', showContainerToggle],
-        ['f-geo-most-popular', upgradeMostPopularToGeo],
-        ['f-lazy-load-containers', lazyLoadContainers],
-        ['f-stocks', stocks],
-        ['f-weather', showWeather],
-        ['f-live-blog-updates', showLiveblogUpdates],
-        ['f-video-playlists', upgradeVideoPlaylists],
-        ['f-audio-flagship-contributions', addContributionBannerToAudioSeries],
-        ['f-finished', finished],
-    ]);
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/football.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/football.js
deleted file mode 100644
index 0d4b9d80b85..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/football.js
+++ /dev/null
@@ -1,385 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/football.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import bonzo from 'bonzo';
-import $ from 'lib/$';
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import {
-    isCompetition,
-    isMatch,
-    isFootballStatsPage,
-    isLiveClockwatch,
-} from 'lib/page';
-import reportError from 'lib/report-error';
-import { TableDoughnut } from 'common/modules/charts/table-doughnut';
-import {
-    statsFor,
-    tableFor,
-    matchDayFor,
-} from 'common/modules/sport/football/football';
-import { MatchInfo } from 'common/modules/sport/football/match-info';
-import { MatchListLive } from 'common/modules/sport/football/match-list-live';
-import { tagPageStats } from 'common/modules/sport/football/tag-page-stats';
-import { ScoreBoard } from 'common/modules/sport/score-board';
-import { replaceLocaleTimestamps } from 'common/modules/ui/relativedates';
-
-declare type Extra = {
-    content?: Element,
-    chart?: string,
-    importance?: number,
-    name?: string,
-    ready: boolean,
-};
-
-const renderNav = (
-    match: Object,
-    callback?: (resp: Object, $nav: bonzo, endpoint: string) => void
-): Promise<void> => {
-    const matchInfo = new MatchInfo(match, config.get('page.pageId'));
-
-    return matchInfo
-        .fetch()
-        .then(
-            (resp: Object): void => {
-                let $nav;
-
-                if (resp.nav && resp.nav.trim().length > 0) {
-                    $nav = $.create(resp.nav)
-                        .first()
-                        .each(nav => {
-                            if (match.id || $('.tabs__tab', nav).length > 2) {
-                                $('.js-sport-tabs').append(nav);
-                            }
-                        });
-                }
-
-                if (callback) {
-                    callback(resp, $nav, matchInfo.endpoint);
-                }
-            }
-        )
-        .catch(() => {
-            $('.score-container').remove();
-            $('.js-score').removeClass('u-h');
-        });
-};
-
-const renderExtras = (_extras: Array<?Extra>): void => {
-    const extras = [..._extras].filter(extra => extra);
-    const ready =
-        extras.filter(extra => extra && extra.ready === false).length === 0;
-
-    if (ready) {
-        if (config.get('page.isLiveBlog')) {
-            extras.filter(Boolean).forEach(extra => {
-                $('.js-live-blog__sticky-components').append(extra.content);
-                $('.football-possession').append(extra.chart);
-            });
-        } else {
-            extras.filter(Boolean).forEach(extra => {
-                $('.js-after-article').append(extra.content);
-                $('.football-possession').append(extra.chart);
-            });
-        }
-    }
-};
-
-const renderTable = (competition: string, extras: Array<?Extra>): void => {
-    extras[2] = {
-        ready: false,
-    };
-
-    $.create(
-        `<div class="js-football-table"
-              data-link-name="football-table-embed"></div>
-        `
-    ).each(container => {
-        tableFor(competition)
-            .fetch(container)
-            .then(() => {
-                if ($('.table__container', container).length > 0) {
-                    extras[2] = {
-                        name: 'Table',
-                        importance: 3,
-                        content: container,
-                        ready: true,
-                    };
-                } else {
-                    extras[2] = undefined;
-                }
-
-                renderExtras(extras);
-            })
-            .catch(() => {
-                delete extras[2];
-                renderExtras(extras);
-            });
-    });
-};
-
-const loading = (
-    elem: HTMLElement,
-    message: string = 'Loading…',
-    link: {
-        text: string,
-        href: string,
-    }
-): void => {
-    bonzo(elem).append(
-        bonzo.create(`
-            <div class="loading">
-                <div class="loading__message">${message}</div>
-                    <a href="${link.href}"
-                       class="loading__link">${link.text}</a>
-                    <div class="loading__animation"></div>
-            </div>
-        `)
-    );
-};
-
-const loaded = (elem: HTMLElement): void => {
-    $('.loading', elem).remove();
-};
-
-const init = (): void => {
-    const extras = [];
-
-    isMatch(
-        (match: Object): void => {
-            $('article').addClass('content--has-scores');
-
-            extras[0] = {
-                ready: false,
-            };
-            if (match.pageType === 'stats') {
-                renderNav(match);
-            } else {
-                const $h = $('.js-score');
-                const scoreBoard = new ScoreBoard({
-                    pageType: match.pageType,
-                    parent: $h,
-                    responseDataKey: 'matchSummary',
-                    autoupdated: match.isLive,
-                });
-
-                renderNav(
-                    match,
-                    (resp, $nav, endpoint): void => {
-                        // Test if template is not composed of just whitspace. A content validation check, apparently.
-                        if (!/^\s+$/.test(scoreBoard.template || '')) {
-                            scoreBoard.endpoint = endpoint;
-                            scoreBoard.loadFromJson(resp.matchSummary);
-                        } else {
-                            $h.removeClass('u-h');
-                        }
-
-                        // match stats
-                        if (resp.hasStarted && $nav) {
-                            const statsUrl = $('.tab--stats a', $nav)
-                                .attr('href')
-                                .replace(/^.*\/\/[^/]+/, '');
-
-                            $.create(
-                                `<div class="match-stats__container js-match-stats"></div>`
-                            ).each(container => {
-                                statsFor(statsUrl)
-                                    .fetch(container)
-                                    .then(() => {
-                                        // Chart is passed through seperately as when injected with the rest of the content it isn't responsive in Chrome
-                                        let chart;
-                                        $('.js-chart', container).each(el => {
-                                            chart = new TableDoughnut().render(
-                                                el
-                                            );
-                                        });
-                                        extras[0] = {
-                                            name: 'Match stats',
-                                            importance: 3,
-                                            content: container,
-                                            ready: true,
-                                            chart,
-                                        };
-                                        renderExtras(extras);
-                                    });
-                            });
-                        } else {
-                            delete extras[0];
-                            renderExtras(extras);
-                        }
-
-                        // Group table & Match day
-                        isCompetition((competition: string) => {
-                            extras[1] = {
-                                ready: false,
-                            };
-
-                            // Group table
-                            if (resp.group !== '') {
-                                renderTable(
-                                    `${competition}/${resp.group}`,
-                                    extras
-                                );
-                            }
-
-                            // Other games today
-                            $.create(
-                                `
-                        <div class="js-football-match-day"
-                             data-link-name="football-match-day-embed"></div>
-                    `
-                            ).each(container => {
-                                matchDayFor(competition, resp.matchDate)
-                                    .fetch(container)
-                                    .then(() => {
-                                        extras[1] = {
-                                            name: 'Today’s matches',
-                                            importance: 2,
-                                            content: container,
-                                            ready: true,
-                                        };
-                                        renderExtras(extras);
-                                    })
-                                    .catch(() => {
-                                        delete extras[1];
-                                        renderExtras(extras);
-                                    });
-                            });
-                        });
-                    }
-                );
-            }
-        }
-    );
-
-    isCompetition((competition: string) => {
-        const $rightHandCol = $('.js-secondary-column').dim().height;
-        if ($rightHandCol === 0 || $rightHandCol > 1800) {
-            renderTable(competition, extras);
-        }
-    });
-
-    isFootballStatsPage(() => {
-        console.log('stats page');
-        $('.js-chart').each(el => {
-            $('.football-possession').append(new TableDoughnut().render(el));
-        });
-    });
-
-    isLiveClockwatch(() => {
-        const ml = new MatchListLive(
-            'match-day',
-            isCompetition() || 'premierleague',
-            config.dateFromSlug()
-        );
-        const $img = $('.media-primary');
-        const $matchListContainer = $.create(
-            // $FlowFixMe
-            `<div class="football-matches__container"
-                  data-link-name="football-matches-clockwatch"></div>
-            `.css({ minHeight: $img[0] ? $img[0].offsetHeight : 0 })
-        );
-
-        $img.addClass('u-h');
-
-        loading($matchListContainer[0], 'Fetching today’s matches…', {
-            text: 'Impatient?',
-            href: '/football/live',
-        });
-
-        $('.js-football-meta').append($matchListContainer);
-
-        const handleResponse = (success: boolean): void => {
-            if (
-                !success ||
-                $('.football-match', $matchListContainer[0]).length === 0
-            ) {
-                ml.destroy();
-                $matchListContainer.remove();
-                $img.removeClass('u-h');
-            }
-
-            $matchListContainer.css({ minHeight: 0 });
-            loaded($matchListContainer[0]);
-        };
-
-        ml.fetch($matchListContainer[0])
-            .then(() => {
-                handleResponse(true);
-            })
-            .catch(() => {
-                handleResponse(false);
-            });
-    });
-
-    // Binding
-    bean.on(
-        document.body,
-        'click',
-        '.js-show-more-football-matches',
-        (e: Event): void => {
-            e.preventDefault();
-
-            const el = e.currentTarget;
-
-            if (el && el instanceof HTMLAnchorElement) {
-                const href = el.getAttribute('href');
-                const putsMore = el.getAttribute('data-puts-more-into');
-                const newData = el.getAttribute('data-new-url');
-
-                if (href && putsMore && newData) {
-                    fetchJson(`${href}.json`)
-                        .then(resp => {
-                            $.create(resp.html).each(html => {
-                                const htmlContainer = document.querySelector(
-                                    `[data-show-more-contains="${putsMore}"]`
-                                );
-
-                                if (htmlContainer) {
-                                    replaceLocaleTimestamps(html);
-                                    htmlContainer.appendChild(html);
-                                }
-
-                                const nurl = resp[newData];
-
-                                if (nurl) {
-                                    bonzo(el).attr('href', nurl);
-                                } else {
-                                    bonzo(el).remove();
-                                }
-                            });
-                        })
-                        .catch(ex => {
-                            reportError(ex, {
-                                feature: 'football-show-more',
-                            });
-                        });
-                }
-            }
-        }
-    );
-
-    bean.on(
-        document.body,
-        'change',
-        $('form.football-leagues')[0],
-        function onChange() {
-            window.location = this.value;
-        }
-    );
-
-    tagPageStats();
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/identity-common.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/identity-common.js
deleted file mode 100644
index 9a5610a7698..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/identity-common.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/identity-common.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/**
- * Identity crap that has to run on every page (putting in usernames, avatars, etc.)
- *
- * Explicitly NOT stuff that only runs on the identity pages. Put that in profile.js or I will hunt you down. I WILL
- * HUNT YOU DOWN.
- */
-import { catchErrorsWithContext } from 'lib/robust';
-import { isUserLoggedIn } from 'common/modules/identity/api';
-
-// Used to show elements that need signin. Use .sign-in-required
-const setCssClass = (): void => {
-    if (!isUserLoggedIn() || !document.documentElement) {
-        return;
-    }
-    const classList = document.documentElement.classList;
-
-    classList.add('id--signed-in');
-    classList.remove('id--signed-out');
-};
-
-export const init = (): void => {
-    catchErrorsWithContext([['i-css-class', setCssClass]]);
-};
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/liveblog.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/liveblog.js
deleted file mode 100644
index 1f0ef30b9be..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/liveblog.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/liveblog.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { upgradeRichLinks } from 'common/modules/article/rich-links';
-import { Affix } from 'common/modules/experiments/affix';
-import { autoUpdate } from 'common/modules/ui/autoupdate';
-import { init as initRelativeDates } from 'common/modules/ui/relativedates';
-import { init as initLiveblogCommon } from 'bootstraps/enhanced/article-liveblog-common';
-import { initTrails } from 'bootstraps/enhanced/trail';
-import { catchErrorsWithContext } from 'lib/robust';
-
-const affixTimeline = (): void => {
-    const keywordIds = config.get('page.keywordIds', '');
-
-    if (
-        isBreakpoint({
-            min: 'desktop',
-        }) &&
-        !keywordIds.includes('football/football') &&
-        !keywordIds.includes('sport/rugby-union')
-    ) {
-        // eslint-disable-next-line no-new
-        new Affix({
-            element: document.querySelector(
-                '.js-live-blog__sticky-components-container'
-            ),
-            topMarker: document.querySelector('.js-top-marker'),
-            bottomMarker: document.querySelector('.js-bottom-marker'),
-            containerElement: document.querySelector(
-                '.js-live-blog__sticky-components'
-            ),
-        });
-    }
-};
-
-const createAutoUpdate = (): void => {
-    if (config.get('page.isLive')) {
-        autoUpdate();
-    }
-};
-
-const keepTimestampsCurrent = (): void => {
-    window.setInterval(() => initRelativeDates(), 60000);
-};
-
-const init = (): void => {
-    catchErrorsWithContext([
-        ['lb-autoupdate', createAutoUpdate],
-        ['lb-timeline', affixTimeline],
-        ['lb-timestamp', keepTimestampsCurrent],
-        ['lb-richlinks', upgradeRichLinks],
-    ]);
-
-    initTrails();
-    initLiveblogCommon();
-
-    catchErrorsWithContext([
-        [
-            'lb-ready',
-            () => {
-                mediator.emit('page:liveblog:ready');
-            },
-        ],
-    ]);
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/main.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/main.js
deleted file mode 100644
index a35b514a468..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/main.js
+++ /dev/null
@@ -1,413 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/main.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import qwery from 'qwery';
-import raven from 'lib/raven';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { markTime } from 'lib/user-timing';
-import { catchErrorsWithContext } from 'lib/robust';
-import { runAndTrackAbTests } from 'common/modules/experiments/ab';
-import { initSport } from 'bootstraps/enhanced/sport';
-import { trackPerformance } from 'common/modules/analytics/google';
-import { init as geolocationInit } from 'lib/geolocation';
-import { init as initAcquisitionsLinkEnrichment } from 'common/modules/commercial/acquisitions-link-enrichment';
-import {fetchAndRenderEpic} from "common/modules/commercial/contributions-service";
-
-const bootEnhanced = (): void => {
-    const bootstrapContext = (featureName, bootstrap) => {
-        raven.context(
-            {
-                tags: {
-                    feature: featureName,
-                },
-            },
-            bootstrap,
-            []
-        );
-    };
-
-    markTime('App Begin');
-
-    catchErrorsWithContext([
-        [
-            'ga-user-timing-enhanced-start',
-            () => {
-                trackPerformance(
-                    'Javascript Load',
-                    'enhancedStart',
-                    'Enhanced start parse time'
-                );
-            },
-        ],
-
-        //
-        // A/B tests
-        //
-
-        [
-            'ab-tests',
-            () => {
-                catchErrorsWithContext([
-                    [
-                        'ab-tests-run',
-                        () => {
-                            runAndTrackAbTests();
-                        },
-                    ],
-                ]);
-            },
-        ],
-
-        ['enrich-acquisition-links', initAcquisitionsLinkEnrichment],
-
-        ['remote-epics', fetchAndRenderEpic ]
-    ]);
-
-    /** common sets up many things that subsequent modules may need.
-     * here we make sure it runs first; it's a nice way to avoid
-     * race conditions caused by one of the modules below having
-     * a transitive dependency on a module that has already been
-     * loaded.
-     */
-    import(/* webpackMode: "eager" */ 'bootstraps/enhanced/common')
-        .then(({ init }) => {
-            bootstrapContext('common', init);
-        })
-        .then(() => {
-            // geolocation
-            catchErrorsWithContext([['geolocation', geolocationInit]]);
-
-            // Front
-            if (config.get('page.isFront')) {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'facia',
-                            require('bootstraps/enhanced/facia').init
-                        );
-                    },
-                    'facia'
-                );
-            }
-
-            if (
-                config.get('page.contentType') === 'Article' &&
-                !config.get('page.isMinuteArticle')
-            ) {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'article',
-                            require('bootstraps/enhanced/article').init
-                        );
-                        bootstrapContext(
-                            'article : lightbox',
-                            require('common/modules/gallery/lightbox').init
-                        );
-                    },
-                    'article'
-                );
-            }
-
-            if (config.get('page.contentType') === 'Crossword') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'crosswords',
-                            require('bootstraps/enhanced/crosswords').init
-                        );
-                    },
-                    'crosswords'
-                );
-            }
-
-            if (config.get('page.contentType') === 'LiveBlog') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'liveBlog',
-                            require('bootstraps/enhanced/liveblog').init
-                        );
-                        bootstrapContext(
-                            'liveBlog : lightbox',
-                            require('common/modules/gallery/lightbox').init
-                        );
-                    },
-                    'live-blog'
-                );
-            }
-
-            if (config.get('page.isMinuteArticle')) {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'articleMinute',
-                            require('bootstraps/enhanced/article-minute').init
-                        );
-                        bootstrapContext(
-                            'article : lightbox',
-                            require('common/modules/gallery/lightbox').init
-                        );
-                    },
-                    'article-minute'
-                );
-            }
-
-            if (
-                config.get('page.contentType') === 'Audio' ||
-                config.get('page.contentType') === 'Video' ||
-                config.get('page.contentType') === 'Interactive'
-            ) {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'media : trail',
-                            require('bootstraps/enhanced/trail').initTrails
-                        );
-                    },
-                    'trail'
-                );
-            }
-
-            fastdom
-                .measure(() => qwery('audio'))
-                .then(els => {
-                    if (els.length) {
-                        require.ensure(
-                            [],
-                            require => {
-                                bootstrapContext(
-                                    'media-player',
-                                    require('bootstraps/enhanced/media-player')
-                                        .initMediaPlayer
-                                );
-                            },
-                            'media-player'
-                        );
-                    }
-                });
-
-            // Native video player enhancements
-            fastdom
-                .measure(() => qwery('video'))
-                .then(els => {
-                    if (els.length) {
-                        require.ensure(
-                            [],
-                            require => {
-                                bootstrapContext(
-                                    'video-player',
-                                    require('bootstraps/enhanced/video-player')
-                                        .initVideoPlayer
-                                );
-                            },
-                            'video-player'
-                        );
-                    }
-                });
-
-            if (config.get('page.contentType') === 'Gallery') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'gallery',
-                            require('bootstraps/enhanced/gallery').init
-                        );
-                        bootstrapContext(
-                            'gallery : lightbox',
-                            require('common/modules/gallery/lightbox').init
-                        );
-                    },
-                    'gallery'
-                );
-            }
-
-            if (config.get('page.contentType') === 'ImageContent') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'image-content : lightbox',
-                            require('common/modules/gallery/lightbox').init
-                        );
-                        bootstrapContext(
-                            'image-content : trail',
-                            require('bootstraps/enhanced/trail').initTrails
-                        );
-                    },
-                    'image-content'
-                );
-            }
-
-            if (config.get('page.section') === 'football') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'football',
-                            require('bootstraps/enhanced/football').init
-                        );
-                    },
-                    'football'
-                );
-            }
-
-            if (config.get('page.section') === 'sport') {
-                // Leaving this here for now as it's a tiny bootstrap.
-                bootstrapContext('sport', initSport);
-            }
-
-            if (config.get('page.section') === 'identity') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'profile',
-                            require('bootstraps/enhanced/profile').initProfile
-                        );
-                    },
-                    'profile'
-                );
-            }
-
-            if (config.get('page.isPreferencesPage')) {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'preferences',
-                            require('bootstraps/enhanced/preferences').init
-                        );
-                    },
-                    'preferences'
-                );
-            }
-
-            if (config.get('page.section') === 'newsletter-signup-page') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'newsletters',
-                            require('bootstraps/enhanced/newsletters').init
-                        );
-                    },
-                    'newsletters'
-                );
-            }
-
-            // use a #force-sw hash fragment to force service worker registration for local dev
-            if (
-                (window.location.protocol === 'https:' &&
-                    config.get('page.section') !== 'identity') ||
-                window.location.hash.indexOf('force-sw') > -1
-            ) {
-                const navigator = window.navigator;
-
-                if (navigator && navigator.serviceWorker) {
-                    if (config.get('switches.serviceWorkerEnabled')) {
-                        navigator.serviceWorker.register('/service-worker.js');
-                    } else {
-                        navigator.serviceWorker
-                            .getRegistrations()
-                            .then(registrations => {
-                                [...registrations].forEach(registration => {
-                                    registration.unregister();
-                                });
-                            });
-                    }
-                }
-            }
-
-            if (config.get('page.pageId') === 'help/accessibility-help') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'accessibility',
-                            require('bootstraps/enhanced/accessibility').init
-                        );
-                    },
-                    'accessibility'
-                );
-            }
-
-            fastdom.measure(() => {
-                if ($('.youtube-media-atom').length > 0) {
-                    require.ensure(
-                        [],
-                        require => {
-                            bootstrapContext(
-                                'youtube',
-                                require('bootstraps/enhanced/youtube').init
-                            );
-                        },
-                        'youtube'
-                    );
-                }
-            });
-
-            if (window.location.hash.includes('experiments')) {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'experiments',
-                            require('common/modules/experiments')
-                                .showExperiments
-                        );
-                    },
-                    'experiments'
-                );
-            }
-
-            if (config.get('page.contentType') === 'Audio') {
-                require.ensure(
-                    [],
-                    require => {
-                        bootstrapContext(
-                            'audio',
-                            require('common/modules/audio').init
-                        );
-                    },
-                    'audio'
-                );
-            }
-
-            // Mark the end of synchronous execution.
-            markTime('App End');
-            catchErrorsWithContext([
-                [
-                    'ga-user-timing-enhanced-end',
-                    () => {
-                        trackPerformance(
-                            'Javascript Load',
-                            'enhancedEnd',
-                            'Enhanced end parse time'
-                        );
-                    },
-                ],
-            ]);
-        });
-};
-
-export { bootEnhanced };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/media-player.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/media-player.js
deleted file mode 100644
index 22b474aa803..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/media-player.js
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/media-player.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import videojs from 'videojs';
-import 'videojs-ima';
-import 'videojs-embed';
-import 'videojs-persistvolume';
-import 'videojs-playlist';
-import 'videojs-contrib-ads';
-import bean from 'bean';
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import raven from 'lib/raven';
-import $ from 'lib/$';
-import config from 'lib/config';
-import deferToAnalytics from 'lib/defer-to-analytics';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-import events from 'common/modules/video/events';
-import videojsOptions from 'common/modules/video/videojs-options';
-import loadingTmpl from 'raw-loader!common/views/ui/loading.html';
-import { isOn as accessibilityisOn } from 'common/modules/accessibility/main';
-import { Component } from 'common/modules/component';
-import { getVideoInfo, isGeoBlocked } from 'common/modules/video/metadata';
-import { fullscreener } from 'common/modules/media/videojs-plugins/fullscreener';
-
-const initLoadingSpinner = (player: any): void => {
-    player.loadingSpinner.contentEl().innerHTML = loadingTmpl;
-};
-
-const upgradeVideoPlayerAccessibility = (player: any): void => {
-    // Set the video tech element to aria-hidden, and label the buttons in the videojs control bar.
-    $('.vjs-tech', player.el()).attr('aria-hidden', true);
-
-    // Hide superfluous controls, and label useful buttons.
-    $('.vjs-big-play-button', player.el()).attr('aria-hidden', true);
-    $('.vjs-current-time', player.el()).attr('aria-hidden', true);
-    $('.vjs-time-divider', player.el()).attr('aria-hidden', true);
-    $('.vjs-duration', player.el()).attr('aria-hidden', true);
-    $('.vjs-embed-button', player.el()).attr('aria-hidden', true);
-
-    $('.vjs-play-control', player.el()).attr('aria-label', 'video play');
-    $('.vjs-mute-control', player.el()).attr('aria-label', 'video mute');
-    $('.vjs-fullscreen-control', player.el()).attr(
-        'aria-label',
-        'video fullscreen'
-    );
-};
-
-const createVideoPlayer = (el: HTMLElement, options: Object): any => {
-    const player = videojs(el, options);
-
-    const duration = parseInt(el.getAttribute('data-duration'), 10);
-
-    player.ready(() => {
-        if (!Number.isNaN(duration)) {
-            player.duration(duration);
-            player.trigger('timeupdate'); // triggers a refresh of relevant control bar components
-        }
-        // we have some special autoplay rules, so do not want to depend on 'default' autoplay
-        player.guAutoplay = $(el).attr('data-auto-play') === 'true';
-    });
-
-    return player;
-};
-
-const initEndSlate = (player: any, endSlatePath: string): void => {
-    const endSlate = new Component();
-    const endStateClass = 'vjs-has-ended';
-
-    endSlate.endpoint = endSlatePath;
-
-    player.one(events.constructEventName('content:play', player), () => {
-        endSlate.fetch(player.el(), 'html');
-
-        player.on('ended', () => {
-            bonzo(player.el()).addClass(endStateClass);
-        });
-    });
-
-    player.on('playing', () => {
-        bonzo(player.el()).removeClass(endStateClass);
-    });
-};
-
-const enhanceVideo = (el: HTMLMediaElement, autoplay: boolean): any => {
-    const mediaType = el.tagName.toLowerCase();
-    const dataset = el.dataset;
-    const { mediaId, endSlate, embedPath } = dataset;
-
-    // we need to look up the embedPath for main media videos
-    const canonicalUrl = dataset.canonicalUrl || (embedPath || null);
-
-    // the fallback to window.location.pathname should only happen for main media on fronts
-    const gaEventLabel = canonicalUrl || window.location.pathname;
-
-    let mouseMoveIdle;
-    let playerSetupComplete;
-
-    el.classList.add('vjs');
-
-    // end-slate url follows the patten /video/end-slate/section/<section>.json?shortUrl=
-    // only show end-slate if page has a section i.e. not on the `/global` path
-    // e.g https://www.theguardian.com/global/video/2016/nov/01/what-happened-at-the-battle-of-orgreave-video-explainer
-    const showEndSlate =
-        dataset.showEndSlate === 'true' && !!config.get('page.section');
-
-    const player = createVideoPlayer(
-        el,
-        videojsOptions({
-            plugins: {
-                embed: {
-                    embeddable:
-                        !config.get('page.isFront') &&
-                        config.get('switches.externalVideoEmbeds') &&
-                        (config.get('page.contentType') === 'Video' ||
-                            dataset.embeddable === 'true'),
-                    location: `${config.get(
-                        'page.externalEmbedHost'
-                    )}/embed/video/${embedPath || config.get('page.pageId')}`,
-                },
-            },
-        })
-    );
-
-    events.addContentEvents(player, mediaId, mediaType);
-    events.bindGoogleAnalyticsEvents(player, gaEventLabel);
-
-    getVideoInfo(el).then(videoInfo => {
-        if (videoInfo.expired) {
-            player.ready(() => {
-                player.error({
-                    code: 0,
-                    type: 'Video Expired',
-                    message:
-                        'This video has been removed. This could be because it launched early, ' +
-                        'our rights have expired, there was a legal issue, or for another reason.',
-                });
-                player.bigPlayButton.dispose();
-                player.errorDisplay.open();
-                player.controlBar.dispose();
-            });
-        } else {
-            isGeoBlocked(el).then(isVideoGeoBlocked => {
-                if (isVideoGeoBlocked) {
-                    player.ready(() => {
-                        player.error({
-                            code: 0,
-                            type: 'Video Unavailable',
-                            message:
-                                'Sorry, this video is not available in your region due to rights restrictions.',
-                        });
-                        player.bigPlayButton.dispose();
-                        player.errorDisplay.open();
-                        player.controlBar.dispose();
-                    });
-                } else {
-                    // Location of this is important.
-                    events.bindErrorHandler(player);
-                    player.guMediaType = mediaType;
-
-                    playerSetupComplete = new Promise(resolve => {
-                        player.ready(() => {
-                            deferToAnalytics(() => {
-                                events.initOphanTracking(player, mediaId);
-                                events.bindGlobalEvents(player);
-                                events.bindContentEvents(player);
-                            });
-
-                            initLoadingSpinner(player);
-                            upgradeVideoPlayerAccessibility(player);
-
-                            // unglitching the volume on first load
-                            const vol = player.volume();
-
-                            if (vol) {
-                                player.volume(0);
-                                player.volume(vol);
-                            }
-
-                            player.persistvolume({
-                                namespace: 'gu.vjs',
-                            });
-
-                            if (mediaType === 'video') {
-                                player.fullscreener();
-
-                                if (
-                                    showEndSlate &&
-                                    isBreakpoint({
-                                        min: 'desktop',
-                                    })
-                                ) {
-                                    initEndSlate(player, endSlate);
-                                }
-                            } else {
-                                player.playlist({
-                                    mediaType: 'audio',
-                                    continuous: false,
-                                });
-                            }
-
-                            resolve();
-
-                            // built in vjs-user-active is buggy so using custom implementation
-                            player.on('mousemove', () => {
-                                clearTimeout(mouseMoveIdle);
-                                fastdom.mutate(() => {
-                                    player.addClass('vjs-mousemoved');
-                                });
-
-                                mouseMoveIdle = setTimeout(() => {
-                                    fastdom.mutate(() => {
-                                        player.removeClass('vjs-mousemoved');
-                                    });
-                                }, 500);
-                            });
-                        });
-                    });
-
-                    playerSetupComplete.then(() => {
-                        if (
-                            autoplay &&
-                            accessibilityisOn('flashing-elements')
-                        ) {
-                            player.play();
-                        }
-                    });
-                }
-            });
-        }
-    });
-
-    return player;
-};
-
-const initPlayButtons = (root: ?HTMLElement): void => {
-    fastdom.measure(() => {
-        $('.js-video-play-button', root).each(el => {
-            const $el = bonzo(el);
-            bean.on(el, 'click', () => {
-                const container = bonzo(el)
-                    .parent()
-                    .parent();
-                const placeholder = $('.js-video-placeholder', container);
-                const player = $('.js-video-player', container);
-
-                fastdom.mutate(() => {
-                    placeholder
-                        .removeClass('media__placeholder--active')
-                        .addClass('media__placeholder--hidden');
-                    player
-                        .removeClass('media__container--hidden')
-                        .addClass('media__container--active');
-                    $el.removeClass('media__placeholder--active').addClass(
-                        'media__placeholder--hidden'
-                    );
-                    enhanceVideo($('video', player).get(0), true);
-                });
-            });
-            fastdom.mutate(() => {
-                $el.removeClass('media__placeholder--hidden').addClass(
-                    'media__placeholder--active'
-                );
-            });
-        });
-    });
-};
-
-const initPlayer = (): void => {
-    videojs.plugin('fullscreener', fullscreener);
-
-    fastdom.measure(() => {
-        $('.js-gu-media--enhance').each(el => {
-            enhanceVideo(el, false);
-        });
-    });
-};
-
-const initWithRaven = (): void => {
-    raven.wrap(
-        {
-            tags: {
-                feature: 'media',
-            },
-        },
-        () => {
-            initPlayer();
-        }
-    )();
-};
-
-export const initMediaPlayer = (): void => {
-    initWithRaven();
-
-    // Setup play buttons
-    initPlayButtons(document.body);
-    mediator.on('modules:related:loaded', initPlayButtons);
-    mediator.on('page:media:moreinloaded', initPlayButtons);
-};
-
-export { videojs };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/membership.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/membership.js
deleted file mode 100644
index 70732de5af6..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/membership.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/membership.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { deleteOldData } from 'common/modules/commercial/user-features';
-
-export const init = (): void => {
-    deleteOldData();
-};
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/newsletters.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/newsletters.js
deleted file mode 100644
index 143995b5a3a..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/newsletters.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/newsletters.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import fetch from 'lib/fetch';
-import config from 'lib/config';
-import { getUserFromCookie, getUserFromApi } from 'common/modules/identity/api';
-
-const classes = {
-    wrapper: 'js-newsletter-meta',
-    signupForm: 'js-email-sub__form',
-    textInput: 'js-newsletter-card__text-input',
-    signupButton: 'js-newsletter-signup-button',
-    styleSignup: 'newsletter-card__lozenge--submit',
-    signupConfirm: 'js-signup-confirmation',
-    previewButton: 'js-newsletter-preview',
-};
-
-const inputs = {
-    email: 'email',
-    dummy: 'name',
-};
-
-const hideInputAndShowPreview = (el: ?Node): void => {
-    fastdom.mutate(() => {
-        $(`.${classes.textInput}`, el).addClass('is-hidden');
-        $(`.${classes.signupButton}`, el).removeClass(classes.styleSignup);
-        $(`.${classes.previewButton}`, el).removeClass('is-hidden');
-    });
-};
-
-const validate = (form: ?HTMLFormElement): boolean => {
-    // simplistic email address validation
-    const emailAddress = $(`.${classes.textInput}`, form).val();
-    return typeof emailAddress === 'string' && emailAddress.indexOf('@') > -1;
-};
-
-const addSubscriptionMessage = (buttonEl: HTMLButtonElement): void => {
-    const meta = $.ancestor(buttonEl, classes.wrapper);
-    fastdom.mutate(() => {
-        $(buttonEl.form).addClass('is-hidden');
-        $(`.${classes.previewButton}`, meta).addClass('is-hidden');
-        $(`.${classes.signupConfirm}`, meta).removeClass('is-hidden');
-    });
-};
-
-const modifyDataLinkName = (modifier: string) => (el: HTMLButtonElement) : void => {
-    const firstStageName = el.getAttribute('data-link-name') || "undefined-data-link-name"
-    el.setAttribute('data-link-name', firstStageName + modifier)
-}
-
-const modifyLinkNamesForSecondStage = (el: HTMLButtonElement) => modifyDataLinkName('-second-stage')(el)
-
-const modifyLinkNamesForSignedInUser = (el: HTMLButtonElement) => modifyDataLinkName('-signed-in')(el)
-
-const submitForm = (
-    form: ?HTMLFormElement,
-    buttonEl: HTMLButtonElement
-): Promise<void> => {
-    const dummyEmail = encodeURIComponent(
-        $(`input[name="${inputs.dummy}"]`, form).val()
-    ); // Used as a 'bot-bait', see https://stackoverflow.com/a/34623588/2823715
-    const email = encodeURIComponent(
-        $(`input[name="${inputs.email}"]`, form).val()
-    );
-    const listName = encodeURIComponent(
-        $('input[name="listName"]', form).val()
-    );
-    const csrfToken = encodeURIComponent(
-        $('input[name="csrfToken"]', form).val()
-    );
-    const formQueryString = `${
-        inputs.email
-    }=${email}&csrfToken=${csrfToken}&listName=${listName}&${
-        inputs.dummy
-    }=${dummyEmail}`;
-
-    return fetch(`${config.get('page.ajaxUrl')}/email`, {
-        method: 'POST',
-        body: formQueryString,
-        headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/x-www-form-urlencoded',
-        },
-    }).then(response => {
-        if (response.ok) {
-            addSubscriptionMessage(buttonEl);
-        }
-    });
-};
-
-const createSubscriptionFormEventHandlers = (buttonEl: HTMLButtonElement): void => {
-    bean.on(buttonEl, 'click', event => {
-        event.preventDefault();
-        const form = buttonEl.form;
-        if (validate(form)) {
-            submitForm(form, buttonEl);
-        }
-    });
-};
-
-const modifyFormForSignedIn = (el) => {
-    modifyLinkNamesForSignedInUser(el);
-    createSubscriptionFormEventHandlers(el);
-}
-
-const showSignupForm = (buttonEl: HTMLButtonElement): void => {
-    const form = buttonEl.form;
-    const meta = $.ancestor(buttonEl, 'js-newsletter-meta');
-    fastdom.mutate(() => {
-        $(`.${classes.textInput}`, form)
-            .removeClass('is-hidden')
-            .focus();
-        $(`.${classes.signupButton}`, form).addClass(classes.styleSignup);
-        $(`.${classes.previewButton}`, meta).addClass('is-hidden');
-        modifyLinkNamesForSecondStage(buttonEl)
-        createSubscriptionFormEventHandlers(buttonEl);
-    });
-};
-
-const updatePageForLoggedIn = (emailAddress: string, el: ?Node): void => {
-    fastdom.mutate(() => {
-        hideInputAndShowPreview(el);
-        $(`.${classes.textInput}`, el).val(emailAddress);
-    });
-};
-
-const showSecondStageSignup = (buttonEl: HTMLButtonElement): void => {
-    fastdom.mutate(() => {
-        buttonEl.setAttribute('type', 'button');
-        bean.on(buttonEl, 'click', () => {
-            showSignupForm(buttonEl);
-        });
-    });
-};
-
-const enhanceNewsletters = (): void => {
-    if (getUserFromCookie() !== null) {
-        // email address is not stored in the cookie, gotta go to the Api
-        getUserFromApi(userFromId => {
-            if (userFromId && userFromId.primaryEmailAddress) {
-                updatePageForLoggedIn(userFromId.primaryEmailAddress);
-                $.forEachElement(`.${classes.signupButton}`, modifyFormForSignedIn);
-            }
-        });
-    } else {
-        hideInputAndShowPreview();
-        $.forEachElement(`.${classes.signupButton}`, showSecondStageSignup);
-    }
-};
-
-const init = (): void => {
-    enhanceNewsletters();
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/preferences.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/preferences.js
deleted file mode 100644
index 104d01c0b01..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/preferences.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/preferences.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component, render } from 'preact/compat';
-import {
-    getPopularFiltered,
-    deleteFromSummary,
-    showInMegaNav,
-    showInMegaNavEnable,
-    showInMegaNavEnabled,
-} from 'common/modules/onward/history';
-
-class SummaryTagsList extends Component<*, *> {
-    constructor() {
-        super();
-        this.state = {
-            popular: getPopularFiltered(),
-        };
-    }
-
-    handleRemove(tag: string) {
-        deleteFromSummary(tag);
-        this.setState({
-            popular: getPopularFiltered({ flush: true }),
-        });
-        showInMegaNav();
-    }
-
-    render() {
-        const tagElements = this.state.popular.map(tag => (
-            <span
-                className="button button--small button--tag button--secondary"
-                key={tag[0]}>
-                <button
-                    onClick={this.handleRemove.bind(this, tag[0])}
-                    data-link-name={`remove | ${tag[1]}`}>
-                    X
-                </button>
-                <a href={`/${tag[0]}`}>{tag[1]}</a>
-            </span>
-        ));
-
-        let helperText;
-
-        if (!tagElements.length) {
-            helperText = "(You don't have any recently visited topics.)";
-        } else {
-            helperText =
-                "Remove individual topics by clicking 'X' or switch off the functionality below. We respect your privacy and your shortcuts will never be made public.";
-        }
-        tagElements.push(<p key="helper-text">{helperText}</p>);
-
-        return <div>{tagElements}</div>;
-    }
-}
-
-class SummaryTagsSettings extends Component<*, *> {
-    constructor() {
-        super();
-        this.state = {
-            enabled: showInMegaNavEnabled(),
-        };
-    }
-
-    handleToggle() {
-        const isEnabled = !this.state.enabled;
-
-        this.setState({
-            enabled: isEnabled,
-        });
-        showInMegaNavEnable(isEnabled);
-    }
-
-    render() {
-        const toggleAction = this.state.enabled ? 'OFF' : 'ON';
-
-        return (
-            <div data-link-name="suggested links">
-                <p>
-                    These are based on the topics you visit most. You can access
-                    them at any time by opening the &quot;all sections&quot;
-                    menu.
-                </p>
-                {this.state.enabled ? <SummaryTagsList /> : null}
-                <button
-                    onClick={this.handleToggle.bind(this)}
-                    className="button button--medium button--primary"
-                    data-link-name={toggleAction}>
-                    Switch recently visited links {toggleAction}
-                </button>
-            </div>
-        );
-    }
-}
-
-const init = (): void => {
-    const placeholder: ?HTMLElement = document.getElementById(
-        'preferences-history-tags'
-    );
-
-    if (placeholder) {
-        render(<SummaryTagsSettings />, placeholder);
-    }
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/profile.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/profile.js
deleted file mode 100644
index 8e52091ae9f..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/profile.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/profile.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { catchErrorsWithContext } from 'lib/robust';
-import { forgottenEmail, passwordToggle } from 'common/modules/identity/forms';
-import { Formstack } from 'common/modules/identity/formstack';
-import { FormstackIframe } from 'common/modules/identity/formstack-iframe';
-import { FormstackEmbedIframe } from 'common/modules/identity/formstack-iframe-embed';
-import { init as initValidationEmail } from 'common/modules/identity/validation-email';
-import { AccountProfile } from 'common/modules/identity/account-profile';
-import { init as initPublicProfile } from 'common/modules/identity/public-profile';
-import { enhanceFormAjax } from 'common/modules/identity/form-ajax';
-import { enhanceConsents } from 'common/modules/identity/consents';
-import { enhanceConsentJourney } from 'common/modules/identity/consent-journey';
-import { setupLoadingAnimation } from 'common/modules/identity/delete-account';
-import { initHeader } from 'common/modules/identity/header';
-import { initUserAvatars } from 'common/modules/discussion/user-avatars';
-import { initUserEditLink } from 'common/modules/discussion/user-edit-link';
-import { init as initTabs } from 'common/modules/ui/tabs';
-import { enhanceAdPrefs } from 'common/modules/identity/ad-prefs';
-import { enhanceUpsell } from 'common/modules/identity/upsell/upsell';
-
-const initFormstack = (): void => {
-    const attr = 'data-formstack-id';
-    const forms = Array.from(document.querySelectorAll(`[${attr}]`));
-    const iframes = Array.from(
-        document.getElementsByClassName('js-formstack-iframe')
-    );
-
-    forms.forEach(form => {
-        const id = form.getAttribute(attr) || '';
-        const isEmbed = form.className.match(/\bformstack-embed\b/);
-
-        if (isEmbed) {
-            new FormstackEmbedIframe(form, id).init();
-        } else {
-            new Formstack(form, id).init();
-        }
-    });
-
-    // Load old js if necessary
-    iframes.forEach(el => {
-        const iframe: HTMLIFrameElement = (el: any);
-
-        new FormstackIframe(iframe).init();
-    });
-};
-
-const initAccountProfile = (): void => {
-    // eslint-disable-next-line no-new
-    new AccountProfile();
-};
-
-const initProfile = (): void => {
-    const modules: Array<Array<string | Function>> = [
-        ['init-form-stack', initFormstack],
-        ['forgotten-email', forgottenEmail],
-        ['password-toggle', passwordToggle],
-        ['init-validation-email', initValidationEmail],
-        ['init-user-avatars', initUserAvatars],
-        ['init-user-edit-link', initUserEditLink],
-        ['init-tabs', initTabs],
-        ['init-account-profile', initAccountProfile],
-        ['setup-loading-animation', setupLoadingAnimation],
-        ['init-public-profile', initPublicProfile],
-        ['enhance-consents', enhanceConsents],
-        ['enhance-ad-prefs', enhanceAdPrefs],
-        ['enhance-form-ajax', enhanceFormAjax],
-        ['enhance-consent-journey', enhanceConsentJourney],
-        ['init-header', initHeader],
-        ['init-upsell', enhanceUpsell],
-    ];
-    catchErrorsWithContext(modules);
-};
-
-export { initProfile };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/sport.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/sport.js
deleted file mode 100644
index 8f557467d4c..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/sport.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/sport.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import { Component } from 'common/modules/component';
-import config from 'lib/config';
-import fastdom from 'lib/fastdom-promise';
-import { isBreakpoint } from 'lib/detect';
-import { TableDoughnut } from 'common/modules/charts/table-doughnut';
-import { belowArticleVisible } from 'lib/page';
-import { ScoreBoard } from 'common/modules/sport/score-board';
-import { addComponent as addRhcComponent } from 'common/modules/ui/rhc';
-import template from 'lodash/template';
-
-declare type Extra = {
-    name: string,
-    importance: number,
-    content: HTMLElement,
-    ready: boolean,
-};
-
-const renderExtras = (extras: Array<Extra>): void => {
-    if (extras.filter(extra => extra && extra.ready === false).length === 0) {
-        belowArticleVisible(
-            () => {
-                $('.js-after-article').append(
-                    $.create('<div class="football-extras"></div>').each(
-                        extrasContainer => {
-                            extras.forEach(extra => {
-                                extrasContainer.appendChild(extra.content);
-                            });
-                        }
-                    )
-                );
-            },
-            () => {
-                extras.forEach(extra => {
-                    addRhcComponent(extra.content, extra.importance);
-                });
-            }
-        );
-    }
-};
-
-const cricket = (): void => {
-    const matchDate = config.get('page.cricketMatchDate');
-    const team = config.get('page.cricketTeam');
-
-    if (matchDate && team) {
-        const cricketScore = new Component();
-        cricketScore.endpoint = `/sport/cricket/match/${matchDate}/${team}.json`;
-
-        fastdom
-            .measure(() => document.querySelector('.js-cricket-score'))
-            .then(parentEl => {
-                cricketScore.fetch(parentEl, 'summary');
-            });
-    }
-};
-
-const rugby = (): void => {
-    let pageType = '';
-
-    if (config.get('page.isLiveBlog')) {
-        pageType = 'minbymin';
-    } else if (config.hasTone('Match reports')) {
-        pageType = 'report';
-    }
-
-    if (config.get('page.rugbyMatch') && pageType) {
-        const page = encodeURIComponent(config.get('page.pageId'));
-
-        const scoreBoard = new ScoreBoard({
-            pageType,
-            parent: $('.js-score'),
-            autoupdated: config.get('page.isLive'),
-            responseDataKey: 'matchSummary',
-            endpoint: `${config.get('page.rugbyMatch')}.json?page=${page}`,
-        });
-
-        // Rugby score returns the match nav too, to optimise calls.
-        // $FlowFixMe
-        scoreBoard.fetched = (resp: Object): void => {
-            fastdom
-                .measure(() => document.querySelector('article'))
-                .then(liveblog => {
-                    liveblog.classList.add('content--has-scores');
-                });
-
-            fastdom
-                .measure(() => document.querySelector('.content--liveblog'))
-                .then(liveblog => {
-                    liveblog.classList.add('content--liveblog--rugby');
-                });
-
-            $.create(resp.nav)
-                .first()
-                .each(nav => {
-                    // There ought to be exactly two tabs; match report and min-by-min
-                    if ($('.tabs__tab', nav).length === 2) {
-                        $('.js-sport-tabs').empty();
-                        $('.js-sport-tabs').append(nav);
-                    }
-                });
-
-            const contentString = resp.scoreEvents;
-
-            if (isBreakpoint({ max: 'mobile' })) {
-                const $scoreEventsMobile = $.create(
-                    template(resp.dropdown)({
-                        name: 'Score breakdown',
-                        content: contentString,
-                    })
-                );
-
-                if (config.get('page.isLiveBlog')) {
-                    $scoreEventsMobile.addClass('dropdown--key-events');
-                }
-
-                $scoreEventsMobile.addClass('dropdown--active');
-
-                $('.js-after-article').append($scoreEventsMobile);
-            } else {
-                const $scoreEventsTabletUp = $.create(contentString);
-
-                $scoreEventsTabletUp.addClass('hide-on-mobile');
-
-                $('.rugby-stats').remove();
-                $('.score-container').after($scoreEventsTabletUp);
-            }
-
-            $('.js-match-stats').remove();
-            if (resp.matchStat) {
-                $.create(
-                    `<div class="match-stats__container js-match-stats">${
-                        resp.matchStat
-                    }</div>`
-                ).each(container => {
-                    $('.js-chart', container).each(el => {
-                        new TableDoughnut().render(el);
-                    });
-
-                    renderExtras([
-                        {
-                            name: 'Match stats',
-                            importance: 3,
-                            content: container,
-                            ready: true,
-                        },
-                    ]);
-                });
-            }
-
-            $('.js-football-table').remove();
-            if (resp.groupTable) {
-                $.create(
-                    `<div class="js-football-table" data-link-name="football-table-embed">${
-                        resp.groupTable
-                    }</div>`
-                ).each(container => {
-                    renderExtras([
-                        {
-                            name: 'Table',
-                            importance: 3,
-                            content: container,
-                            ready: true,
-                        },
-                    ]);
-                });
-            }
-        };
-
-        scoreBoard.load();
-    }
-};
-
-const initSport = (): void => {
-    cricket();
-    rugby();
-};
-
-export { initSport };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/trail.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/trail.js
deleted file mode 100644
index 90c09fc1418..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/trail.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/trail.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/* eslint-disable no-new */
-
-import fastdom from 'lib/fastdom-promise';
-import qwery from 'qwery';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { catchErrorsWithContext } from 'lib/robust';
-import { addProximityLoader } from 'lib/proximity-loader';
-import { Loader as DiscussionLoader } from 'common/modules/discussion/loader';
-import { isUserLoggedIn } from 'common/modules/identity/api';
-import { OnwardContent } from 'common/modules/onward/onward-content';
-import { MostPopular } from 'common/modules/onward/popular';
-import { related } from 'common/modules/onward/related';
-import { TonalComponent } from 'common/modules/onward/tonal';
-import { loadShareCounts } from 'common/modules/social/share-count';
-import { onwardVideo } from 'common/modules/video/onward-container';
-import { onwardAudio } from 'common/modules/audio/onward-container';
-import { moreInSeriesContainerInit } from 'common/modules/video/more-in-series-container';
-
-const initMoreInSection = (): void => {
-    const {
-        showRelatedContent,
-        isPaidContent,
-        section,
-        shortUrl,
-        seriesId,
-    } = config.get('page', {});
-
-    if (
-        (config.get('page.contentType') !== 'Audio' &&
-            config.get('page.contentType') !== 'Video') ||
-        !showRelatedContent ||
-        isPaidContent ||
-        !section
-    ) {
-        return;
-    }
-
-    const el = $('.js-more-in-section')[0];
-    moreInSeriesContainerInit(
-        el,
-        config.get('page.contentType', '').toLowerCase(),
-        section,
-        shortUrl,
-        seriesId
-    );
-};
-
-const insertOrProximity = (selector, insert) => {
-    if (window.location.hash) {
-        insert();
-    } else {
-        fastdom
-            .measure(() => document.querySelector(selector))
-            .then(el => {
-                if (el) {
-                    addProximityLoader(el, 1500, insert);
-                }
-            });
-    }
-};
-
-const initPopular = () => {
-    if (!config.get('page.isFront')) {
-        insertOrProximity('.js-popular-trails', () => {
-            new MostPopular();
-        });
-    }
-};
-
-const initRelated = () => {
-    if (!(config.get('page.seriesId') || config.get('page.blogIds'))) {
-        insertOrProximity('.js-related', () => {
-            const opts = {
-                excludeTags: [],
-            };
-
-            // exclude ad features from non-ad feature content
-            if (config.get('page.sponsorshipType') !== 'paid-content') {
-                opts.excludeTags.push('tone/advertisement-features');
-            }
-            // don't want to show professional network content on videos or interactives
-            if (
-                'contentType' in config.get('page') &&
-                ['video', 'interactive'].includes(
-                    config.get('page.contentType', '').toLowerCase()
-                )
-            ) {
-                opts.excludeTags.push(
-                    'guardian-professional/guardian-professional'
-                );
-            }
-
-            related(opts);
-        });
-    }
-};
-
-const initOnwardVideoContainer = (): void => {
-    const contentType = config.get('page.contentType', '');
-
-    if (contentType !== 'Audio' && contentType !== 'Video') {
-        return;
-    }
-
-    const mediaType = contentType.toLowerCase();
-    const els = $(
-        mediaType === 'video'
-            ? '.js-video-components-container'
-            : '.js-media-popular'
-    );
-
-    els.each(el => {
-        onwardVideo(el, mediaType);
-    });
-};
-
-const initOnwardAudioContainer = (): void => {
-    if (config.get('page.contentType') === 'Audio') {
-        $('.js-audio-components-container').each(el => onwardAudio(el));
-    }
-};
-
-const initOnwardContent = () => {
-    insertOrProximity('.js-onward', () => {
-        if (
-            (config.get('page.seriesId') || config.get('page.blogIds')) &&
-            config.get('page.showRelatedContent')
-        ) {
-            new OnwardContent(qwery('.js-onward'));
-        } else if (config.get('page.tones', '') !== '') {
-            fastdom
-                .measure(() => Array.from(document.querySelectorAll('.js-onward')))
-                .then(els => {
-                    els.forEach(c => {
-                        new TonalComponent().fetch(c, 'html');
-                    });
-                });
-        }
-    });
-
-    initOnwardVideoContainer();
-    initOnwardAudioContainer();
-};
-
-const initDiscussion = () => {
-    if (
-        config.get('switches.enableDiscussionSwitch') &&
-        config.get('page.commentable')
-    ) {
-        fastdom
-            .measure(() => document.querySelector('.discussion'))
-            .then(el => {
-                if (el) {
-                    new DiscussionLoader().attachTo(el);
-                }
-            });
-    }
-};
-
-const repositionComments = () => {
-    if (!isUserLoggedIn()) {
-        fastdom
-            .measure(() => $('.js-comments'))
-            .then($comments =>
-                fastdom.mutate(() => {
-                    $comments.appendTo(qwery('.js-repositioned-comments'));
-                    if (window.location.hash === '#comments') {
-                        const top = $comments.offset().top;
-                        $(document.body).scrollTop(top);
-                    }
-                })
-            );
-    }
-};
-
-const initTrails = () => {
-    catchErrorsWithContext([
-        ['c-discussion', initDiscussion],
-        ['c-comments', repositionComments],
-        ['c-shares', loadShareCounts],
-        ['c-popular', initPopular],
-        ['c-related', initRelated],
-        ['c-onward', initOnwardContent],
-        ['c-more-in-section', initMoreInSection],
-    ]);
-};
-
-export { initTrails };
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/video-player.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/video-player.js
deleted file mode 100644
index abcd12e787d..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/video-player.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/video-player.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-import bean from 'bean';
-import raven from 'lib/raven';
-import {
-    buildGoogleAnalyticsEvent,
-    getGoogleAnalyticsEventAction,
-} from 'common/modules/video/ga-helper';
-import config from 'lib/config';
-import ophan from 'ophan/ng';
-
-const gaTracker = config.get('googleAnalytics.trackers.editorial');
-const isEmbed = !!window.guardian.isEmbed;
-
-const getCanonicalUrl = (dataset: Object): string =>
-    dataset.canonicalUrl ||
-    // we need to look up the embedPath for main media videos
-    dataset.embedPath ||
-    // the fallback to window.location.pathname should only happen for main media on fronts
-    window.location.pathname;
-
-const bindTrackingEvents = (el: HTMLMediaElement): void => {
-    const mediaType = el.tagName.toLowerCase();
-    const dataset = el.dataset;
-    const { mediaId } = dataset;
-    const canonicalUrl = getCanonicalUrl(dataset);
-
-    const playHandler = () => {
-        // on play, fire GA event
-        const mediaEvent = {
-            mediaId,
-            mediaType,
-            eventType: 'play',
-            isPreroll: false,
-        };
-        const events = {
-            play: 'metric1',
-        };
-
-        window.ga(
-            `${gaTracker}.send`,
-            'event',
-            buildGoogleAnalyticsEvent(
-                mediaEvent,
-                events,
-                canonicalUrl,
-                'guardian-videojs',
-                getGoogleAnalyticsEventAction,
-                mediaId
-            )
-        );
-
-        // on play, fire Ophan event
-        const record = ophanEmbed => {
-            const eventObject = {
-                video: {
-                    id: mediaId,
-                    eventType: 'video:content:play',
-                },
-            };
-
-            ophanEmbed.record(eventObject);
-        };
-
-        if (isEmbed) {
-            require.ensure(
-                [],
-                require => {
-                    record(require('ophan/embed'));
-                },
-                'ophan-embed'
-            );
-        } else {
-            record(ophan);
-        }
-
-        // don't fire events every time video is paused then restarted
-        bean.off(el, 'play', playHandler);
-    };
-
-    bean.on(el, 'play', playHandler);
-    bean.on(el, 'ended', () => {
-        // track re-plays
-        bean.on(el, 'play', playHandler);
-    });
-    bean.on(el, 'play pause', () => {
-        // synthetic click on data-component="main video"
-        const figure: HTMLElement = (el.parentNode &&
-            el.parentNode.parentNode &&
-            el.parentNode.parentNode.parentNode: any);
-
-        figure.click();
-    });
-};
-
-const initPlayer = (): void => {
-    fastdom.measure(() => {
-        $('.js-gu-media--enhance').each(el => {
-            bindTrackingEvents(el);
-            // hide download button in Chrome
-            el.setAttribute('controlsList', 'nodownload');
-        });
-    });
-};
-
-const initWithRaven = (): void => {
-    raven.wrap(
-        {
-            tags: {
-                feature: 'video',
-            },
-        },
-        () => {
-            initPlayer();
-        }
-    )();
-};
-
-export const initVideoPlayer = (): void => {
-    initWithRaven();
-};
diff --git a/static/src/javascripts.flow.archive/bootstraps/enhanced/youtube.js b/static/src/javascripts.flow.archive/bootstraps/enhanced/youtube.js
deleted file mode 100644
index c2205206753..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/enhanced/youtube.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/enhanced/youtube.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { checkElemsForVideos } from 'common/modules/atoms/youtube';
-
-export const init = () => {
-    checkElemsForVideos();
-};
diff --git a/static/src/javascripts.flow.archive/bootstraps/standard/atoms.js b/static/src/javascripts.flow.archive/bootstraps/standard/atoms.js
deleted file mode 100644
index 07640182897..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/standard/atoms.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/standard/atoms.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { services } from 'projects/atoms/services';
-
-const bootstrapAtom = <A>(atomMaker: AtomMaker<A>, atomType: AtomType) => {
-    const atomBuilder = atomMaker[atomType].default(services);
-    Array.from(
-        document.querySelectorAll(`[data-atom-type='${atomType}']`)
-    ).forEach(atomDom => {
-        const atom = atomBuilder(atomDom).runTry();
-        if (typeof atom === 'string') {
-            // eslint-disable-next-line no-console
-            console.log(
-                `Failed to initialise atom [${atomType}/${atomDom.getAttribute(
-                    'data-atom-id'
-                ) || ''}]: ${atom}`
-            );
-        } else if ('requestIdleCallback' in window) {
-            requestIdleCallback(() => {
-                atom.start();
-            });
-        } else {
-            atom.start();
-        }
-    });
-};
-
-const initCharts = () => {
-    const iframes: HTMLIFrameElement[] = ([
-        ...document.querySelectorAll('.atom--chart > .atom__iframe'),
-    ]: any);
-
-    window.addEventListener('message', event => {
-        const iframe: ?HTMLIFrameElement = iframes.find(i => {
-            try {
-                return i.name === event.source.name;
-            } catch (e) {
-                return false;
-            }
-        });
-        if (iframe) {
-            try {
-                const message = JSON.parse(event.data);
-                switch (message.type) {
-                    case 'set-height':
-                        iframe.height = message.value;
-                        break;
-                    default:
-                }
-                // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-    });
-
-    iframes.forEach(iframe => {
-        const src = (iframe.getAttribute('srcdoc') || '')
-            .replace(/<gu-script>/g, '<script>')
-            // eslint-disable-next-line no-useless-concat
-            .replace(/<\/gu-script>/g, '<' + '/script>');
-        iframe.setAttribute('srcdoc', src);
-    });
-};
-
-const initAtoms = () => {
-    if (config.get('page.atomTypes.guide')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/guide/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/guide/article/index');
-                bootstrapAtom(atomMaker, 'guide');
-            },
-            'guide-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.profile')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/profile/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/profile/article/index');
-                bootstrapAtom(atomMaker, 'profile');
-            },
-            'profile-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.qanda')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/qanda/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/qanda/article/index');
-                bootstrapAtom(atomMaker, 'qanda');
-            },
-            'qanda-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.timeline')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/timeline/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/timeline/article/index');
-                bootstrapAtom(atomMaker, 'timeline');
-            },
-            'timeline-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.explainer')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/explainer/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/explainer/article/index');
-                bootstrapAtom(atomMaker, 'explainer');
-            },
-            'explainer-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.commonsdivision')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/commonsdivision/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/commonsdivision/article/index');
-                bootstrapAtom(atomMaker, 'commonsdivision');
-            },
-            'commonsdivision-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.audio')) {
-        require.ensure(
-            [],
-            require => {
-                require('@guardian/atom-renderer/dist/audio/article/index.css');
-                const atomMaker = require('@guardian/atom-renderer/dist/audio/article/index');
-                bootstrapAtom(atomMaker, 'audio');
-            },
-            'audio-atom'
-        );
-    }
-
-    if (config.get('page.atomTypes.chart')) {
-        initCharts();
-    }
-};
-export { initAtoms };
diff --git a/static/src/javascripts.flow.archive/bootstraps/standard/emailEmbeds.js b/static/src/javascripts.flow.archive/bootstraps/standard/emailEmbeds.js
deleted file mode 100644
index 8e0c64d4d89..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/standard/emailEmbeds.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/standard/emailEmbeds.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-const initEmbedResize = () => {
-    const allIframes: HTMLIFrameElement[] = [].slice.call(
-        document.querySelectorAll('.element-embed > .email-sub__iframe')
-    );
-
-    window.addEventListener('message', event => {
-        const iframes: HTMLIFrameElement[] = allIframes.filter(i => {
-            try {
-                return i.src === event.source.location.href;
-            } catch (e) {
-                return false;
-            }
-        });
-        if (iframes.length !== 0) {
-            try {
-                const message = JSON.parse(event.data);
-                switch (message.type) {
-                    case 'set-height':
-                        iframes.forEach( iframe => {
-                            iframe.height = message.value;
-                        })
-                        break;
-                    default:
-                }
-                // eslint-disable-next-line no-empty
-            } catch (e) {
-            }
-        }
-    });
-};
-export { initEmbedResize };
diff --git a/static/src/javascripts.flow.archive/bootstraps/standard/main.js b/static/src/javascripts.flow.archive/bootstraps/standard/main.js
deleted file mode 100644
index f9367e0735b..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/standard/main.js
+++ /dev/null
@@ -1,295 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/standard/main.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/*
-   This file is intended to be downloaded and run ASAP on all pages by all
-   readers.
-
-   While it's ok to run code from here that requires specific host capabilities, it
-   should manage failing gracefully by itself.
-
-   Assume *nothing* about the host...
-
-   This also means you should think *very hard* before adding modules to it,
-   in particular 3rd party modules.
-
-   For this file, performance and breadth of support should take priority over *anything* …
-*/
-
-import fastdom from 'fastdom';
-import raven from 'lib/raven';
-import userPrefs from 'common/modules/user-prefs';
-import { storage } from '@guardian/libs';
-import fetchJSON from 'lib/fetch-json';
-import mediator from 'lib/mediator';
-import { addEventListener } from 'lib/events';
-import {
-    isUserLoggedIn,
-    init as identityInit,
-} from 'common/modules/identity/api';
-import { addCookie } from 'lib/cookies';
-import { catchErrorsWithContext } from 'lib/robust';
-import { markTime } from 'lib/user-timing';
-import { isBreakpoint } from 'lib/detect';
-import config from 'lib/config';
-import { init as initDynamicImport } from 'lib/dynamic-import-init';
-import { newHeaderInit } from 'common/modules/navigation/new-header';
-import { fixSecondaryColumn } from 'common/modules/fix-secondary-column';
-import { trackPerformance } from 'common/modules/analytics/google';
-import debounce from 'lodash/debounce';
-import ophan from 'ophan/ng';
-import { initAtoms } from './atoms';
-import { initEmbedResize } from "./emailEmbeds";
-
-
-const showHiringMessage = (): void => {
-    try {
-        if (!config.get('page.isDev') && config.get('switches.weAreHiring')) {
-            window.console.log(
-                '\n' +
-                    '%cHello.\n' +
-                    '\n' +
-                    '%cWe are hiring – ever thought about joining us? \n' +
-                    '%chttps://workforus.theguardian.com/careers/product-engineering%c \n' +
-                    '\n',
-                'font-family: Georgia, serif; font-size: 32px; color: #052962',
-                'font-family: Georgia, serif; font-size: 16px; color: #767676',
-                'font-family: Helvetica Neue, sans-serif; font-size: 11px; text-decoration: underline; line-height: 1.2rem; color: #767676',
-                ''
-            );
-        }
-    } catch (e) {
-        /* do nothing */
-    }
-};
-
-const handleMembershipAccess = (): void => {
-    const { membershipUrl, membershipAccess, contentId } = config.get('page');
-
-    const redirect = (): void => {
-        window.location.assign(
-            `${membershipUrl}/membership-content?referringContent=${contentId}&membershipAccess=${membershipAccess}`
-        );
-    };
-
-    const updateDOM = (resp: Object): void => {
-        const requireClass = 'has-membership-access-requirement';
-        const requiresPaidTier = membershipAccess.includes('paid-members-only');
-        // Check the users access matches the content
-        const canViewContent = requiresPaidTier
-            ? !!resp.tier && resp.isPaidTier
-            : !!resp.tier;
-
-        if (canViewContent) {
-            const { body } = document;
-
-            if (body) {
-                fastdom.mutate(() => body.classList.remove(requireClass));
-            }
-        } else {
-            redirect();
-        }
-    };
-
-    if (isUserLoggedIn()) {
-        fetchJSON(`${membershipUrl}/user/me`, {
-            mode: 'cors',
-            credentials: 'include',
-        })
-            .then(updateDOM)
-            .catch(redirect);
-    } else {
-        redirect();
-    }
-};
-
-const addScrollHandler = (): void => {
-    let scrollRunning: boolean = false;
-
-    const onScroll = (): void => {
-        if (!scrollRunning) {
-            scrollRunning = true;
-            fastdom.measure(() => {
-                mediator.emitEvent('window:throttledScroll');
-                scrollRunning = false;
-            });
-        }
-    };
-
-    // #? is still still needed?
-    addEventListener(
-        window,
-        'scroll',
-        userPrefs.get('use-idle-callback') && 'requestIdleCallback' in window
-            ? () => {
-                  window.requestIdleCallback(onScroll);
-              }
-            : onScroll,
-        { passive: true }
-    );
-};
-
-const addResizeHandler = (): void => {
-    // Adds a global window:throttledResize event to mediator, which debounces events
-    // until the user has stopped resizing the window for a reasonable amount of time.
-    const onResize = (evt): void => {
-        mediator.emitEvent('window:throttledResize', [evt]);
-    };
-
-    addEventListener(window, 'resize', debounce(onResize, 200), {
-        passive: true,
-    });
-};
-
-const addErrorHandler = (): void => {
-    const oldOnError = window.onerror;
-    window.onerror = (message, filename, lineno, colno, error) => {
-        // Not all browsers pass the error object
-        if (!error || !error.reported) {
-            oldOnError.apply(window, arguments);
-        }
-    };
-
-    // Report unhandled promise rejections
-    // https://github.com/cujojs/when/blob/master/docs/debug-api.md#browser-window-events
-    window.addEventListener('unhandledRejection', event => {
-        const error = event.detail.reason;
-
-        if (error && !error.reported) {
-            raven.captureException(error);
-        }
-    });
-};
-
-const bootStandard = (): void => {
-    markTime('standard start');
-
-    catchErrorsWithContext([
-        [
-            'ga-user-timing-standard-start',
-            () => {
-                trackPerformance(
-                    'Javascript Load',
-                    'standardStart',
-                    'Standard start parse time'
-                );
-            },
-        ],
-    ]);
-
-    /*
-        Add global pooled event listeners
-        CAUTION: those are *passive*, which means calls to event.preventDefault
-        will be ignored
-
-        Adds a global window:throttledScroll event to mediator, which throttles
-        scroll events until there's a spare animationFrame.
-        Callbacks of all listeners to window:throttledScroll are run in a
-        fastdom.measure, meaning they can all perform DOM reads for free
-        (after the first one that needs layout triggers it).
-        However, this means it's VITAL that all writes in callbacks are
-        delegated to fastdom.
-    */
-    addErrorHandler();
-    addScrollHandler();
-    addResizeHandler();
-
-    // polyfill dynamic import
-    initDynamicImport();
-
-    // set a short-lived cookie to trigger server-side ad-freeness
-    // if the user is genuinely ad-free, this one will be overwritten
-    // in user-features
-    if (window.location.hash.match(/[#&]noadsaf(&.*)?$/)) {
-        const daysToLive = 1;
-        const isCrossSubDomain = true;
-        const forcedAdFreeValidSeconds = 30;
-        const forcedAdFreeExpiryTime = new Date();
-        forcedAdFreeExpiryTime.setTime(
-            forcedAdFreeExpiryTime.getTime() + forcedAdFreeValidSeconds * 1000
-        );
-        addCookie(
-            'GU_AF1',
-            forcedAdFreeExpiryTime.getTime().toString(),
-            daysToLive,
-            isCrossSubDomain
-        );
-    }
-
-    // set local storage: gu.alreadyVisited
-    if (window.guardian.isEnhanced) {
-        const key = 'gu.alreadyVisited';
-        const alreadyVisited = parseInt(storage.local.getRaw(key), 10) || 0;
-        storage.local.setRaw(key, alreadyVisited + 1);
-    }
-
-    if (
-        config.get('switches.blockIas') &&
-        config.get('switches.serviceWorkerEnabled') &&
-        navigator.serviceWorker
-    ) {
-        navigator.serviceWorker.ready.then(swreg => {
-            const sw = swreg.active;
-            const ias = window.location.hash.includes('noias');
-            sw.postMessage({ ias });
-        });
-    }
-
-    ophan.setEventEmitter(mediator);
-
-    /*  Membership access
-        Items with either of the following fields require Membership access
-        - membershipAccess=members-only
-        - membershipAccess=paid-members-only
-        Authenticating requires CORS and withCredentials. If we don't cut the
-        mustard then pass through.
-    */
-    if (config.get('page.requiresMembershipAccess')) {
-        handleMembershipAccess();
-    }
-
-    identityInit();
-
-    newHeaderInit();
-
-    const isAtLeastLeftCol: boolean = isBreakpoint({ min: 'leftCol' });
-
-    // we only need to fix the secondary column from leftCol breakpoint up
-    if (config.get('page.hasShowcaseMainElement') && isAtLeastLeftCol) {
-        fixSecondaryColumn();
-    }
-
-    initAtoms();
-
-    initEmbedResize();
-
-    showHiringMessage();
-
-    markTime('standard end');
-
-    catchErrorsWithContext([
-        [
-            'ga-user-timing-standard-end',
-            () => {
-                trackPerformance(
-                    'Javascript Load',
-                    'standardEnd',
-                    'Standard end parse time'
-                );
-            },
-        ],
-    ]);
-};
-
-export { bootStandard };
diff --git a/static/src/javascripts.flow.archive/bootstraps/video-embed.js b/static/src/javascripts.flow.archive/bootstraps/video-embed.js
deleted file mode 100644
index 87d965da15f..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/video-embed.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/video-embed.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { initVideoPlayer } from 'bootstraps/enhanced/video-player';
-import config from 'lib/config';
-
-// Let webpack know where to get files from
-// __webpack_public_path__ is a special webpack variable
-// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
-// eslint-disable-next-line camelcase,no-undef
-__webpack_public_path__ = `${config.get('page.assetsPath')}javascripts/`;
-
-initVideoPlayer();
diff --git a/static/src/javascripts.flow.archive/bootstraps/videojs-embed.js b/static/src/javascripts.flow.archive/bootstraps/videojs-embed.js
deleted file mode 100644
index da1066e6d7d..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/videojs-embed.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/videojs-embed.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-import videojs from 'videojs';
-import 'videojs-embed';
-import $ from 'lib/$';
-import config from 'lib/config';
-import deferToAnalytics from 'lib/defer-to-analytics';
-import template from 'lodash/template';
-import events from 'common/modules/video/events';
-import { fullscreener } from 'common/modules/media/videojs-plugins/fullscreener';
-import { inlineSvg } from 'common/views/svgs';
-import loadingTmpl from 'raw-loader!common/views/ui/loading.html';
-import titlebarTmpl from 'raw-loader!common/views/media/titlebar.html';
-import debounce from 'lodash/debounce';
-import videojsOptions from 'common/modules/video/videojs-options';
-
-// Let webpack know where to get files from
-// __webpack_public_path__ is a special webpack variable
-// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
-// eslint-disable-next-line camelcase,no-undef
-__webpack_public_path__ = `${config.get('page.assetsPath')}javascripts/`;
-
-const initLoadingSpinner = (player: any): void => {
-    player.loadingSpinner.contentEl().innerHTML = loadingTmpl;
-};
-
-const createVideoPlayer = (el: HTMLVideoElement, options: Object): any =>
-    videojs(el, options);
-
-const addTitleBar = (): void => {
-    const data = {
-        webTitle: config.get('page.webTitle'),
-        pageId: config.get('page.pageId'),
-        icon: inlineSvg('marque36icon'),
-    };
-    $('.vjs-control-bar').after(template(titlebarTmpl)(data));
-};
-
-const initPlayer = (): void => {
-    videojs.plugin('fullscreener', fullscreener);
-
-    bonzo(qwery('.js-gu-media--enhance')).each(el => {
-        const $el = bonzo(el).addClass('vjs');
-        const mediaId = $el.attr('data-media-id');
-        const canonicalUrl = $el.attr('data-canonical-url');
-        const gaEventLabel = canonicalUrl;
-        const mediaType = el.tagName.toLowerCase();
-
-        bonzo(el).addClass('vjs');
-
-        const player = createVideoPlayer(
-            el,
-            videojsOptions({
-                controls: true,
-                autoplay:
-                    !!window.location.hash &&
-                    window.location.hash === '#autoplay',
-                preload: 'metadata', // preload='none' & autoplay breaks ad loading on chrome35
-                plugins: {
-                    embed: {
-                        embeddable:
-                            config.get('switches.externalVideoEmbeds') &&
-                            config.get('page.embeddable'),
-                        location: `${config.get(
-                            'page.externalEmbedHost'
-                        )}/embed/video/${config.get('page.pageId')}`,
-                    },
-                },
-            })
-        );
-
-        // Location of this is important
-        events.handleInitialMediaError(player);
-
-        player.ready(() => {
-            initLoadingSpinner(player);
-            addTitleBar();
-
-            events.bindGlobalEvents(player);
-
-            // unglitching the volume on first load
-            const vol = player.volume();
-            if (vol) {
-                player.volume(0);
-                player.volume(vol);
-            }
-
-            player.fullscreener();
-
-            if (config.get('switches.thirdPartyEmbedTracking')) {
-                deferToAnalytics(() => {
-                    events.initOphanTracking(player, mediaId);
-                    events.bindContentEvents(player);
-                });
-            }
-
-            events.addContentEvents(player, mediaId, mediaType);
-            events.bindContentEvents(player);
-            events.bindGoogleAnalyticsEvents(player, gaEventLabel);
-        });
-
-        const mouseMoveIdle = debounce(() => {
-            player.removeClass('vjs-mousemoved');
-        }, 500);
-
-        // built in vjs-user-active is buggy so using custom implementation
-        player.on('mousemove', () => {
-            player.addClass('vjs-mousemoved');
-            mouseMoveIdle();
-        });
-    });
-};
-
-initPlayer();
diff --git a/static/src/javascripts.flow.archive/bootstraps/youtube-embed.js b/static/src/javascripts.flow.archive/bootstraps/youtube-embed.js
deleted file mode 100644
index beee4a3adb6..00000000000
--- a/static/src/javascripts.flow.archive/bootstraps/youtube-embed.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/bootstraps/youtube-embed.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { init } from 'bootstraps/enhanced/youtube';
-
-init();
diff --git a/static/src/javascripts.flow.archive/lib/$.js b/static/src/javascripts.flow.archive/lib/$.js
deleted file mode 100644
index 62cb2ca96da..00000000000
--- a/static/src/javascripts.flow.archive/lib/$.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/$.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-
-// Warning: side effect. This patches the bonzo module for use everywhere
-bonzo.aug({
-    height() {
-        return this.dim().height;
-    },
-});
-
-// #? Use of `Node` throughout this file may need a second look?
-const $ = (selector: ?string | ?Node, context: ?Node | ?string): bonzo =>
-    bonzo(qwery(selector, context));
-
-$.create = (s: string | Node): bonzo => bonzo(bonzo.create(s));
-
-// #? duplicated in lib/closest.js?
-$.ancestor = (el: ?Node, className: string): ?Node => {
-    if (
-        el === null ||
-        el === undefined ||
-        el.nodeName.toLowerCase() === 'html'
-    ) {
-        return null;
-    }
-    if (!el.parentNode || bonzo(el.parentNode).hasClass(className)) {
-        return el.parentNode;
-    }
-    return $.ancestor(el.parentNode, className);
-};
-
-// #? does this offer any value?
-$.forEachElement = (selector: string, fn: Function): Array<Element> => {
-    const els = qwery(selector);
-    els.forEach(fn);
-    return els;
-};
-
-// #es6 can be named exports once we're es6-only
-// eslint-disable-next-line guardian-frontend/no-default-export
-export default $;
diff --git a/static/src/javascripts.flow.archive/lib/$.spec.js b/static/src/javascripts.flow.archive/lib/$.spec.js
deleted file mode 100644
index a938e043c79..00000000000
--- a/static/src/javascripts.flow.archive/lib/$.spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/$.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from './$';
-
-beforeEach(() => {
-    if (document.body) {
-        document.body.innerHTML = `
-        <div class="grandparent" id="ancestorTarget">
-            <div class="parent">
-                <div class="child">child content</div>
-                <div class="sibling"></div>
-            </div>
-        </div>`;
-    }
-});
-
-describe('$', () => {
-    test('finds an element and bonzos it', () => {
-        expect($('.child').text()).toEqual('child content');
-    });
-
-    test('creates an element and bonzos it', () => {
-        expect(
-            $.create('<p><span class="test-class"></span></p>').html()
-        ).toEqual('<span class="test-class"></span>');
-    });
-
-    test('applies a function to an array of elements described by a selector', () => {
-        $.forEachElement('.parent > *', el => el.classList.add('red'));
-        expect($('.child').hasClass('red')).toBe(true);
-        expect($('.sibling').hasClass('red')).toBe(true);
-    });
-
-    test("can find an element's ancestor", () => {
-        expect(
-            $.ancestor(
-                document.querySelector('.child'),
-                'no-element-has-this-class'
-            )
-        ).toBe(null);
-        expect(
-            $.ancestor(document.querySelector('.child'), 'grandparent')
-        ).toEqual(expect.objectContaining({ id: 'ancestorTarget' }));
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/__mocks__/config.js b/static/src/javascripts.flow.archive/lib/__mocks__/config.js
deleted file mode 100644
index f63927def00..00000000000
--- a/static/src/javascripts.flow.archive/lib/__mocks__/config.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/__mocks__/config.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export default {
-    get(path: string, defaultValue: any): any {
-        const value = path
-            .split('.')
-            .reduce((acc: Object, prop: string): any => {
-                if (acc[prop]) {
-                    return acc[prop];
-                }
-
-                return defaultValue;
-            }, this);
-
-        if (typeof value !== 'undefined') {
-            return value;
-        }
-
-        return defaultValue;
-    },
-};
diff --git a/static/src/javascripts.flow.archive/lib/__mocks__/fastdom.js b/static/src/javascripts.flow.archive/lib/__mocks__/fastdom.js
deleted file mode 100644
index b910403ca8c..00000000000
--- a/static/src/javascripts.flow.archive/lib/__mocks__/fastdom.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/__mocks__/fastdom.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import promised from './fastdom-promise'
-
-/* eslint-disable no-unused-vars */
-export default {
-    measure: (fn: Function, ctx: ?Object): number => fn(),
-    mutate: (fn: Function, ctx: ?Object): number => fn(),
-    clear: (id: number): void => {},
-    extend: () => promised
-};
diff --git a/static/src/javascripts.flow.archive/lib/__mocks__/fetch-json.js b/static/src/javascripts.flow.archive/lib/__mocks__/fetch-json.js
deleted file mode 100644
index f27fedf2e6f..00000000000
--- a/static/src/javascripts.flow.archive/lib/__mocks__/fetch-json.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/__mocks__/fetch-json.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable guardian-frontend/no-default-export */
-export default (): Promise<void> => Promise.resolve();
diff --git a/static/src/javascripts.flow.archive/lib/__mocks__/storage.js b/static/src/javascripts.flow.archive/lib/__mocks__/storage.js
deleted file mode 100644
index d3038e7ca8d..00000000000
--- a/static/src/javascripts.flow.archive/lib/__mocks__/storage.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/__mocks__/storage.js
- * to .ts, then delete it.
- */
-
-// @flow
-class StorageMock {
-    storage: any;
-    available: ?boolean;
-
-    constructor() {
-        this.storage = {};
-        this.available = true;
-    }
-
-    isAvailable(): ?boolean {
-        return this.available;
-    }
-
-    get(key: string): any {
-        if (!this.available) {
-            return;
-        }
-
-        let data;
-
-        // try and parse the data
-        try {
-            const value = this.getRaw(key);
-
-            if (value === null || value === undefined) {
-                return null;
-            }
-
-            data = JSON.parse(value);
-
-            if (data === null) {
-                return null;
-            }
-        } catch (e) {
-            this.remove(key);
-            return null;
-        }
-
-        // has it expired?
-        if (data.expires && new Date() > new Date(data.expires)) {
-            this.remove(key);
-            return null;
-        }
-
-        return data.value;
-    }
-
-    set(key: string, value: any, options: Object = {}): any {
-        if (!this.available) {
-            return;
-        }
-
-        this.storage[key] = JSON.stringify({
-            value,
-            expires: options.expires,
-        });
-
-        return this.storage;
-    }
-
-    getRaw(key: string): ?string {
-        if (this.available) {
-            return this.storage[key];
-        }
-    }
-
-    remove(key: string): any {
-        if (this.available) {
-            delete this.storage[key];
-            return this.storage;
-        }
-    }
-}
-
-export const local = new StorageMock();
-export const session = new StorageMock();
diff --git a/static/src/javascripts.flow.archive/lib/ajax.js b/static/src/javascripts.flow.archive/lib/ajax.js
deleted file mode 100644
index 9a57f52e450..00000000000
--- a/static/src/javascripts.flow.archive/lib/ajax.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/ajax.js
- * to .ts, then delete it.
- */
-
-// @flow
-import reqwest from 'reqwest';
-import config from 'lib/config';
-import raven from 'lib/raven';
-// This should no longer be used.
-// Prefer the new 'lib/fetch' or 'lib/fetch-json' library instead, which are es6 compliant.
-let ajaxHost = config.get('page.ajaxUrl', '');
-
-const ajax = (params: Object): any => {
-    const options = params;
-
-    if (!options.url.match('^(https?:)?//')) {
-        options.url = ajaxHost + options.url;
-        options.crossOrigin = true;
-    }
-
-    const r = reqwest(options);
-
-    raven.wrap(
-        {
-            deep: true,
-        },
-        r.then
-    );
-    return r;
-};
-
-ajax.setHost = host => {
-    ajaxHost = host;
-};
-
-export { ajax };
diff --git a/static/src/javascripts.flow.archive/lib/ajax.spec.js b/static/src/javascripts.flow.archive/lib/ajax.spec.js
deleted file mode 100644
index fa765b5d9a6..00000000000
--- a/static/src/javascripts.flow.archive/lib/ajax.spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/ajax.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import reqwest from 'reqwest';
-import { ajax } from 'lib/ajax';
-
-jest.mock('lib/raven');
-jest.mock('reqwest', () => jest.fn());
-jest.mock('lib/config');
-
-const reqwestSpy = (reqwest: any);
-
-describe('ajax', () => {
-    beforeEach(() => {
-        ajax.setHost('http://api.nextgen.guardianapps.co.uk');
-        reqwestSpy.mockImplementation(() => ({
-            then() {},
-        }));
-    });
-
-    afterEach(() => {
-        reqwestSpy.mockReset();
-    });
-
-    it('should proxy calls to reqwest', () => {
-        ajax({ url: '/endpoint.json', param: 'value' });
-
-        expect(reqwestSpy).toHaveBeenCalledWith({
-            url: 'http://api.nextgen.guardianapps.co.uk/endpoint.json',
-            crossOrigin: true,
-            param: 'value',
-        });
-    });
-
-    it('should not touch a url that is already absolute', () => {
-        ajax({ url: 'http://apis.guardian.co.uk/endpoint.json' });
-
-        expect(reqwestSpy).toHaveBeenCalledWith({
-            url: 'http://apis.guardian.co.uk/endpoint.json',
-        });
-    });
-
-    it('should not touch a url that is already absolute (https)', () => {
-        ajax({ url: 'https://apis.guardian.co.uk/endpoint.json' });
-
-        expect(reqwestSpy).toHaveBeenCalledWith({
-            url: 'https://apis.guardian.co.uk/endpoint.json',
-        });
-    });
-
-    it('should not touch a protocol-less url', () => {
-        ajax({ url: '//apis.guardian.co.uk/endpoint.json' });
-
-        expect(reqwestSpy).toHaveBeenCalledWith({
-            url: '//apis.guardian.co.uk/endpoint.json',
-        });
-    });
-
-    it('should be able to update host', () => {
-        ajax.setHost('http://apis.guardian.co.uk');
-        ajax({ url: '/endpoint.json' });
-
-        expect(reqwestSpy).toHaveBeenCalledWith({
-            url: 'http://apis.guardian.co.uk/endpoint.json',
-            crossOrigin: true,
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/array-utils.js b/static/src/javascripts.flow.archive/lib/array-utils.js
deleted file mode 100644
index 7cf7156c8de..00000000000
--- a/static/src/javascripts.flow.archive/lib/array-utils.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/array-utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-const isLastElement = (elementIndex: number, arrayLength: number): boolean =>
-    elementIndex + 1 === arrayLength;
-
-export const appendToLastElement = (
-    array: Array<string>,
-    stringToAppend: string
-): Array<string> =>
-    array.map((element, index) =>
-        isLastElement(index, array.length)
-            ? `${element}${stringToAppend}`
-            : element
-    );
-
-export const throwIfEmptyArray = (name: string, array: ?(any[])): any[] => {
-    if (Array.isArray(array) && array.length > 0) {
-        return array;
-    }
-
-    throw new Error(`${name} is empty`);
-};
diff --git a/static/src/javascripts.flow.archive/lib/capture-ophan-info.js b/static/src/javascripts.flow.archive/lib/capture-ophan-info.js
deleted file mode 100644
index 27b2acdae60..00000000000
--- a/static/src/javascripts.flow.archive/lib/capture-ophan-info.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/capture-ophan-info.js
- * to .ts, then delete it.
- */
-
-// @flow
-import ophan from 'ophan/ng';
-import { getMarkTime } from 'lib/user-timing';
-import performanceAPI from 'lib/window-performance';
-import config from './config';
-
-const captureOphanInfo = (): void => {
-    const supportsPerformanceProperties =
-        performanceAPI &&
-        'navigation' in performanceAPI &&
-        'timing' in performanceAPI;
-
-    if (!supportsPerformanceProperties) {
-        return;
-    }
-
-    const timing = performanceAPI.timing;
-
-    const marks = [
-        'standard boot',
-        'commercial request',
-        'commercial boot',
-        'enhanced request',
-        'enhanced boot',
-    ];
-    const performance = {
-        dns: timing.domainLookupEnd - timing.domainLookupStart,
-        connection: timing.connectEnd - timing.connectStart,
-        firstByte: timing.responseStart - timing.connectEnd,
-        lastByte: timing.responseEnd - timing.responseStart,
-        domContentLoadedEvent:
-            timing.domContentLoadedEventStart - timing.responseEnd,
-        loadEvent: timing.loadEventStart - timing.domContentLoadedEventStart,
-        navType: performanceAPI.navigation.type,
-        redirectCount: performanceAPI.navigation.redirectCount,
-        assetsPerformance: marks.map(mark => ({
-            name: mark,
-            timing: parseInt(getMarkTime(mark) || 0, 10),
-        })),
-    };
-
-    let ophanInfo = {};
-
-    if (config.get('page.dcrCouldRender', false)) {
-        ophanInfo = { ...ophanInfo, ...{ experiences: 'dcrCouldRender' } };
-    }
-
-    ophan.record({
-        ...ophanInfo,
-        ...{
-            performance,
-        },
-    });
-};
-
-export { captureOphanInfo };
diff --git a/static/src/javascripts.flow.archive/lib/comready.js b/static/src/javascripts.flow.archive/lib/comready.js
deleted file mode 100644
index 589656e908e..00000000000
--- a/static/src/javascripts.flow.archive/lib/comready.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/comready.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { send } from 'commercial/modules/messenger/send';
-
-/** Allows cross-frame communication with in-app articles */
-const comready = (resolve: (?any) => void, reject: (?any) => void) => {
-    const MAX_COUNT = 5;
-    let count = 0;
-    send('syn', true);
-    const intId = setInterval(() => {
-        count += 1;
-        if (count === MAX_COUNT) {
-            clearInterval(intId);
-            reject(new Error('Failed to reach page messenger'));
-        }
-        send('syn', true);
-    }, 500);
-    window.addEventListener('message', evt => {
-        if (JSON.parse(evt.data).result !== 'ack') {
-            return;
-        }
-        clearInterval(intId);
-        resolve();
-    });
-};
-
-export { comready };
diff --git a/static/src/javascripts.flow.archive/lib/config.js b/static/src/javascripts.flow.archive/lib/config.js
deleted file mode 100644
index 3bd183ec948..00000000000
--- a/static/src/javascripts.flow.archive/lib/config.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/config.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export type Config = { [string]: any };
-
-// This should be the only module accessing the window config object directly
-// because this is the one that gets imported to all other modules
-// eslint-disable-next-line guardian-frontend/global-config
-const config: Config = window.guardian.config;
-
-// allows you to safely get items from config using a query of
-// dot or bracket notation, with optional default fallback
-const get = (path: string = '', defaultValue: any): any => {
-    const value = path
-        .replace(/\[(.+?)\]/g, '.$1')
-        .split('.')
-        .reduce((o, key) => o && o[key], config);
-
-    if (typeof value !== 'undefined') {
-        return value;
-    }
-
-    return defaultValue;
-};
-
-// let S = { l1, l2, ..., ln } be a non-empty ordered set of labels
-// let s = l1.l2.....ln be the string reprentation of S
-// set(s, x) is the function that takes any value x into the config
-// object following the path described by S, making sure that path
-// actually leads somewhere.
-const set = (path: string, value: any): void => {
-    const pathSegments = path.split('.');
-    const last = pathSegments.pop();
-    pathSegments.reduce((obj, subpath) => {
-        if (typeof obj[subpath] === 'object') {
-            return obj[subpath];
-        }
-        obj[subpath] = {};
-        return obj[subpath];
-    }, config)[last] = value;
-};
-
-const hasTone = (name: string): boolean =>
-    (config.page.tones || '').includes(name);
-
-const hasSeries = (name: string): boolean =>
-    (config.page.series || '').includes(name);
-
-const referencesOfType = (name: string): Array<string> =>
-    (config.page.references || [])
-        .filter(reference => typeof reference[name] !== 'undefined')
-        .map(reference => reference[name]);
-
-const referenceOfType = (name: string): string => referencesOfType(name)[0];
-
-// the date nicely formatted and padded for use as part of a url
-// looks like    2012/04/31
-const webPublicationDateAsUrlPart = (): ?string => {
-    const webPublicationDate = config.page.webPublicationDate;
-
-    if (webPublicationDate) {
-        const pubDate = new Date(webPublicationDate);
-        return `${pubDate.getFullYear()}/${(pubDate.getMonth() + 1)
-            .toString()
-            .padStart(2, '0')}/${pubDate
-            .getDate()
-            .toString()
-            .padStart(2, '0')}`;
-    }
-
-    return null;
-};
-
-// returns 2014/apr/22
-const dateFromSlug = (): ?string => {
-    const s = config.page.pageId.match(/\d{4}\/\w{3}\/\d{2}/);
-    return s ? s[0] : null;
-};
-
-export default Object.assign(
-    {},
-    {
-        get,
-        set,
-        hasTone,
-        hasSeries,
-        referencesOfType,
-        referenceOfType,
-        webPublicationDateAsUrlPart,
-        dateFromSlug,
-    },
-    config
-);
diff --git a/static/src/javascripts.flow.archive/lib/config.spec.js b/static/src/javascripts.flow.archive/lib/config.spec.js
deleted file mode 100644
index 5287456c421..00000000000
--- a/static/src/javascripts.flow.archive/lib/config.spec.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/config.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable guardian-frontend/global-config */
-
-Object.assign(window.guardian.config, {
-    page: {
-        tones: 'foo',
-        series: 'bar',
-        references: [{ baz: 'one' }, { baz: 'two' }],
-        webPublicationDate: '2013-03-20T17:07:00.000Z',
-        pageId:
-            'politics/2017/mar/14/ukip-donor-arron-banks-says-he-has-quit-party-to-set-up-ukip-20',
-        x: {
-            y: {
-                z: 'z',
-            },
-        },
-        falsyValue: false,
-    },
-});
-
-// We need to hoist setting the window.guardian.config to code under test above import
-// (but can't do it with the jest mocks that get auto-hoisted)
-// eslint-disable-next-line import/first
-import config from './config';
-
-describe('Config', () => {
-    it('should have "hasTone" property', () => {
-        expect(config.hasTone('foo')).toBeTruthy();
-        expect(config.hasTone('foo-bad')).toBeFalsy();
-    });
-
-    it('should have "hasSeries" property', () => {
-        expect(config.hasSeries('bar')).toBeTruthy();
-        expect(config.hasSeries('bar-bad')).toBeFalsy();
-    });
-
-    it('should have "referencesOfType" property', () => {
-        expect(config.referencesOfType('baz')).toEqual(['one', 'two']);
-        expect(config.referencesOfType('bar-bad')).toEqual([]);
-    });
-
-    it('should have "referenceOfType" property', () => {
-        expect(config.referenceOfType('baz')).toEqual('one');
-        expect(config.referenceOfType('bar-bad')).toBeUndefined();
-    });
-
-    it('should have "webPublicationDateAsUrlPart" property', () => {
-        expect(config.webPublicationDateAsUrlPart()).toBe('2013/03/20');
-    });
-
-    it('should return the expected dateFromSlug', () => {
-        expect(config.dateFromSlug()).toEqual('2017/mar/14');
-    });
-
-    it('`get` should return a value using dot notation', () => {
-        expect(config.get('page.x.y.z')).toEqual('z');
-    });
-
-    it('`get` should return undefined for non existing indexes', () => {
-        expect(config.get('page.x.z.y')).toEqual(undefined);
-        expect(config.get('page.x.z.y', false)).toEqual(false);
-    });
-
-    it('`get` should return a value using bracket notation', () => {
-        expect(config.get('page[x].y[z]')).toEqual('z');
-    });
-
-    it('`get` should return undefined for non-existing key', () => {
-        expect(config.get('page.qwert')).toBeUndefined();
-    });
-
-    it('`get` should return default value for non-existing key with a default', () => {
-        expect(config.get('page.qwert', ['I am the default'])).toEqual([
-            'I am the default',
-        ]);
-    });
-
-    it('`get` should return falsy value for defined key with a default', () => {
-        expect(config.get('page.falsyValue', 'I am the default')).toEqual(
-            false
-        );
-    });
-
-    it('`set` should safely set (or orverride) a value deep inside the config object', () => {
-        config.set('some.random.path', 'hello');
-        expect(config.get('some.random.path')).toEqual('hello');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/cookies.js b/static/src/javascripts.flow.archive/lib/cookies.js
deleted file mode 100644
index b92dda54631..00000000000
--- a/static/src/javascripts.flow.archive/lib/cookies.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/cookies.js
- * to .ts, then delete it.
- */
-
-// @flow
-import reportError from 'lib/report-error';
-import config from 'lib/config';
-
-const ERR_INVALID_COOKIE_NAME = `Cookie must not contain invalid characters (space, tab and the following characters: '()<>@,;"/[]?={}')`;
-
-// subset of https://github.com/guzzle/guzzle/pull/1131
-const isValidCookieValue = (name: string): boolean =>
-    !/[()<>@,;"\\/[\]?={} \t]/g.test(name);
-
-const getShortDomain = ({
-    isCrossSubdomain = false,
-}: { isCrossSubdomain: boolean } = {}): string => {
-    const domain = document.domain || '';
-
-    if (domain === 'localhost' || config.get('page.isPreview')) {
-        return domain;
-    }
-
-    // Trim any possible subdomain (will be shared with supporter, identity, etc)
-    if (isCrossSubdomain) {
-        return ['', ...domain.split('.').slice(-2)].join('.');
-    }
-    // Trim subdomains for prod (www.theguardian), code (m.code.dev-theguardian) and dev (dev.theguardian, m.thegulocal)
-    return domain.replace(/^(www|m\.code|dev|m)\./, '.');
-};
-
-const getDomainAttribute = ({
-    isCrossSubdomain = false,
-}: { isCrossSubdomain: boolean } = {}): string => {
-    const shortDomain = getShortDomain({ isCrossSubdomain });
-    return shortDomain === 'localhost' ? '' : ` domain=${shortDomain};`;
-};
-
-const removeCookie = (
-    name: string,
-    currentDomainOnly: boolean = false
-): void => {
-    const expires = 'expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-    const path = 'path=/;';
-
-    // Remove cookie, implicitly using the document's domain.
-    document.cookie = `${name}=;${path}${expires}`;
-    if (!currentDomainOnly) {
-        // also remove from the short domain
-        document.cookie = `${name}=;${path}${expires} domain=${getShortDomain()};`;
-    }
-};
-
-const addCookie = (
-    name: string,
-    value: string,
-    daysToLive: ?number,
-    isCrossSubdomain: boolean = false
-): void => {
-    const expires = new Date();
-
-    if (!isValidCookieValue(name) || !isValidCookieValue(value)) {
-        reportError(
-            new Error(`${ERR_INVALID_COOKIE_NAME} .${name}=${value}`),
-            {},
-            false
-        );
-    }
-
-    if (daysToLive) {
-        expires.setDate(expires.getDate() + daysToLive);
-    } else {
-        expires.setMonth(expires.getMonth() + 5);
-        expires.setDate(1);
-    }
-
-    document.cookie = `${name}=${value}; path=/; expires=${expires.toUTCString()};${getDomainAttribute(
-        {
-            isCrossSubdomain,
-        }
-    )}`;
-};
-
-const cleanUp = (names: string[]): void => {
-    names.forEach(name => {
-        removeCookie(name);
-    });
-};
-
-const addForMinutes = (
-    name: string,
-    value: string,
-    minutesToLive: number
-): void => {
-    const expires = new Date();
-
-    if (!isValidCookieValue(name) || !isValidCookieValue(value)) {
-        reportError(
-            new Error(`${ERR_INVALID_COOKIE_NAME} .${name}=${value}`),
-            {},
-            false
-        );
-    }
-
-    expires.setMinutes(expires.getMinutes() + minutesToLive);
-    document.cookie = `${name}=${value}; path=/; expires=${expires.toUTCString()};${getDomainAttribute()}`;
-};
-
-const addSessionCookie = (name: string, value: string): void => {
-    if (!isValidCookieValue(name) || !isValidCookieValue(value)) {
-        reportError(
-            new Error(`${ERR_INVALID_COOKIE_NAME} .${name}=${value}`),
-            {},
-            false
-        );
-    }
-    document.cookie = `${name}=${value}; path=/;${getDomainAttribute()}`;
-};
-
-const getCookieValues = (name: string): string[] => {
-    const nameEq = `${name}=`;
-    const cookies = document.cookie.split(';');
-
-    return cookies.reduce((acc, cookie) => {
-        const cookieTrimmed = cookie.trim();
-
-        if (cookieTrimmed.indexOf(nameEq) === 0) {
-            acc.push(
-                cookieTrimmed.substring(nameEq.length, cookieTrimmed.length)
-            );
-        }
-
-        return acc;
-    }, []);
-};
-
-const getCookie = (name: string): ?string => {
-    const cookieVal = getCookieValues(name);
-
-    if (cookieVal.length > 0) {
-        return cookieVal[0];
-    }
-    return null;
-};
-
-export const _ = {
-    isValidCookieValue,
-};
-
-export {
-    cleanUp,
-    addCookie,
-    addSessionCookie,
-    addForMinutes,
-    removeCookie,
-    getCookie,
-};
diff --git a/static/src/javascripts.flow.archive/lib/cookies.spec.js b/static/src/javascripts.flow.archive/lib/cookies.spec.js
deleted file mode 100644
index 22b55728bcb..00000000000
--- a/static/src/javascripts.flow.archive/lib/cookies.spec.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/cookies.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {
-    cleanUp,
-    addCookie,
-    addSessionCookie,
-    addForMinutes,
-    removeCookie,
-    getCookie,
-    _,
-} from 'lib/cookies';
-
-const { isValidCookieValue } = _;
-
-jest.mock('lib/raven');
-
-// Mock the Date constructor to always return the beginning of time
-const OriginalDate = global.Date;
-global.Date = jest.fn(() => new OriginalDate(0));
-
-describe('Cookies', () => {
-    let cookieValue = '';
-
-    Object.defineProperty(document, 'domain', { value: 'www.theguardian.com' });
-    Object.defineProperty(
-        document,
-        'cookie',
-        ({
-            get() {
-                return cookieValue
-                    .replace('|', ';')
-                    .replace(/^[;|]|[;|]$/g, '');
-            },
-
-            set(value) {
-                const name = value.split('=')[0];
-                const newVal = cookieValue
-                    .split('|')
-                    .filter(cookie => cookie.split('=')[0] !== name);
-
-                newVal.push(value);
-                cookieValue = newVal.join('|');
-            },
-        }: Object)
-    );
-
-    beforeEach(() => {
-        cookieValue = '';
-    });
-
-    it('should be able the clean a list of cookies', () => {
-        document.cookie = 'cookie-1-name=cookie-1-value';
-        document.cookie = 'cookie-2-name=cookie-2-value';
-        document.cookie = 'cookie-3-name=cookie-3-value';
-
-        cleanUp(['cookie-1-name', 'cookie-2-name']);
-
-        const { cookie } = document;
-
-        expect(cookie).toMatch(
-            new RegExp(
-                'cookie-1-name=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=.theguardian.com'
-            )
-        );
-        expect(cookie).toMatch(
-            new RegExp(
-                'cookie-2-name=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=.theguardian.com'
-            )
-        );
-    });
-
-    describe('isValidCookieValue', () => {
-        it('should be able to detect malformed cookies', () => {
-            expect(isValidCookieValue('bad,cookie')).toBeFalsy();
-            expect(isValidCookieValue('bad;cookie')).toBeFalsy();
-            expect(isValidCookieValue('bad cookie')).toBeFalsy();
-            expect(isValidCookieValue('bad  cookie')).toBeFalsy();
-            expect(isValidCookieValue('bad=cookie')).toBeFalsy();
-        });
-
-        it('should be able to detect good cookies', () => {
-            expect(isValidCookieValue('good-cookie')).toBeTruthy();
-            expect(isValidCookieValue('cool.cookie')).toBeTruthy();
-        });
-    });
-
-    it('should be able to set a cookie', () => {
-        addCookie('cookie-1-name', 'cookie-1-value');
-        expect(document.cookie).toMatch(
-            new RegExp(
-                'cookie-1-name=cookie-1-value; path=/; expires=Mon, 01 Jun 1970 00:00:00 GMT; domain=.theguardian.com'
-            )
-        );
-    });
-
-    it('should be able to set a cookie for a specific number of days', () => {
-        addCookie('cookie-1-name', 'cookie-1-value', 7);
-        expect(document.cookie).toEqual(
-            'cookie-1-name=cookie-1-value; path=/; expires=Thu, 08 Jan 1970 00:00:00 GMT; domain=.theguardian.com'
-        );
-    });
-
-    it('should be able to set a cookie for a specific number of minutes', () => {
-        addForMinutes('cookie-1-name', 'cookie-1-value', 91);
-        expect(document.cookie).toEqual(
-            'cookie-1-name=cookie-1-value; path=/; expires=Thu, 01 Jan 1970 01:31:00 GMT; domain=.theguardian.com'
-        );
-    });
-
-    it('should be able to set a session cookie', () => {
-        addSessionCookie('cookie-1-name', 'cookie-1-value');
-        expect(document.cookie).toEqual(
-            'cookie-1-name=cookie-1-value; path=/; domain=.theguardian.com'
-        );
-    });
-
-    it('should be able remove cookies', () => {
-        removeCookie('cookie-1-name');
-        expect(document.cookie).toEqual(
-            'cookie-1-name=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=.theguardian.com'
-        );
-    });
-
-    it('should be able to get a cookie', () => {
-        document.cookie =
-            'optimizelyEndUserId=oeu1398171767331r0.5280374749563634; __qca=P0-938012256-1398171768649; __gads=ID=85aa476fff43818a:T=1398171769:S=ALNI_MbfMkJmvVDwlqDMvJk1oCBV3jNUoA; noticebar_cookie=2; GU_mvt_id=717659; fsr.r=%7B%22d%22%3A90%2C%22i%22%3A%22de37431-93457748-eb61-2581-cce6c%22%2C%22e%22%3A1416223264445%7D; _ga=GA1.2.555908995.1398171761; QSI_HistorySession=http%3A%2F%2Fwww.theguardian.com%2Fworld%2F2014%2Fnov%2F11%2Findian-women-die-mass-steri…ov%2F11%2Fputin-gallant-gesture-chinese-leader-wife-censored~1415796988465; mlUserID=amIIKWa5S6ha; _em_vt=eed0af5afb2b123c5293cbae36c953ec8ab6445d73-180037745475ec3b; GU_EDITION=UK; GU_MI=mi_i%3D13552794%3Bmi_p%3DCRE%2CRCO%3Bgu_pk%3DCRE%2CRCO%3Bmi_e%3D%21201412141140%3Bmi_dn%3DJohn+Duffell%3Bmi_s%3Da7dd96e91fffd189215abaa69107bf13; GU_U=WyIxMzU1Mjc5NCIsImpvaG4uZHVmZmVsbEBndWFyZGlhbi5jby51ayIsIkpvaG4gRHVmZmVsbCIsIjIiLDE0MjQ5NTA4NDgwMDEsMSwxNDA1OTUxMDgyMDAwLHRydWVd.MCwCFErJFuSa3ptSv2V6JYkIjTtTFUKiAhQDLOlsFAulk4mg7yj8DWswB3p_1Q; _cb_ls=1; s_campaign=twt_gu; _chartbeat2=CbF00iBuBN28SPnnY.1417174852129.1417516877697.10001; fsr.s=%7B%22v2%22%3A-2%2C%22v1%22%3A1%2C%22rid%22%3A%22de37431-93457748-eb61-2581-cce6c%22%2C%22ru%22%3A%22http%3A%2F%2Fwww.theguardian.com%2Fuk%22%2C%22r%22%3A%22www.theguardian.com%22%2C%22st%2…22Y%22%7D%2C%22l%22%3A%22en%22%2C%22i%22%3A-1%2C%22f%22%3A1417516902586%7D; fsr.a=1417516904960; s_pers=%20s_fid%3D7BD36E2BEA3FA475-209CB26F08488520%7C1473689665518%3B%20s_daily_habit%3D16315%252C16316%252C16317%252C16318%252C16321%252C16323%252C16325%7C1568297665542%3B%20s_lv%3D1413290266527%7C1507898266527%3B%20s_nr%3D1413290266538-Repeat%7C1444826266538%3B%20s_prev_prop9%3Dno%2520value%7C1417605835703%3B; s_sess=%20s_sv_sid%3D1337774611744%3B%20s_campaign%3DEMCNEWEML6619I2%3B%20s_ppv%3D-%252C17%252C17%252C695%3B%20s_cc%3Dtrue%3B%20s_visit%3D1%3B%20s_sq%3Dguardiangu-network%253D%252526pid%25253DGFE%2525253Anews%2525253AArticle%2525253A10-years-bullying-data%252526pidt%25253D1%252526oid%25253Dhttp%2525253A%2525252F%2525252Fwww.theguardian.com%2525252Fpreference%2525252Fplatform%2525252Fclassic%252…%252525252F2013%252525252Fmay%252525252F23%252525252F1%252526ot%25253DA%3B; OAX=X5GDnlPairgACdD1; optimizelySegments=%7B%22172123993%22%3A%22none%22%2C%22172180831%22%3A%22none%22%2C%22172233718%22%3A%22false%22%2C%22172284779%22%3A%22gc%22%2C%22172321425%22%3A%22false%22%2C%22172361369%22%3A%22referral%22%2C%22172368238%22%3A%22search%22%2C%22172387121%22%3A%22gc%22%2C%22280150302%22%3A%22gc%22%2C%22280266488%22%3A%22false%22%2C%22280820196%22%3A%22none%22%2C%22280923576%22%3A%22referral%22%2C%22290314994%22%3A%22false%22%2C%22290553915%22%3A%22direct%22%2C%22293452255%22%3A%22gc%22%2C%22293462044%22%3A%22none%22%2C%22812091703%22%3A%22true%22%2C%22813360577%22%3A%22true%22%2C%221214390054%22%3A%22true%22%2C%221992100896%22%3A%22false%22%2C%222001830212%22%3A%22none%22%2C%222004900216%22%3A%22referral%22%2C%222005870214%22%3A%22gc%22%7D; optimizelyBuckets=%7B%7D; s_pers=%20s_fid%3D7BD36E2BEA3FA475-209CB26F08488520%7C1473689665518%3B%20s_daily_habit%3D16315%252C16316%252C16317%252C16318%252C16321%252C16323%252C16325%7C1568297665542%3B%20s_lv%3D1413290266527%7C1507898266527%3B%20s_prev_prop9%3Dno%2520value%7C1417605835703%3B%20s_nr%3D1417605906076-Repeat%7C1449141906076%3B; s_sess=%20s_sv_sid%3D1337774611744%3B%20s_campaign%3DEMCNEWEML6619I2%3B%20s_ppv%3D-%252C17%252C17%252C695%3B%20s_cc%3Dtrue%3B%20s_visit%3D1%3B%20s_sq%3Dguardiangu-network%253D%252526pid%25253DGFE%2525253Anews%2525253AArticle%2525253A10-years-bullying-data%252526pidt%25253D1%252526oid%25253Dhttp%2525253A%2525252F%2525252Fwww.theguardian.com%2525252Fpreference%2525252Fplatform%2525252Fclassic%252…%252525252F2013%252525252Fmay%252525252F23%252525252F1%252526ot%25253DA%3B; s_sq=%5B%5BB%5D%5D; GU_VIEW=responsive; s_cc=true; bwid=kvdn_943h8SSC6h3R5hyJ31g; s_fid=470C3252CA9A4650-35C6B54A21985FBA; s_daily_habit=16406%2C16407%2C16408; s_lv=1417705099834; s_nr=1417705099835-Repeat; s_vi=[CS]v1|29AB343C05013259-4000014980021C3D[CE]; cto2_guardian=';
-        expect(getCookie('s_vi')).toEqual(
-            '[CS]v1|29AB343C05013259-4000014980021C3D[CE]'
-        );
-    });
-});
-
-afterAll(() => {
-    global.Date = OriginalDate;
-    expect(new Date().toString()).not.toMatch(new RegExp('Thu Jan 01 1970'));
-});
diff --git a/static/src/javascripts.flow.archive/lib/defer-to-analytics.js b/static/src/javascripts.flow.archive/lib/defer-to-analytics.js
deleted file mode 100644
index f45a2c1c182..00000000000
--- a/static/src/javascripts.flow.archive/lib/defer-to-analytics.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/defer-to-analytics.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-const deferToAnalytics = (afterAnalytics: () => void): void => {
-    afterAnalytics();
-};
-
-export default deferToAnalytics;
diff --git a/static/src/javascripts.flow.archive/lib/detect.js b/static/src/javascripts.flow.archive/lib/detect.js
deleted file mode 100644
index d4bb7041dcb..00000000000
--- a/static/src/javascripts.flow.archive/lib/detect.js
+++ /dev/null
@@ -1,398 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/detect.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-
-declare class MediaQueryListEvent extends Event {
-    matches: boolean;
-    media: string;
-}
-
-type MediaQueryList = {
-    matches: boolean,
-    media: string,
-    onchange: (callback: (event: MediaQueryListEvent) => void) => void,
-    addListener: (callback: (event: MediaQueryListEvent) => void) => void,
-    removeListener: (callback: (event: MediaQueryListEvent) => void) => void,
-};
-
-type BreakpointName =
-    | 'mobile'
-    | 'mobileMedium'
-    | 'mobileLandscape'
-    | 'phablet'
-    | 'tablet'
-    | 'desktop'
-    | 'leftCol'
-    | 'wide';
-
-export type Breakpoint = {
-    name: BreakpointName,
-    isTweakpoint: boolean,
-    listener?: (mql: MediaQueryList) => void,
-    mql?: MediaQueryList,
-    width: number,
-};
-
-// These should match those defined in:
-//   stylesheets/_vars.scss
-//   common/app/layout/Breakpoint.scala
-const breakpoints: Array<Breakpoint> = [
-    {
-        name: 'mobile',
-        isTweakpoint: false,
-        width: 0,
-    },
-    {
-        name: 'mobileMedium',
-        isTweakpoint: true,
-        width: 375,
-    },
-    {
-        name: 'mobileLandscape',
-        isTweakpoint: true,
-        width: 480,
-    },
-    {
-        name: 'phablet',
-        isTweakpoint: true,
-        width: 660,
-    },
-    {
-        name: 'tablet',
-        isTweakpoint: false,
-        width: 740,
-    },
-    {
-        name: 'desktop',
-        isTweakpoint: false,
-        width: 980,
-    },
-    {
-        name: 'leftCol',
-        isTweakpoint: true,
-        width: 1140,
-    },
-    {
-        name: 'wide',
-        isTweakpoint: false,
-        width: 1300,
-    },
-];
-
-let currentBreakpoint: BreakpointName;
-let currentTweakpoint: BreakpointName;
-let supportsPushState: boolean;
-// #?: Consider dropping support for vendor-specific implementations
-let pageVisibility =
-    document.visibilityState ||
-    // $FlowFixMe
-    document.webkitVisibilityState ||
-    // $FlowFixMe
-    document.mozVisibilityState ||
-    // $FlowFixMe
-    document.msVisibilityState ||
-    'visible';
-
-const breakpointNames: Array<BreakpointName> = breakpoints.map(
-    breakpoint => breakpoint.name
-);
-
-const findBreakpoint = (tweakpoint: BreakpointName): BreakpointName => {
-    let breakpointIndex = breakpointNames.indexOf(tweakpoint);
-    let breakpoint = breakpoints[breakpointIndex];
-    while (breakpointIndex >= 0 && breakpoint.isTweakpoint) {
-        breakpointIndex -= 1;
-        breakpoint = breakpoints[breakpointIndex];
-    }
-    return breakpoint.name;
-};
-
-const updateBreakpoint = (breakpoint: Breakpoint): void => {
-    currentTweakpoint = breakpoint.name;
-
-    if (breakpoint.isTweakpoint) {
-        currentBreakpoint = findBreakpoint(currentTweakpoint);
-    } else {
-        currentBreakpoint = currentTweakpoint;
-    }
-};
-
-// this function has a Breakpoint as context, so we can't use fat arrows
-const onMatchingBreakpoint = function(
-    mql: MediaQueryListEvent | MediaQueryList
-): void {
-    if (mql && mql.matches) {
-        updateBreakpoint(this);
-    }
-};
-
-const updateBreakpoints = (): void => {
-    // The implementation for browsers that don't support window.matchMedia is simpler,
-    // but relies on (1) the resize event, (2) layout and (3) hidden generated content
-    // on a pseudo-element
-    const bodyStyle = window.getComputedStyle(document.body, '::after');
-    const breakpointName = bodyStyle.content.substring(
-        1,
-        bodyStyle.content.length - 1
-    );
-    const breakpointIndex = breakpointNames.indexOf(breakpointName);
-    updateBreakpoint(breakpoints[breakpointIndex]);
-};
-
-const initMediaQueryListeners = (): void => {
-    breakpoints.forEach((bp, index, bps) => {
-        // We create mutually exclusive (min-width) and (max-width) media queries
-        // to facilitate the breakpoint/tweakpoint logic.
-        const minWidth = `(min-width: ${bp.width}px)`;
-
-        bp.mql =
-            index < bps.length - 1
-                ? window.matchMedia(
-                      `${minWidth} and (max-width: ${bps[index + 1].width -
-                          1}px)`
-                  )
-                : window.matchMedia(minWidth);
-
-        bp.listener = onMatchingBreakpoint.bind(bp);
-
-        if (bp.mql) {
-            bp.mql.addListener(bp.listener);
-        }
-
-        if (bp.mql && bp.listener) {
-            bp.listener(bp.mql);
-        }
-    });
-};
-
-const initBreakpoints = (): void => {
-    if ('matchMedia' in window) {
-        initMediaQueryListeners();
-    } else {
-        updateBreakpoints();
-        mediator.on('window:throttledResize', updateBreakpoints);
-    }
-};
-
-const getViewport = (): { width: number, height: number } => {
-    if (
-        !window.innerWidth ||
-        !(document && document.body && document.body.clientWidth)
-    ) {
-        return {
-            height: 0,
-            width: 0,
-        };
-    }
-
-    return {
-        width: window.innerWidth || document.body.clientWidth,
-        height: window.innerHeight || document.body.clientHeight,
-    };
-};
-
-const getBreakpoint = (includeTweakpoint?: boolean): BreakpointName =>
-    includeTweakpoint ? currentTweakpoint : currentBreakpoint;
-
-const isBreakpoint = (criteria: Object): boolean => {
-    const indexMin = criteria.min ? breakpointNames.indexOf(criteria.min) : 0;
-    const indexMax = criteria.max
-        ? breakpointNames.indexOf(criteria.max)
-        : breakpointNames.length - 1;
-    const indexCur = breakpointNames.indexOf(
-        currentTweakpoint || currentBreakpoint
-    );
-
-    return indexMin <= indexCur && indexCur <= indexMax;
-};
-
-const hasCrossedBreakpoint = (includeTweakpoint: boolean): Function => {
-    let was = getBreakpoint(includeTweakpoint);
-
-    return (callback: Function): void => {
-        const is = getBreakpoint(includeTweakpoint);
-
-        if (is !== was) {
-            callback(is, was);
-            was = is;
-        }
-    };
-};
-
-// https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability
-const applePayApiAvailable = !!window.ApplePaySession;
-
-const isIOS = (): boolean =>
-    /(iPad|iPhone|iPod touch)/i.test(navigator.userAgent);
-
-const isAndroid = (): boolean => /Android/i.test(navigator.userAgent);
-
-const hasTouchScreen = (): boolean =>
-    'ontouchstart' in window ||
-    (window.DocumentTouch && document instanceof window.DocumentTouch);
-
-const hasPushStateSupport = (): boolean => {
-    if (supportsPushState !== undefined) {
-        return supportsPushState;
-    }
-
-    if (window.history && window.history.pushState) {
-        supportsPushState = true;
-        // Android stock browser lies about its HistoryAPI support.
-        if (window.navigator.userAgent.match(/Android/i)) {
-            supportsPushState = !!window.navigator.userAgent.match(
-                /(Chrome|Firefox)/i
-            );
-        }
-    }
-
-    return supportsPushState;
-};
-
-const initPageVisibility = (): void => {
-    const onchange = (evt: Event = window.event) => {
-        const v = 'visible';
-        const evtMap = {
-            focus: v,
-            focusin: v,
-            pageshow: v,
-            blur: 'hidden',
-            focusout: 'hidden',
-            pagehide: 'hidden',
-        };
-
-        if (evt.type in evtMap) {
-            pageVisibility = evtMap[evt.type];
-        } else {
-            pageVisibility = document && document.hidden ? 'hidden' : 'visible';
-        }
-        mediator.emit(`modules:detect:pagevisibility:${pageVisibility}`);
-    };
-
-    // Standards:
-    if ('hidden' in document) {
-        document.addEventListener('visibilitychange', onchange);
-    } else if ('msHidden' in document) {
-        document.addEventListener('msvisibilitychange', onchange);
-    } else if ('onfocusin' in document) {
-        // IE 9 and lower:
-        window.onfocusout = onchange;
-        window.onfocusin = onchange;
-    } else {
-        // All others:
-        window.onpageshow = onchange;
-        window.onpagehide = onchange;
-        window.onfocus = onchange;
-        window.onblur = onchange;
-    }
-};
-
-const pageVisible = (): boolean => pageVisibility === 'visible';
-
-const isEnhanced = (): boolean => window.guardian.isEnhanced;
-
-const getAdblockInUse = () => {
-    if (config.get('isDotcomRendering', false)) {
-        return Promise.resolve(false);
-    }
-    return new Promise(resolve => {
-        if (window.guardian.adBlockers.hasOwnProperty('active')) {
-            // adblock detection has completed
-            resolve(window.guardian.adBlockers.active);
-        } else {
-            // Push a listener for when the JS loads
-            window.guardian.adBlockers.onDetect.push(resolve);
-        }
-    });
-};
-
-const adblockInUse: Promise<?boolean> = getAdblockInUse();
-
-const getReferrer = (): string => document.referrer || '';
-
-const getUserAgent = ((): string | { browser: string, version: string } => {
-    if (!navigator && !navigator.userAgent) {
-        return '';
-    }
-
-    const ua: string = navigator.userAgent;
-    let tem: ?Array<any>;
-    let M: ?Array<any> =
-        ua.match(
-            /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i
-        ) || [];
-
-    if (M && M[1] && /trident/i.test(M[1])) {
-        tem = /\brv[ :]+(\d+)/g.exec(ua);
-
-        if (tem && tem[1]) {
-            return `IE ${tem[1]}`;
-        }
-    }
-
-    if (M && M[1] === 'Chrome') {
-        tem = ua.match(/\bOPR\/(\d+)/);
-
-        if (tem && tem[1]) {
-            return `Opera ${tem[1]}`;
-        }
-    }
-
-    M =
-        M && M[2]
-            ? [M[1], M[2]]
-            : [navigator.appName, navigator.appVersion, '-?'];
-    tem = ua.match(/version\/(\d+)/i);
-
-    if (tem && tem[1]) {
-        M.splice(1, 1, tem[1]);
-    }
-
-    return {
-        browser: M[0],
-        version: M[1],
-    };
-})();
-
-const isGoogleProxy: () => boolean = () =>
-    !!(
-        navigator &&
-        navigator.userAgent &&
-        (navigator.userAgent.indexOf('Google Web Preview') > -1 ||
-            navigator.userAgent.indexOf('googleweblight') > -1)
-    );
-
-initBreakpoints();
-
-export {
-    hasCrossedBreakpoint,
-    hasTouchScreen,
-    hasPushStateSupport,
-    getBreakpoint,
-    getUserAgent,
-    getViewport,
-    isIOS,
-    applePayApiAvailable,
-    isAndroid,
-    isBreakpoint,
-    initPageVisibility,
-    pageVisible,
-    breakpoints,
-    isEnhanced,
-    adblockInUse,
-    getReferrer,
-    isGoogleProxy,
-};
diff --git a/static/src/javascripts.flow.archive/lib/dotcom-rendering/public-path.js b/static/src/javascripts.flow.archive/lib/dotcom-rendering/public-path.js
deleted file mode 100644
index 03c54404db5..00000000000
--- a/static/src/javascripts.flow.archive/lib/dotcom-rendering/public-path.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/dotcom-rendering/public-path.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-
-// Let webpack know where to get files from
-// __webpack_public_path__ is a special webpack variable
-// https://webpack.js.org/guides/public-path/#set-value-on-the-fly
-// eslint-disable-next-line camelcase,no-undef
-__webpack_public_path__ = `${config.get('frontendAssetsFullURL')}javascripts/`;
diff --git a/static/src/javascripts.flow.archive/lib/dynamic-import-init.js b/static/src/javascripts.flow.archive/lib/dynamic-import-init.js
deleted file mode 100644
index 09d6f216740..00000000000
--- a/static/src/javascripts.flow.archive/lib/dynamic-import-init.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/dynamic-import-init.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import dynamicImportPolyfill from 'dynamic-import-polyfill';
-
-// Provides an import function to use for dynamic imports. **Only works on
-// browsers that support modules.**
-const initialiseDynamicImport = () => {
-    try {
-        // Resolves to: import = (url) => import(url);
-        /* eslint-disable no-new-func */
-        window.guardianPolyfilledImport = new Function(
-            'url',
-            `return import(url)`,
-        );
-    } catch (e) {
-        dynamicImportPolyfill.initialize({
-            importFunctionName: 'guardianPolyfilledImport',
-        });
-    }
-};
-
-// Provides an import function to use for dynamic imports. **Designed for
-// legacy browsers. Dynamic loads a ~4k bundle.**
-const initialiseDynamicImportLegacy = () =>
-    import(/* webpackChunkName: "shimport" */ '@guardian/shimport').then(
-        shimport => {
-            shimport.initialise(); // note this adds a __shimport__ global
-            window.guardianPolyfilledImport = shimport.load;
-        },
-    );
-
-export const init = (): void => {
-    window.guardianPolyfilledImport = (url: string) =>
-        Promise.reject(
-            new Error(`import not polyfilled; attempted import(${url})`),
-        );
-
-    if (window.guardian.supportsModules) {
-        initialiseDynamicImport();
-    } else {
-        initialiseDynamicImportLegacy();
-    }
-};
diff --git a/static/src/javascripts.flow.archive/lib/easing.js b/static/src/javascripts.flow.archive/lib/easing.js
deleted file mode 100644
index 0feab498a0a..00000000000
--- a/static/src/javascripts.flow.archive/lib/easing.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/easing.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/* Create basic easing functions
-
-   Usage:
-     var ease = easing.createEasing('easeOutQuint', 3000); // createEasings a 3 second duration easing function
-     ease(); // each call will return a value from 0 (at t=0) to 1.0 (at t>=duration)
-
-   https://gist.github.com/gre/1650294
-*/
-
-const easeIn = (power: number): Function => t => t ** power;
-
-const easeOut = (power: number): Function => t =>
-    1 - Math.abs((t - 1) ** power);
-
-const easeInOut = (power: number): Function => t =>
-    t < 0.5 ? easeIn(power)(t * 2) / 2 : easeOut(power)(t * 2 - 1) / 2 + 0.5;
-
-// #? these probably should not be generated on parse but on being called
-const easingFunctions = {
-    // no easing, no acceleration
-    linear: easeInOut(1),
-
-    // accelerating from zero velocity
-    easeInQuad: easeIn(2),
-
-    // decelerating to zero velocity
-    easeOutQuad: easeOut(2),
-
-    // acceleration until halfway, then deceleration
-    easeInOutQuad: easeInOut(2),
-
-    // accelerating from zero velocity
-    easeInCubic: easeIn(3),
-
-    // decelerating to zero velocity
-    easeOutCubic: easeOut(3),
-
-    // acceleration until halfway, then deceleration
-    easeInOutCubic: easeInOut(3),
-
-    // accelerating from zero velocity
-    easeInQuart: easeIn(4),
-
-    // decelerating to zero velocity
-    easeOutQuart: easeOut(4),
-
-    // acceleration until halfway, then deceleration
-    easeInOutQuart: easeInOut(4),
-
-    // accelerating from zero velocity
-    easeInQuint: easeIn(5),
-
-    // decelerating to zero velocity
-    easeOutQuint: easeOut(5),
-
-    // acceleration until halfway, then deceleration
-    easeInOutQuint: easeInOut(5),
-};
-
-const createEasing = (type: string, duration: number): Function => {
-    const startTime = new Date();
-    const ease = easingFunctions[type];
-
-    return () => {
-        const elapsed = new Date() - startTime;
-        return ease(Math.min(1, elapsed / duration));
-    };
-};
-
-export { easingFunctions, createEasing };
diff --git a/static/src/javascripts.flow.archive/lib/easing.spec.js b/static/src/javascripts.flow.archive/lib/easing.spec.js
deleted file mode 100644
index b895b1aa2b8..00000000000
--- a/static/src/javascripts.flow.archive/lib/easing.spec.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/easing.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import Chance from 'chance';
-import { easingFunctions, createEasing } from 'lib/easing';
-
-const chance = new Chance();
-jest.useRealTimers();
-
-const TESTS = {
-    linear: [[2, 0], [3, -1], [4, -2]],
-    easeInQuad: [[2, 4], [3, 9]],
-    easeOutQuad: [[2, 0], [3, -3], [4, -8]],
-    easeInOutQuad: [[0.3, 0.18], [0.5, 0.5], [2, -1], [3, -7]],
-    easeInCubic: [[2, 8], [3, 27], [4, 64]],
-    easeOutCubic: [[2, 0], [3, -7], [4, -26]],
-    easeInOutCubic: [[0.3, 0.108], [0.5, 0.5], [2, -3], [3, -31]],
-    easeInQuart: [[2, 16], [3, 81], [4, 256]],
-    easeOutQuart: [[2, 0], [3, -15], [4, -80]],
-    easeInOutQuart: [[0.3, 0.0648], [0.5, 0.5], [2, -7], [3, -127]],
-    easeInQuint: [[2, 32], [3, 243], [4, 1024]],
-    easeOutQuint: [[2, 0], [3, -31], [4, -242]],
-    easeInOutQuint: [[0.3, 0.03888], [0.5, 0.5], [2, -15], [3, -511]],
-};
-
-describe('easing', () => {
-    // test easing methods
-    Object.keys(TESTS).forEach(name => {
-        const values = TESTS[name];
-
-        test(`easingFunctions.${name}()`, () => {
-            values.forEach(([actual, expected]) => {
-                expect(easingFunctions[name](actual)).toBe(expected);
-            });
-        });
-    });
-
-    test('createEasing()', () => {
-        const OriginalDate = global.Date;
-        const ELAPSED = chance.integer({ min: 0, max: 100 });
-        const DURATION = chance.integer({ min: ELAPSED, max: 300 });
-        global.Date = jest.fn(() => new OriginalDate(0));
-
-        const ease = createEasing('linear', DURATION);
-        expect(ease()).toBe(0);
-
-        global.Date = jest.fn(
-            () => new OriginalDate((1970, 1, 1, 0, 0, 0, ELAPSED))
-        );
-        expect(ease()).toBe(ELAPSED / DURATION);
-
-        global.Date = OriginalDate;
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/element-inview.js b/static/src/javascripts.flow.archive/lib/element-inview.js
deleted file mode 100644
index 809d8c0eafc..00000000000
--- a/static/src/javascripts.flow.archive/lib/element-inview.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/element-inview.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import debounce from 'lodash/debounce';
-import { noop } from 'lib/noop';
-
-type offsetType = {
-    left?: number,
-    top?: number,
-};
-
-const elementIsInView = (el: HTMLElement, offsets_?: offsetType): boolean => {
-    const offsets = Object.assign(
-        {},
-        { left: 0, right: 0, top: 0, bottom: 0 },
-        offsets_
-    );
-
-    const rect = el.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
-
-    const fromTop = rect.top + offsets.top;
-    const fromBottom = rect.bottom - offsets.bottom;
-    const fromLeft = rect.left - offsets.left;
-    const fromRight = rect.right + offsets.right;
-
-    const visibleVertically = fromTop < viewportHeight && fromBottom > 0;
-    const visibleHorizontally = fromLeft < viewportWidth && fromRight > 0;
-
-    return visibleVertically && visibleHorizontally;
-};
-
-const elementInView = (
-    element: HTMLElement,
-    container: HTMLElement,
-    offsets?: offsetType
-): {
-    on: (eventName: 'firstview', callback: ?(el: HTMLElement) => void) => void,
-} => {
-    let hasBeenSeen = false;
-
-    const events = {
-        firstview: noop,
-    };
-
-    bean.on(
-        container,
-        'scroll',
-        debounce(() => {
-            const inView = elementIsInView(element, offsets);
-
-            if (events.firstview && inView && !hasBeenSeen) {
-                hasBeenSeen = true;
-                events.firstview(element);
-            }
-        }, 200)
-    );
-
-    return {
-        on(event, func) {
-            events[event] = func;
-        },
-    };
-};
-
-export { elementInView };
diff --git a/static/src/javascripts.flow.archive/lib/fetch-json.js b/static/src/javascripts.flow.archive/lib/fetch-json.js
deleted file mode 100644
index 7762e3b59fe..00000000000
--- a/static/src/javascripts.flow.archive/lib/fetch-json.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/fetch-json.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import fetch from 'lib/fetch';
-
-const json = (
-    input: string | Request,
-    init: RequestOptions = {}
-): Promise<any> => {
-    // #? we should use Object.assign for this assignment, but this currently breaks
-    // Karma tests that depend on fetch-json.js and have not been stubbed
-    const options = init;
-    let path = typeof input === 'string' ? input : input.url;
-
-    if (!path.match('^(https?:)?//')) {
-        path = config.get('page.ajaxUrl', '') + path;
-        options.mode = 'cors';
-    }
-
-    return fetch(path, options).then(resp => {
-        if (resp.ok) {
-            switch (resp.status) {
-                case 204:
-                    return {};
-                default:
-                    return resp.json();
-            }
-        }
-        if (!resp.status) {
-            // IE9 uses XDomainRequest which doesn't set the response status thus failing
-            // even when the response was actually valid
-            return resp.text().then(responseText => {
-                try {
-                    return JSON.parse(responseText);
-                } catch (ex) {
-                    throw new Error(
-                        `Fetch error while requesting ${path}: Invalid JSON response`
-                    );
-                }
-            });
-        }
-        throw new Error(
-            `Fetch error while requesting ${path}: ${resp.statusText}`
-        );
-    });
-};
-
-export default json;
diff --git a/static/src/javascripts.flow.archive/lib/fetch-json.spec.js b/static/src/javascripts.flow.archive/lib/fetch-json.spec.js
deleted file mode 100644
index 0d8d5113dd2..00000000000
--- a/static/src/javascripts.flow.archive/lib/fetch-json.spec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/fetch-json.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import Chance from 'chance';
-import config from 'lib/config';
-import fetchJson from './fetch-json';
-
-const chance = new Chance();
-
-jest.mock('lib/fetch', () => jest.fn());
-const fetchSpy: any = require('lib/fetch');
-
-describe('Fetch JSON util', () => {
-    beforeAll(() => {
-        config.set('page.ajaxUrl', 'foo');
-    });
-
-    it('returns a promise which rejects on network errors', done => {
-        const error = new Error(chance.string());
-        fetchSpy.mockReturnValueOnce(Promise.reject(error));
-
-        fetchJson('error-path')
-            .catch(ex => {
-                expect(ex).toBe(error);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-
-    it('returns a promise which rejects invalid json responses', done => {
-        fetchSpy.mockReturnValueOnce(
-            Promise.resolve({
-                text() {
-                    return Promise.resolve(chance.string());
-                },
-            })
-        );
-
-        fetchJson('404-error-response')
-            .catch(ex => {
-                expect(ex instanceof Error).toBe(true);
-                expect(ex.message).toMatch(/JSON/i);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-
-    it('resolves a correct response in json', done => {
-        const jsonData = {
-            [chance.string()]: chance.string(),
-        };
-
-        fetchSpy.mockReturnValueOnce(
-            Promise.resolve({
-                text() {
-                    return Promise.resolve(JSON.stringify(jsonData));
-                },
-            })
-        );
-
-        fetchJson('correct-json')
-            .then(response => {
-                expect(response).toEqual(jsonData);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/fetch.js b/static/src/javascripts.flow.archive/lib/fetch.js
deleted file mode 100644
index a71ca354d74..00000000000
--- a/static/src/javascripts.flow.archive/lib/fetch.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/fetch.js
- * to .ts, then delete it.
- */
-
-// @flow
-import reqwest from 'reqwest';
-
-/**
- * Provide a minimal function equivalent to fetch. I don't dare calling it a
- * polyfill but the signature is the same, albeit simplified.
- *
- * fetch (input, init): Promise
- *
- * Differences with the standard fetch are
- *
- * - fetch
- * - - input can only be a string, Request is not supported
- * - - does not support JSONP
- * - - headers can only be specified as an object literal, the Headers interface is not supported
- * - Response
- * - - blob is not supported
- * - - formData is not supported
- * - - headers are not populated
- *
- * If you're still wondering what it actually supports
- * - CORS
- * - credentials
- * - body, any body that you want to add to your request except for GET or HEAD
- * - response.text() and response.json()
- * - response.ok .status .statusText
- */
-
-type CustomFetchRequest = {
-    url: string,
-    type: string,
-    method: string,
-    crossOrigin: boolean,
-    headers: ?Object,
-    data: string,
-    withCredentials: boolean,
-};
-
-type CustomFetchResponse = {
-    status: number,
-    ok: boolean,
-    statusText: string,
-    url: string,
-    text: () => Promise<string>,
-    json: () => Promise<Object>,
-};
-
-const buildRequest = (path: string, options: Object): CustomFetchRequest => {
-    const isCors = options.mode === 'cors';
-    const withCredentials =
-        (isCors && options.credentials === 'include') ||
-        (!isCors && options.credentials === 'same-origin');
-
-    return {
-        url: path,
-        type: 'text',
-        method: options.method || 'GET',
-        crossOrigin: isCors,
-        headers: options.headers,
-        data: options.body,
-        withCredentials,
-    };
-};
-
-const createResponse = (response: Object): CustomFetchResponse => {
-    let bodyRead = false;
-    const body = response.responseText;
-
-    const text = () => {
-        const result = bodyRead
-            ? Promise.reject(new TypeError('Already read'))
-            : Promise.resolve(body);
-        bodyRead = true;
-        return result;
-    };
-
-    return {
-        status: response.status,
-        ok: response.status >= 200 && response.status < 300,
-        statusText: response.statusText,
-        url: response.responseURL || '',
-        text,
-        json() {
-            return text().then(JSON.parse);
-        },
-    };
-};
-
-const fetch = (input: string, init: ?Object): Promise<CustomFetchResponse> =>
-    new Promise((resolve, reject) => {
-        const req = buildRequest(input, init || {});
-        reqwest(req)
-            .then(resp => {
-                resolve(createResponse(resp));
-            })
-            .catch(resp => {
-                if (resp.status === 0) {
-                    // reqwest wasn't able to make the request
-                    reject(new Error(`Fetch error: ${resp.statusText}`));
-                } else {
-                    // an error response was received, in fetch this is not a rejection
-                    resolve(createResponse(resp));
-                }
-            });
-    });
-
-export default fetch;
diff --git a/static/src/javascripts.flow.archive/lib/fetch.spec.js b/static/src/javascripts.flow.archive/lib/fetch.spec.js
deleted file mode 100644
index 7381f632bc2..00000000000
--- a/static/src/javascripts.flow.archive/lib/fetch.spec.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/fetch.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fetch from 'lib/fetch';
-import reqwest_ from 'reqwest';
-
-jest.mock('reqwest', () => jest.fn());
-
-const reqwest: JestMockFn<*, *> = (reqwest_: any);
-
-describe('Fetch util', () => {
-    afterEach(() => {
-        reqwest.mockReset();
-    });
-
-    it('returns a promise which rejects on network errors', () => {
-        reqwest.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 0,
-            })
-        );
-
-        return fetch('error-path').catch(ex => {
-            expect(ex instanceof Error).toBe(true);
-            expect(ex.message).toMatch(/fetch error/i);
-        });
-    });
-
-    it('returns a promise which resolves on error responses', () => {
-        reqwest.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 404,
-                responseText: 'Error response',
-                statusText: 'Not Found',
-            })
-        );
-
-        return fetch('404-error-response')
-            .then(resp => {
-                expect(resp.ok).toBe(false);
-                expect(resp.status).toBe(404);
-                expect(resp.statusText).toBe('Not Found');
-
-                return resp.text();
-            })
-            .then(responseText => {
-                expect(responseText).toBe('Error response');
-            });
-    });
-
-    it('rejects if response is not correct json', () => {
-        reqwest.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 200,
-                responseText: 'Plain text',
-                statusText: 'OK',
-            })
-        );
-
-        return fetch('invalid-json')
-            .then(resp => {
-                expect(resp.ok).toBe(true);
-                expect(resp.status).toBe(200);
-                expect(resp.statusText).toBe('OK');
-
-                return resp.json();
-            })
-            .catch(ex => {
-                expect(ex instanceof Error).toBe(true);
-                expect(ex.message).toMatch(/json/i);
-            });
-    });
-
-    it('rejects if trying to consume the body multiple times', () => {
-        reqwest.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 200,
-                responseText: '{}',
-                statusText: 'OK',
-            })
-        );
-
-        return fetch('multiple-body')
-            .then(resp => Promise.all([resp.text(), resp.json()]))
-            .catch(ex => {
-                expect(ex instanceof TypeError).toBe(true);
-                expect(ex.message).toBe('Already read');
-            });
-    });
-
-    it('resolves a correct response in plain text', () => {
-        reqwest.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 200,
-                responseText: '{"json":true}',
-                statusText: 'OK',
-            })
-        );
-
-        return fetch('correct-json')
-            .then(resp => {
-                expect(resp.ok).toBe(true);
-                expect(resp.status).toBe(200);
-                expect(resp.statusText).toBe('OK');
-
-                return resp.text();
-            })
-            .then(responseText => {
-                expect(responseText).toBe('{"json":true}');
-            });
-    });
-
-    it('resolves a correct response in json', () => {
-        reqwest.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 200,
-                responseText: '{"json":true}',
-                statusText: 'OK',
-            })
-        );
-
-        return fetch('correct-json')
-            .then(resp => {
-                expect(resp.ok).toBe(true);
-                expect(resp.status).toBe(200);
-                expect(resp.statusText).toBe('OK');
-
-                return resp.json();
-            })
-            .then(json => {
-                expect(json).toEqual({
-                    json: true,
-                });
-            });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/formInlineLabels.js b/static/src/javascripts.flow.archive/lib/formInlineLabels.js
deleted file mode 100644
index db1c216c5a3..00000000000
--- a/static/src/javascripts.flow.archive/lib/formInlineLabels.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/formInlineLabels.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import $ from 'lib/$';
-import fastdom from 'fastdom';
-
-const updateClass = (
-    type: string,
-    $el: Object,
-    cssClass: string,
-    testFunc?: Function
-): Function => () => {
-    // If we pass a boolean for test, then check if we should update the class
-    const shouldUpdateClass = testFunc !== undefined ? testFunc() : true;
-
-    if (shouldUpdateClass) {
-        fastdom.mutate(() => {
-            $el[type === 'add' ? 'addClass' : 'removeClass'](cssClass);
-        });
-    }
-};
-
-export default {
-    init(el: string, opts: Object) {
-        const $el = $(el);
-        const $input = $(opts.textInputClass, el);
-        const $label = $(opts.labelClass, el);
-        const { hiddenLabelClass, labelEnabledClass } = opts;
-
-        // Add the js only styling class for inline label enabled
-        updateClass('add', $el, labelEnabledClass)();
-
-        // Check if the input val is empty and if not, hide the label
-        if ($input.val() !== '') {
-            updateClass('add', $label, hiddenLabelClass)();
-        }
-
-        // Bind to focus and blur handlers to update class based on input
-        // Not delegated as bean doesn't support it on focus & blur
-        bean.on($input[0], {
-            focus: updateClass('add', $label, hiddenLabelClass),
-            blur: updateClass(
-                'remove',
-                $label,
-                hiddenLabelClass,
-                () => $input.val() === ''
-            ),
-        });
-    },
-};
diff --git a/static/src/javascripts.flow.archive/lib/formatters.js b/static/src/javascripts.flow.archive/lib/formatters.js
deleted file mode 100644
index c9d8d325532..00000000000
--- a/static/src/javascripts.flow.archive/lib/formatters.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/formatters.js
- * to .ts, then delete it.
- */
-
-// @flow
-const integerCommas = (
-    val: string | number,
-    truncate?: boolean
-): string | void => {
-    // commafy integers. see formatters.spec.js for expected input/output
-    const num = parseInt(val, 10);
-    if (Number.isNaN(num)) {
-        return;
-    }
-
-    if (!!truncate && num > 9999) {
-        const thousands = Math.floor(num / 1000);
-        return `${thousands.toLocaleString()}k`;
-    }
-
-    return num.toLocaleString();
-};
-
-export { integerCommas };
diff --git a/static/src/javascripts.flow.archive/lib/formatters.spec.js b/static/src/javascripts.flow.archive/lib/formatters.spec.js
deleted file mode 100644
index 296114aa064..00000000000
--- a/static/src/javascripts.flow.archive/lib/formatters.spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/formatters.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { integerCommas } from 'lib/formatters';
-
-describe('integerCommas', () => {
-    it('should correctly add a comma for >=4 digit numbers', () => {
-        const tests = [
-            [1, '1'],
-            [12, '12'],
-            [123, '123'],
-            [1234, '1,234'],
-            [12345, '12,345'],
-            [123456, '123,456'],
-            [1234567, '1,234,567'],
-            [12345678, '12,345,678'],
-            [123456789, '123,456,789'],
-            [1234567890, '1,234,567,890'],
-        ];
-
-        for (let i = 0; i < tests.length; i += 1) {
-            expect(integerCommas(tests[i][0])).toBe(tests[i][1]);
-        }
-    });
-});
-
-describe('integerCommas', () => {
-    it('should correctly add a comma for >=4 digit numbers', () => {
-        const tests = [
-            [1, '1'],
-            [12, '12'],
-            [123, '123'],
-            [1234, '1,234'],
-            [12345, '12k'],
-            [123456, '123k'],
-            [1234567, '1,234k'],
-            [12345678, '12,345k'],
-            [123456789, '123,456k'],
-            [1234567890, '1,234,567k'],
-        ];
-
-        for (let i = 0; i < tests.length; i += 1) {
-            expect(integerCommas(tests[i][0], true)).toBe(tests[i][1]);
-        }
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/getPrivacyFramework.js b/static/src/javascripts.flow.archive/lib/getPrivacyFramework.js
deleted file mode 100644
index cad04e27f3b..00000000000
--- a/static/src/javascripts.flow.archive/lib/getPrivacyFramework.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/getPrivacyFramework.js
- * to .ts, then delete it.
- */
-
-// @flow strict
-import { isInUsa } from 'projects/common/modules/commercial/geo-utils.js';
-
-let frameworks: { [key: string]: boolean };
-
-export const getPrivacyFramework = () => {
-    if (typeof frameworks === 'undefined') {
-        const isInUS = isInUsa();
-
-        frameworks = {
-            ccpa: isInUS,
-            tcfv2: !isInUS,
-        };
-    }
-    return frameworks;
-};
diff --git a/static/src/javascripts.flow.archive/lib/noop.js b/static/src/javascripts.flow.archive/lib/noop.js
deleted file mode 100644
index 53b74e657c0..00000000000
--- a/static/src/javascripts.flow.archive/lib/noop.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/noop.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// eslint-disable-next-line no-unused-vars
-const noop = (...args: Array<any>): any => {};
-
-export { noop };
diff --git a/static/src/javascripts.flow.archive/lib/page.js b/static/src/javascripts.flow.archive/lib/page.js
deleted file mode 100644
index 3d747c767a8..00000000000
--- a/static/src/javascripts.flow.archive/lib/page.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/page.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import config from 'lib/config';
-import { getBreakpoint } from 'lib/detect';
-
-// #? this should'nt really be an `any`, but the callbacks themselves are explicit
-// about the types they accept.
-// that this is required suggests maybe the approach is too generic
-type yesable = ?(arg: any) => boolean | void;
-type noable = ?() => boolean | void;
-
-// #? this is very hard to understand, what is it's purpose?
-const isit = (
-    isTrue: ?(string | boolean),
-    yes: yesable,
-    no: noable,
-    arg: any
-): boolean => {
-    if (isTrue) {
-        return yes ? !!yes(arg || isTrue) : arg || !!isTrue;
-    }
-
-    return no ? !!no() : false;
-};
-
-const isMatch = (yes: yesable, no: noable): boolean => {
-    const teams = config.referencesOfType('pa-football-team');
-    const match = config.get('page.footballMatch', {});
-    // the order of this is important as, on occasion,
-    // "minbymin" is tagged with "match reports" but should be considered "minbymin".
-    const pageTypes = [
-        ['minbymin', config.get('page.isLiveBlog')],
-        ['report', config.hasTone('Match reports')],
-        ['preview', config.hasSeries('Match previews')],
-        ['stats', match.id],
-    ];
-    const pageType = pageTypes.find(type => type[1] === true);
-
-    Object.assign(match, {
-        date: config.webPublicationDateAsUrlPart(),
-        teams,
-        isLive: !!config.get('page.isLive'),
-        pageType: pageType && pageType[0],
-    });
-
-    return isit(
-        match.id || (match.pageType && match.teams.length === 2),
-        yes,
-        no,
-        match
-    );
-};
-
-const isCompetition = (yes: yesable): boolean => {
-    const notMobile = getBreakpoint() !== 'mobile';
-    const competition = notMobile
-        ? ($('.js-football-competition').attr('data-link-name') || '').replace(
-              'keyword: football/',
-              ''
-          )
-        : '';
-
-    return isit(competition, yes);
-};
-
-const isClockwatch = (yes: yesable): boolean =>
-    isit(config.hasSeries('Clockwatch'), yes);
-
-const isLiveClockwatch = (yes: yesable): boolean =>
-    isClockwatch(() => isit(!!config.get('page.isLive'), yes));
-
-const isFootballStatsPage = (yes: yesable): boolean =>
-    isit(!!config.get('page.footballMatch'), yes);
-
-const belowArticleVisible = (yes: yesable, no: noable): boolean => {
-    const el = $('.js-after-article')[0];
-    const vis = el
-        ? window.getComputedStyle(el).getPropertyValue('display') !== 'none'
-        : false;
-
-    return isit(vis, yes, no, el);
-};
-
-const keywordExists = (keywordArr: Array<string>): boolean => {
-    const keywords = config.get('page.keywords', '').split(',');
-    return keywordArr.some(kw => keywords.includes(kw));
-};
-
-export {
-    isMatch,
-    isCompetition,
-    isClockwatch,
-    isLiveClockwatch,
-    isFootballStatsPage,
-    belowArticleVisible,
-    keywordExists,
-};
diff --git a/static/src/javascripts.flow.archive/lib/page.spec.js b/static/src/javascripts.flow.archive/lib/page.spec.js
deleted file mode 100644
index f38025bcb27..00000000000
--- a/static/src/javascripts.flow.archive/lib/page.spec.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/page.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { isMatch, isClockwatch, isLiveClockwatch, keywordExists } from './page';
-
-jest.mock('lib/config', () => {
-    const defaultConfig = {
-        page: {
-            tones: '',
-            series: '',
-            isLive: false,
-            isLiveBlog: false,
-            webPublicationDate: '2017-07-19T12:41:11.739Z',
-        },
-    };
-
-    return Object.assign({}, defaultConfig, {
-        get: (path: string = '', defaultValue: any) =>
-            path
-                .replace(/\[(.+?)\]/g, '.$1')
-                .split('.')
-                .reduce((o, key) => o[key], defaultConfig) || defaultValue,
-        hasSeries: jest.fn(() => true),
-        hasTone: jest.fn(() => true),
-        referencesOfType: jest.fn(() => [
-            {
-                name: 'test-1',
-            },
-
-            {
-                name: 'test-2',
-            },
-        ]),
-        webPublicationDateAsUrlPart: jest.fn(() => '2017/07/19'),
-    });
-});
-
-describe('isMatch', () => {
-    afterEach(() => {
-        jest.resetModules();
-    });
-
-    it('should callback on match reports', () => {
-        const yesable = jest.fn();
-
-        config.page.tones = 'Match reports';
-        config.referencesOfType = jest.fn(() => [34, 3]);
-
-        isMatch(yesable);
-
-        expect(yesable).toHaveBeenCalledWith({
-            date: '2017/07/19',
-            teams: [34, 3],
-            pageType: 'report',
-            isLive: false,
-        });
-    });
-
-    it('should callback on minute by minute live blogs', () => {
-        const yesable = jest.fn();
-
-        config.referencesOfType = jest.fn(() => [33, 1]);
-        config.page.isLiveBlog = true;
-
-        isMatch(yesable);
-
-        expect(yesable).toHaveBeenCalledWith({
-            date: '2017/07/19',
-            teams: [33, 1],
-            pageType: 'minbymin',
-            isLive: false,
-        });
-    });
-
-    it('should callback on match previews', () => {
-        const yesable = jest.fn();
-
-        config.referencesOfType = jest.fn(() => [1, 2]);
-        config.page.isLiveBlog = false;
-        config.page.series = 'Match previews';
-        config.hasTone.mockReturnValue(false);
-
-        isMatch(yesable);
-
-        expect(yesable).toHaveBeenCalledWith({
-            date: '2017/07/19',
-            teams: [1, 2],
-            pageType: 'preview',
-            isLive: false,
-        });
-    });
-
-    it('should not callback without two teams', () => {
-        const yesable = jest.fn();
-
-        config.referencesOfType = jest.fn(() => [1]);
-        config.page.isLiveBlog = true;
-
-        isMatch(yesable);
-
-        expect(yesable).not.toHaveBeenCalled();
-    });
-});
-
-describe('isClockwatch', () => {
-    it('should not callback on non-clockwatch series', () => {
-        const yesable = jest.fn();
-        config.page.series = 'Blogger of the week (Cities)';
-        config.hasSeries.mockReturnValue(false);
-
-        isClockwatch(yesable);
-
-        expect(yesable).not.toHaveBeenCalled();
-    });
-
-    it('should callback on clockwatch pages', () => {
-        const yesable = jest.fn();
-        config.page.series = 'Clockwatch';
-        config.hasSeries.mockReturnValue(true);
-
-        isClockwatch(yesable);
-
-        expect(yesable).toHaveBeenCalled();
-    });
-});
-
-describe('isLiveClockwatch', () => {
-    it('should not callback on non-live clockwatches', () => {
-        const yesable = jest.fn();
-        config.page.series = 'Clockwatch';
-        config.page.isLive = false;
-
-        isLiveClockwatch(yesable);
-
-        expect(yesable).not.toHaveBeenCalled();
-    });
-
-    it('should callback on live clockwatches', () => {
-        const yesable = jest.fn();
-        config.page.series = 'Clockwatch';
-        config.page.isLive = true;
-
-        isLiveClockwatch(yesable);
-
-        expect(yesable).toHaveBeenCalled();
-    });
-});
-
-describe('keywordExists', () => {
-    it('should identify that given keywords are in config', () => {
-        config.page.keywords = 'foo,bar';
-
-        expect(keywordExists(['foo'])).toBe(true);
-    });
-
-    it('should return false when no given keywords are in config', () => {
-        config.page.keywords = undefined;
-
-        expect(keywordExists(['foo'])).toBe(false);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/proximity-loader.js b/static/src/javascripts.flow.archive/lib/proximity-loader.js
deleted file mode 100644
index 89c9fec90fc..00000000000
--- a/static/src/javascripts.flow.archive/lib/proximity-loader.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/proximity-loader.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bonzo from 'bonzo';
-import debounce from 'lodash/debounce';
-import fastdom from 'lib/fastdom-promise';
-import mediator from 'lib/mediator';
-
-let items = [];
-const scroll = { top: 0, bottom: 0 };
-
-const doProximityLoading = (): void => {
-    scroll.top = window.pageYOffset;
-    scroll.bottom = scroll.top + bonzo.viewport().height;
-    items = items.filter(item => {
-        if (item.conditionFn()) {
-            item.loadFn();
-            return false;
-        }
-
-        return true;
-    });
-
-    if (items.length === 0) {
-        mediator.off('window:throttledScroll', doProximityLoading);
-    }
-};
-
-const doProximityLoadingDebounced = debounce(doProximityLoading, 2000);
-
-const addItem = (conditionFn: () => boolean, loadFn: () => void): void => {
-    // calls `loadFn` when `conditionFn` is true
-    const item = { conditionFn, loadFn };
-
-    items.push(item);
-
-    if (items.length === 1) {
-        mediator.on('window:throttledScroll', doProximityLoading);
-    }
-
-    doProximityLoadingDebounced();
-};
-
-const addProximityLoader = (
-    el: HTMLElement,
-    distanceThreshold: number,
-    loadFn: () => void
-): void => {
-    // calls `loadFn` when screen is within `distanceThreshold` of `el`
-    fastdom.measure(() => {
-        const $el = bonzo(el);
-        const conditionFn = () => {
-            const elOffset = $el.offset();
-            const loadAfter = elOffset.top - distanceThreshold;
-            const loadBefore =
-                elOffset.top + elOffset.height + distanceThreshold;
-
-            return scroll.top > loadAfter && scroll.bottom < loadBefore;
-        };
-
-        addItem(conditionFn, loadFn);
-    });
-};
-
-export { addProximityLoader };
diff --git a/static/src/javascripts.flow.archive/lib/scroller.js b/static/src/javascripts.flow.archive/lib/scroller.js
deleted file mode 100644
index 51a864a9ce9..00000000000
--- a/static/src/javascripts.flow.archive/lib/scroller.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/scroller.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/*  Auto scrolling with easing
-
-    Usage:
-    - scroller.scrollToElement(element, 500, 'easeOutQuad'); // 500ms scroll to element using easeOutQuad easing
-    - scroller.scrollTo(1250, 250, 'linear'); // 250ms scroll to 1250px using linear gradient
-    - scroller.scrollTo(100, 250, 'linear', document.querySelector('.container')); // 250ms scroll to 100px of scrollable container
-
-    Note: if you pass in an element, you must also specify an easing function.
-*/
-
-import { createEasing } from 'lib/easing';
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-
-const scrollTo = (
-    offset: number,
-    duration: number = 0,
-    easeFn?: string = 'easeOutQuad',
-    container: ?HTMLElement = document.body
-): void => {
-    const $container = bonzo(container);
-    const from = $container.scrollTop();
-    const distance = offset - from;
-    const ease = createEasing(easeFn, duration);
-    const scrollFn = () => {
-        fastdom.mutate(() => $container.scrollTop(from + ease() * distance));
-    };
-    const interval = setInterval(scrollFn, 15);
-
-    setTimeout(() => {
-        clearInterval(interval);
-        fastdom.mutate(() => $container.scrollTop(offset));
-    }, duration);
-};
-
-const scrollToElement = (
-    element: HTMLElement | string,
-    duration?: number = 0,
-    easeFn?: string,
-    container: ?HTMLElement
-): void => {
-    const top = bonzo(element).offset().top;
-    scrollTo(top, duration, easeFn, container);
-};
-
-export { scrollTo, scrollToElement };
diff --git a/static/src/javascripts.flow.archive/lib/string-utils.js b/static/src/javascripts.flow.archive/lib/string-utils.js
deleted file mode 100644
index c2cc91585f1..00000000000
--- a/static/src/javascripts.flow.archive/lib/string-utils.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/string-utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// Split by delimiter, but ensure any whitespace in the string is discarded
-// and that there are no empty strings in the output array.
-export const splitAndTrim = (str: string, delim: string): Array<string> =>
-    str
-        .split(delim)
-        .map(s => s.trim())
-        .filter(Boolean);
-
-export const optionalSplitAndTrim = (
-    str: string,
-    delim: string
-): Array<string> => (str ? splitAndTrim(str, delim) : []);
-
-export const optionalStringToBoolean = (str: ?string): boolean =>
-    typeof str === 'string' ? str.toLowerCase().trim() === 'true' : false;
-
-export const throwIfEmptyString = (name: string, str: ?string): string => {
-    if (typeof str === 'string' && str.trim().length > 0) {
-        return str;
-    }
-
-    throw new Error(`${name} is empty`);
-};
-
-export const filterEmptyString = (str: ?string): ?string =>
-    str && str.trim().length > 0 ? str.trim() : undefined;
diff --git a/static/src/javascripts.flow.archive/lib/timeout.js b/static/src/javascripts.flow.archive/lib/timeout.js
deleted file mode 100644
index c7295750953..00000000000
--- a/static/src/javascripts.flow.archive/lib/timeout.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/timeout.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-const timeout = (interval: number, promise: Promise<any>): Promise<any> =>
-    Promise.race([
-        promise,
-        new Promise((resolve, reject) => {
-            setTimeout(() => reject(new Error('Timeout')), interval);
-        }),
-    ]);
-
-export default timeout;
diff --git a/static/src/javascripts.flow.archive/lib/timeout.spec.js b/static/src/javascripts.flow.archive/lib/timeout.spec.js
deleted file mode 100644
index 0a4a5bceff2..00000000000
--- a/static/src/javascripts.flow.archive/lib/timeout.spec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/timeout.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import Chance from 'chance';
-import timeout from 'lib/timeout';
-
-const chance = new Chance();
-
-const wait = time =>
-    new Promise(resolve => {
-        setTimeout(resolve, time);
-    });
-
-describe('timeout', () => {
-    test("resolves with the promised value if the timeout doesn't fire", done => {
-        const time = chance.integer({ min: 0, max: 10 });
-        const value = chance.integer();
-
-        timeout(time, Promise.resolve(value))
-            .then(result => {
-                expect(result).toBe(value);
-                return wait(time);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-
-    test("rejects with the promised error if the timeout doesn't fire", done => {
-        const time = chance.integer({ min: 0, max: 10 });
-        const message = chance.sentence();
-
-        timeout(time, Promise.reject(new Error(message)))
-            .then(done.fail)
-            .catch(error => {
-                expect(error.message).toBe(message);
-                return wait(time);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-
-    test('rejects with timeout if promise never returns', done => {
-        const time = chance.integer({ min: 0, max: 10 });
-
-        timeout(time, new Promise(() => {}))
-            .then(done.fail)
-            .catch(error => {
-                expect(error.message).toMatch(/timeout/i);
-                return wait(time);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-
-    test('rejects with timeout if promise resolves too late', done => {
-        const time = chance.integer({ min: 0, max: 10 });
-        const waitTime = chance.integer({ min: 11, max: 25 });
-
-        timeout(time, wait(waitTime))
-            .then(done.fail)
-            .catch(error => {
-                expect(error.message).toMatch(/timeout/i);
-                return wait(waitTime);
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/url.spec.js b/static/src/javascripts.flow.archive/lib/url.spec.js
deleted file mode 100644
index 19987d15877..00000000000
--- a/static/src/javascripts.flow.archive/lib/url.spec.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/url.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* global jsdom */
-
-import {
-    getUrlVars,
-    getPath,
-    pushUrl,
-    constructQuery,
-    back,
-    pushQueryString,
-    replaceQueryString,
-} from './url';
-
-jest.mock('lib/detect', () => ({
-    hasPushStateSupport() {
-        return true;
-    },
-}));
-
-const originalAssign = window.location.assign;
-
-describe('url', () => {
-    beforeEach(() => {
-        window.location.assign = (url: string) => {
-            jsdom.reconfigure({
-                url,
-            });
-        };
-    });
-
-    afterEach(() => {
-        window.location.assign = originalAssign;
-    });
-
-    test('getUrlVars() - should get url vars', () => {
-        const origWindowLocation = window.location.href;
-        const QUERIES = [
-            ['foo', { foo: true }],
-            ['?foo', { foo: true }],
-            ['?foo=bar', { foo: 'bar' }],
-            ['foo=bar&foo=baz', { foo: 'baz' }], // Last value wins
-            ['?foo=bar&boo=far', { foo: 'bar', boo: 'far' }],
-            ['foo=bar&boo=far&foo=baz', { foo: 'baz', boo: 'far' }],
-            ['?foo=bar&boo=far&', { foo: 'bar', boo: 'far' }],
-            ['foo=bar&boo', { foo: 'bar', boo: true }],
-            ['boo=&foo=bar', { foo: 'bar', boo: true }],
-            ['name=J%C3%A9r%C3%B4me', { name: 'Jérôme' }],
-            ['', {}],
-        ];
-
-        // pass in the query
-        QUERIES.forEach(([query, expected]) => {
-            expect(getUrlVars(query)).toEqual(expected);
-        });
-
-        // get the query from window.location.search
-        QUERIES.forEach(([query, expected]) => {
-            const preQuery = window.location.href.split('?')[0];
-            const cleanQuery = query.replace(/^\?/, '');
-            window.location.assign(`${preQuery}?${cleanQuery}`);
-            expect(getUrlVars()).toEqual(expected);
-        });
-
-        window.location.assign(origWindowLocation);
-    });
-
-    test('constructQuery() - should be able to construct query', () => {
-        [
-            [{ foo: true }, 'foo=true'],
-            [{ foo: 'bar', bar: true }, 'foo=bar&bar=true'],
-            [{ foo: 'bar' }, 'foo=bar'],
-            [{ foo: 'bar', boo: 'far' }, 'foo=bar&boo=far'],
-            [{ foo: ['bar1', 'bar2'], boo: 'far' }, 'foo=bar1,bar2&boo=far'],
-            [{}, ''],
-        ].forEach(([vars, expected]) => {
-            expect(constructQuery(vars)).toEqual(expected);
-        });
-    });
-
-    test('getPath() - should return a path', () => {
-        const HOST = 'http://host.com';
-        const QUERIES = [
-            [`${HOST}/foo/bar/baz`, '/foo/bar/baz'],
-            [`${HOST}/foo?foo=bar`, '/foo'],
-            [`${HOST}/foo#foo`, '/foo'],
-        ];
-
-        QUERIES.forEach(([query, expected]) => {
-            expect(getPath(query)).toEqual(expected);
-        });
-    });
-
-    test('back() - should go one page back in history', () => {
-        const origBack = window.history.back;
-        window.history.back = jest.fn();
-
-        back();
-        expect(window.history.back).toHaveBeenCalled();
-
-        window.history.back = origBack;
-    });
-
-    test('pushUrl() - should either replace or push the new state', () => {
-        const origReplace = window.history.replaceState;
-        const origPush = window.history.pushState;
-        const state = { foo: 'bar' };
-        const title = 'new-state-title';
-        const path = '/foo/bar';
-
-        window.history.replaceState = jest.fn();
-        window.history.pushState = jest.fn();
-
-        // push
-        pushUrl(state, title, path);
-        expect(window.history.pushState).toHaveBeenCalledWith(
-            state,
-            title,
-            path
-        );
-        expect(window.history.replaceState).not.toHaveBeenCalled();
-
-        // replace
-        window.history.replaceState.mockClear();
-        window.history.pushState.mockClear();
-
-        pushUrl(state, title, path, true);
-        expect(window.history.pushState).not.toHaveBeenCalled();
-        expect(window.history.replaceState).toHaveBeenCalledWith(
-            state,
-            title,
-            path
-        );
-
-        window.history.replaceState = origReplace;
-        window.history.pushState = origPush;
-    });
-
-    const testQueryString = (historyMethod, moduleMethod) => {
-        const origWindowLocation = window.location.href;
-
-        const origMethod = window.history[historyMethod];
-        const title = 'new-state-title';
-        const querystring = '/foo/bar';
-        const state = { foo: 'bar' };
-
-        window.history[historyMethod] = jest.fn();
-        window.title = title;
-
-        moduleMethod({ state, querystring, title });
-        expect(window.history[historyMethod]).toHaveBeenCalledWith(
-            state,
-            title,
-            querystring
-        );
-
-        window.history[historyMethod].mockClear();
-        moduleMethod({ querystring });
-        expect(window.history[historyMethod]).toHaveBeenCalledWith(
-            {},
-            title,
-            querystring
-        );
-
-        window.history[historyMethod] = origMethod;
-        window.location.assign(origWindowLocation);
-    };
-
-    test('pushQueryString()', () => {
-        testQueryString('pushState', pushQueryString);
-    });
-
-    test('replaceQueryString()', () => {
-        testQueryString('replaceState', replaceQueryString);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/user-timing.spec.js b/static/src/javascripts.flow.archive/lib/user-timing.spec.js
deleted file mode 100644
index c8a2fceb2e6..00000000000
--- a/static/src/javascripts.flow.archive/lib/user-timing.spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/user-timing.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import Chance from 'chance';
-import { markTime, getMarkTime, getCurrentTime } from './user-timing';
-
-const chance = new Chance();
-const mockIO = { entries: [] };
-const mockedNowValue = chance.integer();
-
-jest.mock('lib/window-performance', () => ({
-    now: jest.fn(() => mockedNowValue),
-
-    mark: jest.fn(name => {
-        mockIO.entries.push({
-            entryType: 'mark',
-            name,
-            startTime: mockedNowValue,
-            duration: 0,
-        });
-    }),
-
-    getEntriesByName: jest.fn((name, type) => {
-        const item = mockIO.entries.find(
-            timingMark =>
-                timingMark.entryType === type && timingMark.name === name
-        );
-        return [item];
-    }),
-}));
-
-describe('user-timing', () => {
-    test('getCurrentTime()', () => {
-        expect(getCurrentTime()).toBe(mockedNowValue);
-    });
-
-    test('markTime()', () => {
-        const name = chance.word();
-        mockIO.entries = [];
-        markTime(name);
-        expect(mockIO.entries.length).toBe(1);
-    });
-
-    test('getMarkTime()', () => {
-        const name = chance.word();
-        markTime(name);
-        const timer = getMarkTime(name);
-        expect(timer).toBe(mockedNowValue);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/lib/window-performance.js b/static/src/javascripts.flow.archive/lib/window-performance.js
deleted file mode 100644
index fb29c3fdfbe..00000000000
--- a/static/src/javascripts.flow.archive/lib/window-performance.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/lib/window-performance.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-const api =
-    window.performance ||
-    window.msPerformance ||
-    window.webkitPerformance ||
-    window.mozPerformance;
-
-export default api;
diff --git a/static/src/javascripts.flow.archive/projects/admin/bootstraps/abtests.js b/static/src/javascripts.flow.archive/projects/admin/bootstraps/abtests.js
deleted file mode 100644
index ac0f6f17b27..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/bootstraps/abtests.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/bootstraps/abtests.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { ABTestReportItem as ReportItem } from 'admin/modules/abtests/abtest-report-item';
-import { Audience } from 'admin/modules/abtests/audience';
-import {
-    concurrentTests,
-    epicTests,
-} from 'common/modules/experiments/ab-tests';
-import { isExpired } from 'lib/time-utils';
-
-const renderTests = (
-    tests: $ReadOnlyArray<ABTest>,
-    active: boolean,
-    elem: ?Element
-): Array<any> => {
-    const items = tests.map(
-        test =>
-            new ReportItem({
-                test,
-                active,
-            })
-    );
-    items.forEach(i => {
-        i.render(elem);
-    });
-    return items;
-};
-
-const initABTests = (): void => {
-    const tests = [].concat(concurrentTests, epicTests);
-
-    renderTests(
-        tests.filter(test => !isExpired(test.expiry)),
-        true,
-        document.querySelector('.abtests-report__data')
-    );
-
-    const expiredTestItems = renderTests(
-        concurrentTests.filter(test => isExpired(test.expiry)),
-        false,
-        document.querySelector('.abtests-expired')
-    );
-
-    // Display audience breakdown.
-    const audience = new Audience({
-        tests: concurrentTests.filter(test => !isExpired(test.expiry)),
-    });
-    audience.render(document.querySelector('.abtests-audience'));
-
-    const expired = document.querySelector('.abtests-expired');
-
-    const expiredTitle = document.querySelector('.abtests-expired-title a');
-
-    if (expiredTitle) {
-        expiredTitle.addEventListener('click', (e: Event) => {
-            e.preventDefault();
-
-            /**
-                 #? textContent is a property of Node
-                 flow won't allow typecasting of EventTarget
-                 so typecasting as any
-            * */
-            const target = (e.target: any);
-
-            if (target.textContent === 'show') {
-                target.textContent = 'hide';
-                if (expired) {
-                    expired.style.display = 'block';
-                }
-                expiredTestItems.forEach(t => {
-                    t.renderChart();
-                });
-            } else {
-                target.textContent = 'show';
-                if (expired) {
-                    expired.style.display = 'none';
-                }
-            }
-        });
-    }
-
-    if (expired) {
-        // timeout on this to allow google charts to render before hiding the container
-        setTimeout(() => {
-            expired.style.display = 'none';
-        }, 0);
-    }
-};
-
-export { initABTests };
diff --git a/static/src/javascripts.flow.archive/projects/admin/bootstraps/drama.js b/static/src/javascripts.flow.archive/projects/admin/bootstraps/drama.js
deleted file mode 100644
index 5fde1a09113..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/bootstraps/drama.js
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/bootstraps/drama.js
- * to .ts, then delete it.
- */
-
-// @flow
-const typewrite = (message: string, $target: Element) =>
-    new Promise(yay => {
-        let i = 0;
-        const len = message.length;
-        const itv = setInterval(() => {
-            i += 1;
-            $target.innerText = [...message.split('').splice(0, i), 'X'].join(
-                ''
-            );
-            if (i >= len) {
-                clearInterval(itv);
-                $target.innerText = message;
-                setTimeout(() => {
-                    yay();
-                }, 400);
-            }
-        }, 25);
-    });
-
-const timeout = (to: number, $target: Element) =>
-    new Promise(yay => {
-        const target = Date.now() + to * 1000;
-        const loop = () =>
-            requestAnimationFrame(() => {
-                const diff = target - Date.now();
-                $target.innerText = `00:00:${Math.ceil(diff / 1000)
-                    .toString()
-                    .padStart(2, '0')}:${(diff % 1000)
-                    .toString()
-                    .padStart(3, '0')}`;
-                if (diff > 0) {
-                    loop();
-                } else {
-                    $target.innerText = `00:00:00:000`;
-                    yay();
-                }
-            });
-        loop();
-    });
-
-const RawMessage = (title: string) => {
-    const $wrapper = document.createElement('div');
-    $wrapper.classList.add('admin-drama__message');
-    const $title = document.createElement('span');
-    const $subtitle = document.createElement('strong');
-    $title.innerText = title;
-    [$title, $subtitle].forEach(_ => {
-        $wrapper.append(_);
-    });
-    return {
-        $wrapper,
-        $subtitle,
-        $title,
-        destroy: () => {
-            $wrapper.dataset.out = 'true';
-            // setTimeout(()=>{$wrapper.remove()},200);
-        },
-    };
-};
-
-const Message = (title: string, subtitle: string) => {
-    const { $wrapper, $title, $subtitle, destroy } = RawMessage(title);
-    return {
-        $wrapper,
-        $title,
-        $subtitle,
-        destroy,
-        type: () => typewrite(subtitle, $subtitle),
-    };
-};
-
-const Timeout = (title: string, to: number) => {
-    const { $wrapper, $title, $subtitle, destroy } = RawMessage(title);
-    $wrapper.dataset.critical = 'true';
-    return {
-        $wrapper,
-        $title,
-        $subtitle,
-        destroy,
-        type: () => timeout(to, $subtitle),
-    };
-};
-
-const Line = (line, isHead = false) => {
-    const $wrapper = document.createElement('div');
-    if (isHead) $wrapper.classList.add('admin-drama__head');
-    return {
-        $wrapper,
-        type: () => typewrite(line, $wrapper),
-    };
-};
-
-const LineHead = line => Line(line, true);
-
-const writeTextLines = ($repl: Element): Promise<void> => {
-    const text = [
-        LineHead('System online'),
-        Line('User authenticated'),
-        Line('... Initiating launch routine'),
-        Line('OK'),
-        Line('Launch routine initiated'),
-        LineHead('Action required'),
-        Line('Confirm launch procedure'),
-        Line('Input launch passphrase now'),
-    ];
-    return text.reduce(
-        (promiseChain, currentTask) =>
-            promiseChain.then(() => {
-                const { $wrapper, type } = currentTask;
-                $repl.appendChild($wrapper);
-                return type();
-            }),
-        Promise.resolve()
-    );
-};
-
-const awaitForFormInput = ({ $repl }): Promise<void> =>
-    new Promise(yay => {
-        const $txt = document.createElement('input');
-        const $form = document.createElement('form');
-        $txt.type = 'password';
-        $form.appendChild($txt);
-        $repl.appendChild($form);
-        $txt.focus();
-        $form.addEventListener('submit', ev => {
-            ev.preventDefault();
-            $repl.dataset.disabled = 'true';
-            yay();
-        });
-    });
-
-const showSuccessMsg = ({ $bg, $drama }): Promise<void> =>
-    new Promise(yay => {
-        const $status = Message('Status report', 'access granted');
-        setTimeout(() => {
-            $bg.dataset.white = 'true';
-            $drama.appendChild($status.$wrapper);
-            setTimeout(() => {
-                $status.type().then(() => {
-                    $status.destroy();
-                    yay();
-                });
-            });
-        }, 500);
-    });
-
-const showCountdownMsg = ({ $drama }): Promise<void> =>
-    new Promise(yay => {
-        const $countdown = Timeout('Launch in', 5);
-        setTimeout(() => {
-            $drama.appendChild($countdown.$wrapper);
-            setTimeout(() => {
-                $countdown.type().then(() => {
-                    $countdown.destroy();
-                    yay();
-                });
-            });
-        }, 500);
-    });
-
-const start = ($switchboard: HTMLFormElement, $holder: Element) => {
-    window.scrollTo(0, 0);
-
-    const $drama = $holder.querySelector('.admin-drama-innermost');
-    const $bg = $holder.querySelector('.admin-drama');
-    const $html = document.documentElement;
-
-    if (!$drama || !$bg || !$html) {
-        throw Error('missing elements');
-    }
-
-    const $repl = $drama.querySelector('.admin-drama__input');
-
-    if (!$repl) {
-        throw Error('missing elements');
-    }
-
-    $html.classList.add('drama-init');
-
-    setTimeout(() => {
-        $switchboard.append($holder);
-    }, 500);
-
-    setTimeout(() => {
-        writeTextLines($repl)
-            .then(() => awaitForFormInput({ $repl }))
-            .then(() => showSuccessMsg({ $bg, $drama }))
-            .then(() => showCountdownMsg({ $drama }))
-            .then(() => {
-                $holder.remove();
-                $html.classList.remove('drama-init');
-                $html.classList.add('drama-outro');
-                setTimeout(() => {
-                    $switchboard.submit();
-                }, 1000);
-            });
-    }, 2000);
-};
-
-const init = () => {
-    const $switchboard = ((document.querySelector(
-        '#switchboard'
-    ): any): HTMLFormElement);
-    if (!$switchboard || !$switchboard.submit) return;
-    const $trigger = $switchboard.querySelector('.drama-trigger');
-    if (!$trigger) return;
-
-    const $holder = document.createElement('div');
-    $holder.innerHTML = `
-        <div class="admin-drama admin-drama"><div class="admin-drama__shaker admin-drama-innermost">
-            <div class="admin-drama__input">
-            </div>
-        </div></div>
-        `;
-    $trigger.addEventListener('click', () => {
-        start($switchboard, $holder);
-    });
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/abtest-report-item.js b/static/src/javascripts.flow.archive/projects/admin/modules/abtests/abtest-report-item.js
deleted file mode 100644
index 8e3d21a9f9f..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/abtest-report-item.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/modules/abtests/abtest-report-item.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/*
- Module: abtest-item.js
- Description: Displays information about a single test
- */
-import { Component } from 'common/modules/component';
-import { Participation } from 'admin/modules/abtests/participation';
-import bonzo from 'bonzo';
-import debounce from 'lodash/debounce';
-
-class ABTestReportItem extends Component {
-    constructor(config: Object): void {
-        super();
-
-        this.templateName = 'abtest-item-template';
-        this.componentClass = 'abtest-item';
-        this.useBem = true;
-        this.config = Object.assign(
-            {
-                test: {},
-                active: true,
-            },
-            config
-        );
-
-        if (window.abCharts) {
-            this.chart = window.abCharts[`ab${this.config.test.id}`];
-        }
-    }
-
-    chart: Object;
-    config: Object;
-
-    ready(): void {
-        if (this.chart) {
-            const redraw = this.renderChart.bind(this);
-
-            redraw();
-
-            window.addEventListener('resize', debounce(redraw, 150));
-        }
-    }
-
-    prerender(): void {
-        if (this.elem && this.elem instanceof HTMLElement) {
-            this.elem.className += this.config.active
-                ? ' abtest-item--active'
-                : ' abtest-item--expired';
-            this.elem.setAttribute(
-                'data-abtest-name',
-                this.config && this.config.test && this.config.test.id
-            );
-        }
-
-        bonzo(this.elem).addClass(
-            window.abSwitches[`ab${this.config.test.id}`]
-                ? 'abtest-item--switched-on'
-                : 'abtest-item--switched-off'
-        );
-
-        const elements = {
-            expiry: this.getElem('expiry'),
-            audience: this.getElem('audience'),
-            audienceOffset: this.getElem('audience-offset'),
-            description: this.getElem('description'),
-            hypothesis: this.getElem('hypothesis'),
-            name: this.getElem('name'),
-            ophan: this.getElem('ophan'),
-            participation: this.getElem('participation'),
-            tableau: this.getElem('tableau'),
-        };
-        const daysTillExpiry =
-            (Date.parse(this.config.test.expiry) - new Date()) /
-            (1000 * 60 * 60 * 24);
-        const tableauUrl = `https://tableau-datascience.gutools.co.uk/views/AutomatedMVTDashboard-MkII/MainMVTDashboard?:embed=y&id=${
-            this.config.test.id
-        }`;
-        const ophanUrl = `https://dashboard.ophan.co.uk/graph/breakdown?ab=${
-            this.config.test.id
-        }`;
-
-        if (elements.description) {
-            elements.description.textContent = this.config.test.description;
-        }
-
-        if (elements.name) {
-            elements.name.textContent = this.config.test.id;
-        }
-
-        if (elements.expiry) {
-            // $FlowFixMe Go home flow, you are drunk
-            elements.expiry.textContent =
-                Math.floor(daysTillExpiry).toString() +
-                (daysTillExpiry === 1 ? ' day' : ' days');
-        }
-
-        if (elements.expiry) {
-            elements.expiry.setAttribute('title', this.config.test.expiry);
-        }
-
-        if (elements.audience) {
-            elements.audience.textContent = `${this.config.test.audience *
-                100}%`;
-        }
-
-        if (elements.audienceOffset) {
-            elements.audienceOffset.textContent = `${this.config.test
-                .audienceOffset * 100}%`;
-        }
-
-        if (elements.tableau) {
-            elements.tableau.innerHTML = `<a href="${tableauUrl}">view</a>`;
-        }
-
-        if (elements.ophan) {
-            elements.ophan.innerHTML = `<a href="${ophanUrl}">graph</a>`;
-        }
-
-        if (elements.hypothesis) {
-            elements.hypothesis.textContent = this.config.test.hypothesis || '';
-        }
-
-        if (elements.participation) {
-            const participation = new Participation({
-                test: this.config.test,
-            });
-
-            participation.render(elements.participation);
-        }
-    }
-
-    renderChart(): void {
-        if (this.chart) {
-            new window.google.visualization.LineChart(
-                this.getElem('chart')
-            ).draw(
-                window.google.visualization.arrayToDataTable(this.chart.data),
-                {
-                    colors: this.chart.colors,
-                    curveType: 'function',
-                    chartArea: {
-                        width: '100%',
-                        height: 160,
-                        top: 0,
-                        left: 15,
-                    },
-                    legend: {
-                        position: 'in',
-                    },
-                    vAxis: {
-                        title: 'Pageviews/session',
-                        textPosition: 'in',
-                        titleTextStyle: {
-                            fontSize: 11,
-                        },
-                    },
-                    fontName: 'Helvetica',
-                }
-            );
-        }
-    }
-}
-
-export { ABTestReportItem };
diff --git a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/audience-item.js b/static/src/javascripts.flow.archive/projects/admin/modules/abtests/audience-item.js
deleted file mode 100644
index d7ef8896ba6..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/audience-item.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/modules/abtests/audience-item.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: audience-item.js
- Description: Displays information about how the test users are divided.
- */
-import { Component } from 'common/modules/component';
-import bonzo from 'bonzo';
-
-class AudienceItem extends Component {
-    constructor(config: Object): void {
-        super();
-
-        this.templateName = 'audience-item-template';
-        this.componentClass = 'audience-item';
-        this.useBem = true;
-        this.config = Object.assign(
-            {
-                test: {},
-            },
-            config
-        );
-    }
-
-    config: Object;
-
-    prerender(): void {
-        const testEl = this.getElem('test');
-        const testLabel = this.getElem('test-label');
-        const captionTest = this.getElem('caption-test');
-        const captionRange = this.getElem('caption-range');
-
-        if (testLabel) {
-            bonzo(testLabel).prepend(this.config.test.id);
-        }
-
-        // Set the width and absolute position to match the audience size and offset.
-        const audience = this.config.test.audience * 100;
-        const audienceOffset = this.config.test.audienceOffset * 100;
-        const audienceEnd = audience + audienceOffset;
-
-        if (testEl) {
-            testEl.style.width = `${audience.toString()}%`;
-            testEl.style.left = `${audienceOffset.toString()}%`;
-        }
-
-        if (captionTest) {
-            bonzo(captionTest).append(this.config.test.id);
-        }
-
-        if (captionRange) {
-            bonzo(captionRange).append(`${audienceOffset}% to ${audienceEnd}%`);
-        }
-    }
-}
-
-export { AudienceItem };
diff --git a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/audience.js b/static/src/javascripts.flow.archive/projects/admin/modules/abtests/audience.js
deleted file mode 100644
index 26e06356ce9..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/audience.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/modules/abtests/audience.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: audience.js
- Description: Displays information about how the test users are divided.
- */
-import { Component } from 'common/modules/component';
-import { AudienceItem } from 'admin/modules/abtests/audience-item';
-
-class Audience extends Component {
-    constructor(config: Object): void {
-        super();
-
-        this.templateName = 'audience-template';
-        this.componentClass = 'audience-breakdown';
-        this.useBem = true;
-        this.config = Object.assign(
-            {
-                tests: [],
-            },
-            config
-        );
-    }
-
-    config: Object;
-
-    prerender(): void {
-        const testsContainer = this.getElem('tests');
-
-        this.config.tests.forEach(test => {
-            new AudienceItem({
-                test,
-            }).render(testsContainer);
-        });
-    }
-}
-
-export { Audience };
diff --git a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/participation-item.js b/static/src/javascripts.flow.archive/projects/admin/modules/abtests/participation-item.js
deleted file mode 100644
index 66327659978..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/participation-item.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/modules/abtests/participation-item.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: participation-item.js
- Description: Displays opt-in link for a variant
- */
-import { Component } from 'common/modules/component';
-
-class ParticipationItem extends Component {
-    constructor(config: Object): void {
-        super();
-
-        this.templateName = 'participation-item-template';
-        this.componentClass = 'participation-item';
-        this.classes = {};
-        this.useBem = true;
-        this.config = Object.assign(
-            {
-                test: '',
-                examplePath: '',
-                variant: '',
-            },
-            config
-        );
-    }
-
-    config: Object;
-
-    prerender(): void {
-        const origin = /gutools.co.uk$/.test(document.location.origin)
-            ? 'http://www.theguardian.com'
-            : document.location.origin;
-        const href = `${this.config.examplePath}=${this.config.variant}`;
-
-        if (this.elem instanceof HTMLAnchorElement) {
-            this.elem.textContent = this.config.variant;
-            this.elem.href = origin + href;
-        }
-    }
-}
-
-export { ParticipationItem };
diff --git a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/participation.js b/static/src/javascripts.flow.archive/projects/admin/modules/abtests/participation.js
deleted file mode 100644
index 8b76403976d..00000000000
--- a/static/src/javascripts.flow.archive/projects/admin/modules/abtests/participation.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/admin/modules/abtests/participation.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: participation.js
- Description: Displays opt-in and opt-out links for a test
- */
-import { Component } from 'common/modules/component';
-import { ParticipationItem } from 'admin/modules/abtests/participation-item';
-
-class Participation extends Component {
-    constructor(config: Object): void {
-        super();
-
-        this.templateName = 'participation-template';
-        this.componentClass = 'participation';
-        this.useBem = true;
-        this.config = Object.assign(
-            {
-                test: '',
-            },
-            config
-        );
-    }
-
-    config: Object;
-
-    prerender(): void {
-        const test = this.config.test;
-        const origin = /gutools.co.uk$/.test(document.location.origin)
-            ? 'http://www.theguardian.com'
-            : document.location.origin;
-        const examplePath = `${test.examplePath || '/uk'}#ab-${test.id}`;
-        const optOutEl = ((this.getElem('opt-out'): any): HTMLAnchorElement);
-
-        optOutEl.href = `${origin}${examplePath}=notintest`;
-
-        const linksContainer = this.getElem('links');
-
-        test.variants.forEach(variant => {
-            new ParticipationItem({
-                test: test.id,
-                examplePath,
-                variant: variant.id,
-            }).render(linksContainer);
-        });
-    }
-}
-
-export { Participation };
diff --git a/static/src/javascripts.flow.archive/projects/atoms/services.js b/static/src/javascripts.flow.archive/projects/atoms/services.js
deleted file mode 100644
index a28bbf4fab0..00000000000
--- a/static/src/javascripts.flow.archive/projects/atoms/services.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/atoms/services.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// expose some frontend modules to atoms
-// managed by the atoms team
-
-import ophan from 'ophan/ng';
-import fastdom from 'fastdom';
-import { isAdFreeUser } from 'common/modules/commercial/user-features';
-import {
-    onConsentChange,
-    getConsentFor,
-} from '@guardian/consent-management-platform';
-import { viewport } from './services/viewport';
-
-// Need to pass in the API to native services, something that looks
-// like this:
-// {
-//    ophan:    { record: function(obj) { ... } },
-//    identity: { ... },
-//    ...
-// }
-
-type FastdomAction = Function => void;
-
-const promisify = (fdaction: FastdomAction) => (
-    thunk: Function
-): Promise<any> =>
-    new Promise(resolve => {
-        fdaction.call(fastdom, () => {
-            resolve(thunk());
-        });
-    });
-
-const onAcastConsentChange = (callback: boolean => void): void => {
-    onConsentChange(state => {
-        const consented = getConsentFor('acast', state);
-        callback(consented);
-    });
-};
-
-const services: Services = {
-    ophan,
-    dom: {
-        write: promisify(fastdom.mutate),
-        read: promisify(fastdom.measure),
-    },
-    viewport,
-    consent: {
-        onAcastConsentChange,
-    },
-    commercial: {
-        isAdFree: isAdFreeUser(),
-    },
-};
-
-export { services };
diff --git a/static/src/javascripts.flow.archive/projects/atoms/services/viewport.js b/static/src/javascripts.flow.archive/projects/atoms/services/viewport.js
deleted file mode 100644
index 1e05654f0d5..00000000000
--- a/static/src/javascripts.flow.archive/projects/atoms/services/viewport.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/atoms/services/viewport.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-type ObserverRecord = {
-    observer: window.IntersectionObserver,
-    registry: Array<{ callback: number => void, element: Element }>,
-};
-
-const cache: Map<number, ObserverRecord> = new Map();
-
-const observe = (
-    element: Element,
-    threshold: number,
-    callback: number => void
-): void => {
-    let record = cache.get(threshold);
-    if (!record) {
-        record = {
-            registry: [{ callback, element }],
-            observer: new window.IntersectionObserver(
-                (entries: window.IntersectionObserverEntry[]) => {
-                    const record2 = cache.get(threshold);
-                    if (!record2) return;
-
-                    entries.forEach(entry => {
-                        if (entry.isIntersecting) {
-                            const buddy = record2.registry.find(
-                                ({ element: e }) => e === entry.target
-                            );
-                            if (buddy) {
-                                buddy.callback(entry.intersectionRatio);
-                            }
-                        }
-                    });
-                },
-                { threshold }
-            ),
-        };
-    } else {
-        record.registry.push({ callback, element });
-    }
-    cache.set(threshold, record);
-    record.observer.observe(element);
-};
-
-const unobserve = (
-    element: Element,
-    threshold: number,
-    callback: number => void
-): void => {
-    const record = cache.get(threshold);
-    if (!record) return;
-
-    const buddyIdx = record.registry.findIndex(
-        ({ element: e, callback: c }) => e === element && c === callback
-    );
-    if (buddyIdx === -1) return;
-
-    record.registry.splice(buddyIdx, 1);
-
-    if (record.registry.length === 0) {
-        cache.delete(threshold);
-    } else {
-        cache.set(threshold, record);
-    }
-};
-
-const viewport: ViewportService = {
-    observe,
-    unobserve,
-};
-
-export { viewport };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/article-body-adverts.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/article-body-adverts.spec.js
deleted file mode 100644
index 50bbd2ad5b6..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/article-body-adverts.spec.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/article-body-adverts.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { init } from 'commercial/modules/article-body-adverts';
-import config from 'lib/config';
-import { spaceFiller } from 'common/modules/article/space-filler';
-import { commercialFeatures } from 'common/modules/commercial/commercial-features';
-import {
-    getViewport as getViewport_,
-    getBreakpoint as getBreakpoint_,
-    isBreakpoint as isBreakpoint_,
-} from 'lib/detect';
-
-const getViewport: any = getViewport_;
-const getBreakpoint: any = getBreakpoint_;
-const isBreakpoint: any = isBreakpoint_;
-
-jest.mock('commercial/modules/dfp/track-ad-render', () => (id: string) => {
-    const ads = {
-        'dfp-ad--im': true,
-    };
-    return Promise.resolve(ads[id]);
-});
-jest.mock('commercial/modules/dfp/add-slot', () => ({
-    addSlot: jest.fn(),
-}));
-jest.mock('common/modules/commercial/commercial-features', () => ({
-    commercialFeatures: {},
-}));
-jest.mock('common/modules/article/space-filler', () => ({
-    spaceFiller: {
-        fillSpace: jest.fn(),
-    },
-}));
-jest.mock('lib/detect', () => ({
-    isBreakpoint: jest.fn(),
-    getBreakpoint: jest.fn(),
-    getViewport: jest.fn(),
-}));
-jest.mock('lib/config', () => ({ page: {}, get: () => false }));
-jest.mock('common/modules/experiments/ab', () => ({
-    isInVariantSynchronous: () => false,
-}));
-
-const spaceFillerStub: JestMockFn<*, *> = (spaceFiller.fillSpace: any);
-
-describe('Article Body Adverts', () => {
-    beforeEach(() => {
-        jest.resetAllMocks();
-        commercialFeatures.articleBodyAdverts = true;
-        spaceFillerStub.mockImplementation(() => Promise.resolve(2));
-        getViewport.mockReturnValue({ height: 1300 });
-        expect.hasAssertions();
-    });
-
-    it('should exist', () => {
-        expect(init).toBeDefined();
-    });
-
-    it('should exit if commercial feature disabled', () => {
-        commercialFeatures.articleBodyAdverts = false;
-        return init().then(() => {
-            expect(spaceFillerStub).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('When merchandising components enabled', () => {
-        beforeEach(() => {
-            getBreakpoint.mockReturnValue('mobile');
-            isBreakpoint.mockReturnValue(true);
-            config.page.hasInlineMerchandise = true;
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/brazeBanner.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/brazeBanner.spec.js
deleted file mode 100644
index be4e0385dcb..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/brazeBanner.spec.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/brazeBanner.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {brazeVendorId, canShowPreChecks, hasRequiredConsents} from "./brazeBanner";
-
-jest.mock('lib/raven');
-jest.mock('ophan/ng', () => null);
-
-let mockOnConsentChangeResult;
-jest.mock('@guardian/consent-management-platform', () => ({
-    onConsentChange: callback => {
-        callback(mockOnConsentChangeResult);
-    }
-}));
-
-afterEach(() => {
-    mockOnConsentChangeResult = undefined;
-});
-
-describe('canShowPreChecks', () => {
-    describe('when the switch is off', () => {
-        it('returns false', () => {
-            const result = canShowPreChecks({
-                brazeSwitch: false,
-                apiKey: 'abcde',
-                isDigiSubscriber: true,
-                pageConfig: {isPaidContent: false},
-            })
-
-            expect(result).toBe(false);
-        });
-    });
-
-    describe('when the api key is empty', () => {
-        it('returns false', () => {
-            const result = canShowPreChecks({
-                brazeSwitch: true,
-                apiKey: '',
-                isDigiSubscriber: true,
-                pageConfig: {isPaidContent: false},
-            })
-
-            expect(result).toBe(false);
-        });
-    });
-
-    describe('when not a digital subscriber', () => {
-        it('returns false', () => {
-            const result = canShowPreChecks({
-                brazeSwitch: true,
-                apiKey: 'abcde',
-                isDigiSubscriber: false,
-                pageConfig: {isPaidContent: false},
-            })
-
-            expect(result).toBe(false);
-        });
-    });
-
-    describe('when viewing paid content', () => {
-        it('returns false', () => {
-            const result = canShowPreChecks({
-                brazeSwitch: true,
-                apiKey: 'abcde',
-                isDigiSubscriber: true,
-                pageConfig: {isPaidContent: true},
-            })
-
-            expect(result).toBe(false);
-        });
-    });
-
-    describe('when all checks pass', () => {
-        it('returns true', () => {
-            const result = canShowPreChecks({
-                brazeSwitch: true,
-                apiKey: 'abcde',
-                isDigiSubscriber: true,
-                pageConfig: {isPaidContent: false},
-            })
-
-            expect(result).toBe(true);
-
-        })
-    })
-});
-
-describe('hasRequiredConsents', () => {
-    describe('when the user is covered by tcfv2 and consent is given', () => {
-        it('returns a promise which resolves with true', async () => {
-            mockOnConsentChangeResult = {
-                tcfv2: {
-                    vendorConsents: {
-                        [brazeVendorId]: true,
-                    },
-                }
-            }
-
-            await expect(hasRequiredConsents()).resolves.toBe(true);
-        });
-    });
-
-    describe('when the user is covered by tcfv2 and consent is not given', () => {
-        it('returns a promise which resolves with false', async () => {
-            mockOnConsentChangeResult = {
-                tcfv2: {
-                    vendorConsents: {
-                        [brazeVendorId]: false,
-                    },
-                }
-            }
-
-            await expect(hasRequiredConsents()).resolves.toBe(false);
-        })
-    });
-
-    describe('when the user is covered by ccpa and consent is given', () => {
-        it('returns a promise which resolves with true', async () => {
-            mockOnConsentChangeResult = {
-                ccpa: {
-                    doNotSell: false,
-                }
-            }
-
-            await expect(hasRequiredConsents()).resolves.toBe(true);
-        })
-    });
-
-    describe('when the user is covered by ccpa and consent is not given', () => {
-        it('returns a promise which resolves with false', async () => {
-            mockOnConsentChangeResult = {
-                ccpa: {
-                    doNotSell: true,
-                }
-            }
-
-            await expect(hasRequiredConsents()).resolves.toBe(false);
-        })
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/add-tracking-pixel.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/add-tracking-pixel.js
deleted file mode 100644
index 9d39661f025..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/add-tracking-pixel.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/add-tracking-pixel.js
- * to .ts, then delete it.
- */
-
-// @flow
-const addTrackingPixel = (url: string): void => {
-    new Image().src = url;
-};
-
-export { addTrackingPixel };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/add-viewability-tracker.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/add-viewability-tracker.js
deleted file mode 100644
index b2140e27b74..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/add-viewability-tracker.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/add-viewability-tracker.js
- * to .ts, then delete it.
- */
-
-// @flow
-export const addViewabilityTracker = (
-    adSlot: Node,
-    creativeId: string,
-    viewabilityTracker: string
-): void => {
-    /*
-      we need to ensure that any scripts in the viewabilityTracker are parsed
-      and executed; this can be done with a Range and ContextualFragment
-    */
-    const range: Range = document.createRange();
-    range.setStart(adSlot, 0);
-    range.setEnd(adSlot, 0);
-    adSlot.appendChild(
-        range.createContextualFragment(
-            viewabilityTracker.replace('INSERT_UNIQUE_ID', creativeId)
-        )
-    );
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-expandable-video-v2.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-expandable-video-v2.js
deleted file mode 100644
index 46b35dd6fcf..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-expandable-video-v2.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/fabric-expandable-video-v2.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-import template from 'lodash/template';
-import fabricExpandableVideoHtml from 'raw-loader!commercial/views/creatives/fabric-expandable-video-v2.html';
-import fabricExpandableCtaHtml from 'raw-loader!commercial/views/creatives/fabric-expandable-video-v2-cta.html';
-import arrowDown from 'svgs/icon/arrow-down.svg';
-import closeCentral from 'svgs/icon/close-central.svg';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-
-const FabricExpandableVideoV2 = (adSlot: Element, params: Object) => {
-    let isClosed = true;
-    const closedHeight = 250;
-    const openedHeight = 500;
-
-    const ctaTpl = template(fabricExpandableCtaHtml);
-
-    const create = () => {
-        const videoHeight = openedHeight;
-        const plusIconPosition = params.showCrossInContainer.substring(3);
-        const additionalParams = {
-            id: `fabric-expandable-${Math.round(Math.random() * 10000).toString(
-                16
-            )}`,
-            desktopCTA: params.ctaDesktopImage
-                ? ctaTpl({
-                      media: 'hide-until-tablet',
-                      link: params.link,
-                      image: params.ctaDesktopImage,
-                      position: params.ctaDesktopPosition,
-                  })
-                : '',
-            mobileCTA: params.ctaMobileImage
-                ? ctaTpl({
-                      media: 'mobile-only',
-                      link: params.link,
-                      image: params.ctaMobileImage,
-                      position: params.ctaMobilePosition,
-                  })
-                : '',
-            showArrow:
-                params.showMoreType === 'arrow-only' ||
-                params.showMoreType === 'plus-and-arrow'
-                    ? `<button class="ad-exp__open-chevron ad-exp__open">${
-                          arrowDown.markup
-                      }</button>`
-                    : '',
-            showPlus:
-                params.showMoreType === 'plus-only' ||
-                params.showMoreType === 'plus-and-arrow'
-                    ? `<button class="ad-exp__close-button ad-exp__open ad-exp__open--${plusIconPosition}">${
-                          closeCentral.markup
-                      }</button>`
-                    : '',
-            videoEmbed:
-                params.YoutubeVideoURL !== ''
-                    ? `<iframe id="YTPlayer" width="100%" height="${videoHeight}" src="${
-                          params.YoutubeVideoURL
-                      }?showinfo=0&amp;rel=0&amp;controls=0&amp;fs=0&amp;title=0&amp;byline=0&amp;portrait=0" frameborder="0" class="expandable-video"></iframe>`
-                    : '',
-        };
-
-        const $fabricExpandableVideo = $.create(
-            template(fabricExpandableVideoHtml)({
-                data: Object.assign(params, additionalParams),
-            })
-        );
-        const $ad = $('.ad-exp--expand', $fabricExpandableVideo);
-
-        const open = isOpen => {
-            const videoSrc = $('#YTPlayer').attr('src');
-            let videoSrcAutoplay = videoSrc;
-
-            if (videoSrc.indexOf('autoplay') === -1) {
-                videoSrcAutoplay = `${videoSrc}&amp;autoplay=1`;
-            } else {
-                videoSrcAutoplay = videoSrcAutoplay.replace(
-                    isOpen ? 'autoplay=0' : 'autoplay=1',
-                    isOpen ? 'autoplay=1' : 'autoplay=0'
-                );
-            }
-
-            if (isOpen) {
-                $('.ad-exp__close-button', adSlot).addClass('button-spin');
-                $('.ad-exp__open-chevron', adSlot).addClass('chevron-down');
-                $ad.css('height', openedHeight);
-                $fabricExpandableVideo.addClass('creative--open');
-                $('.slide-video, .slide-video .ad-exp__layer', adSlot)
-                    .css('height', openedHeight)
-                    .addClass('slide-video__expand');
-            } else {
-                $('.ad-exp__close-button', adSlot).removeClass('button-spin');
-                $('.ad-exp__open-chevron', adSlot).removeClass('chevron-down');
-                $ad.css('height', closedHeight);
-                $fabricExpandableVideo.removeClass('creative--open');
-                $('.slide-video, .slide-video .ad-exp__layer', adSlot)
-                    .css('height', closedHeight)
-                    .removeClass('slide-video__expand');
-            }
-
-            isClosed = !isOpen;
-
-            setTimeout(() => {
-                $('#YTPlayer').attr('src', videoSrcAutoplay);
-            }, 1000);
-        };
-
-        bean.on(adSlot, 'click', '.ad-exp__open', () => {
-            fastdom.mutate(() => {
-                open(isClosed);
-            });
-        });
-
-        bean.on(
-            adSlot,
-            'click',
-            '.video-container__cta, .creative__cta',
-            () => {
-                fastdom.mutate(() => {
-                    open(false);
-                });
-            }
-        );
-
-        return fastdom.mutate(() => {
-            $ad.css('height', closedHeight);
-            $('.ad-exp-collapse__slide', $fabricExpandableVideo).css(
-                'height',
-                closedHeight
-            );
-            if (params.trackingPixel) {
-                addTrackingPixel(params.trackingPixel + params.cacheBuster);
-            }
-            if (params.researchPixel) {
-                addTrackingPixel(params.researchPixel + params.cacheBuster);
-            }
-            $fabricExpandableVideo.appendTo(adSlot);
-            if (params.viewabilityTracker) {
-                addViewabilityTracker(
-                    adSlot,
-                    params.id,
-                    params.viewabilityTracker
-                );
-            }
-            adSlot.classList.add('ad-slot--fabric');
-            if (
-                adSlot.parentNode &&
-                ((adSlot.parentNode: any): Element).classList.contains(
-                    'top-banner-ad-container'
-                )
-            ) {
-                ((adSlot.parentNode: any): Element).classList.add(
-                    'top-banner-ad-container--fabric'
-                );
-            }
-            return true;
-        });
-    };
-
-    return Object.freeze({
-        create,
-    });
-};
-
-export { FabricExpandableVideoV2 };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-expanding-v1.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-expanding-v1.js
deleted file mode 100644
index 937be778168..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-expanding-v1.js
+++ /dev/null
@@ -1,353 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/fabric-expanding-v1.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-import { getViewport, isBreakpoint, isIOS, isAndroid } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { storage } from '@guardian/libs';
-import template from 'lodash/template';
-import fabricExpandingV1Html from 'raw-loader!commercial/views/creatives/fabric-expanding-v1.html';
-import fabricExpandingVideoHtml from 'raw-loader!commercial/views/creatives/fabric-expanding-video.html';
-import arrowDown from 'svgs/icon/arrow-down.svg';
-import closeCentral from 'svgs/icon/close-central.svg';
-import bindAll from 'lodash/bindAll';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-
-// Forked from expandable-v3.js
-class FabricExpandingV1 {
-    adSlot: any;
-    params: any;
-    isClosed: any;
-    initialExpandCounter: any;
-    closedHeight: any;
-    openedHeight: any;
-
-    $button: any;
-    $ad: any;
-
-    static hasScrollEnabled: boolean;
-
-    constructor(adSlot: any, params: any) {
-        this.adSlot = adSlot;
-        this.params = params;
-        this.isClosed = true;
-        this.initialExpandCounter = false;
-
-        this.closedHeight = 250;
-        this.openedHeight = 500;
-
-        bindAll(this, 'updateBgPosition', 'listener');
-    }
-
-    updateBgPosition() {
-        const viewportHeight = getViewport().height;
-        const adSlotTop = this.adSlot.getBoundingClientRect().top;
-
-        const adHeight = this.isClosed ? this.closedHeight : this.openedHeight;
-        const inViewB = viewportHeight > adSlotTop;
-        const inViewT = -adHeight * 2 < adSlotTop + 20;
-        const topCusp =
-            inViewT && viewportHeight * 0.4 - adHeight > adSlotTop
-                ? 'true'
-                : 'false';
-        const bottomCusp =
-            inViewB && viewportHeight * 0.5 < adSlotTop ? 'true' : 'false';
-        const bottomScroll =
-            bottomCusp === 'true'
-                ? 50 - (viewportHeight * 0.5 - adSlotTop) * -0.2
-                : 50;
-        const topScroll =
-            topCusp === 'true'
-                ? (viewportHeight * 0.4 - adSlotTop - adHeight) * 0.2
-                : 0;
-
-        let scrollAmount;
-
-        switch (this.params.backgroundImagePType) {
-            case 'split':
-                scrollAmount = bottomScroll + topScroll;
-                fastdom.mutate(() => {
-                    $('.ad-exp--expand-scrolling-bg', this.adSlot).css({
-                        'background-repeat': 'no-repeat',
-                        'background-position': `50%${scrollAmount}%`,
-                    });
-                });
-                break;
-            case 'fixed':
-                scrollAmount = -adSlotTop;
-                fastdom.mutate(() => {
-                    $('.ad-exp--expand-scrolling-bg', this.adSlot).css(
-                        'background-position',
-                        `50%${scrollAmount}px`
-                    );
-                });
-                break;
-            case 'fixed matching fluid250':
-                fastdom.mutate(() => {
-                    $('.ad-exp--expand-scrolling-bg', this.adSlot).addClass(
-                        'ad-exp--expand-scrolling-bg-fixed'
-                    );
-                });
-                break;
-            case 'parallax':
-                scrollAmount = Math.ceil(adSlotTop * 0.3) + 20;
-                fastdom.mutate(() => {
-                    $('.ad-exp--expand-scrolling-bg', this.adSlot).addClass(
-                        'ad-exp--expand-scrolling-bg-parallax'
-                    );
-                    $('.ad-exp--expand-scrolling-bg', this.adSlot).css(
-                        'background-position',
-                        `50%${scrollAmount}%`
-                    );
-                });
-                break;
-            case 'none':
-                break;
-            default:
-                break;
-        }
-    }
-
-    listener() {
-        if (
-            !this.initialExpandCounter &&
-            getViewport().height >
-                this.adSlot.getBoundingClientRect().top + this.openedHeight
-        ) {
-            const itemId = $('.ad-slot__content', this.adSlot).attr('id');
-            const itemIdArray = itemId.split('/');
-
-            if (!storage.local.get(`gu.commercial.expandable.${itemIdArray[1]}`)) {
-                // expires in 1 week
-                const week = 1000 * 60 * 60 * 24 * 7;
-                fastdom.mutate(() => {
-                    storage.local.set(
-                        `gu.commercial.expandable.${itemIdArray[1]}`,
-                        true,
-                        Date.now() + week
-                    );
-                    this.$button.addClass('button-spin');
-                    $('.ad-exp__open-chevron')
-                        .removeClass('chevron-up')
-                        .addClass('chevron-down');
-                    this.$ad.css('height', this.openedHeight);
-                    this.isClosed = false;
-                    this.initialExpandCounter = true;
-                });
-            } else if (this.isClosed) {
-                fastdom.mutate(() => {
-                    $('.ad-exp__open-chevron').addClass('chevron-up');
-                });
-            }
-            return true;
-        }
-    }
-
-    buildVideo(customClass: string) {
-        const videoAspectRatio = 16 / 9;
-        const videoHeight = isBreakpoint({
-            max: 'phablet',
-        })
-            ? 125
-            : 250;
-        const videoWidth = videoHeight * videoAspectRatio;
-        const leftMargin =
-            this.params.videoPositionH === 'center'
-                ? `margin-left: ${videoWidth / -2}px`
-                : '';
-        const leftPosition =
-            this.params.videoPositionH === 'left'
-                ? `left: ${this.params.videoHorizSpace}px`
-                : '';
-        const rightPosition =
-            this.params.videoPositionH === 'right'
-                ? `right: ${this.params.videoHorizSpace}px`
-                : '';
-
-        const viewModel = {
-            width: videoWidth,
-            height: videoHeight,
-            src: `${
-                this.params.videoURL
-            }?rel=0&amp;controls=0&amp;showinfo=0&amp;title=0&amp;byline=0&amp;portrait=0`,
-            className: [
-                'expandable_video',
-                `expandable_video--horiz-pos-${this.params.videoPositionH}`,
-                customClass,
-            ].join(' '),
-            inlineStyle: [leftMargin, leftPosition, rightPosition].join('; '),
-        };
-
-        return template(fabricExpandingVideoHtml)(viewModel);
-    }
-
-    stopVideo(delay: number = 0) {
-        const videoSelector = isBreakpoint({
-            min: 'tablet',
-        })
-            ? '.js-fabric-video--desktop'
-            : '.js-fabric-video--mobile';
-        const video = $(videoSelector, this.adSlot);
-        const videoSrc = video.attr('src');
-
-        window.setTimeout(() => {
-            video.attr('src', `${videoSrc}&amp;autoplay=0`);
-        }, delay);
-    }
-
-    create() {
-        const hasVideo = this.params.videoURL !== '';
-        const videoDesktop = {
-            videoDesktop: hasVideo
-                ? this.buildVideo('js-fabric-video--desktop')
-                : '',
-        };
-        const videoMobile = {
-            videoMobile: hasVideo
-                ? this.buildVideo('js-fabric-video--mobile')
-                : '',
-        };
-        const showmoreArrow = {
-            showArrow:
-                this.params.showMoreType === 'arrow-only' ||
-                this.params.showMoreType === 'plus-and-arrow'
-                    ? `<button class="ad-exp__open-chevron ad-exp__open">${
-                          arrowDown.markup
-                      }</button>`
-                    : '',
-        };
-        const showmorePlus = {
-            showPlus:
-                this.params.showMoreType === 'plus-only' ||
-                this.params.showMoreType === 'plus-and-arrow'
-                    ? `<button class="ad-exp__close-button ad-exp__open">${
-                          closeCentral.markup
-                      }</button>`
-                    : '',
-        };
-        const scrollbgDefaultY = '0%'; // used if no parallax / fixed background scroll support
-        const scrollingbg = {
-            scrollbg:
-                this.params.backgroundImagePType !== 'none'
-                    ? `<div class="ad-exp--expand-scrolling-bg" style="background-image: url(${
-                          this.params.backgroundImageP
-                      }); background-position: ${
-                          this.params.backgroundImagePPosition
-                      } ${scrollbgDefaultY}; background-repeat: ${
-                          this.params.backgroundImagePRepeat
-                      };"></div>`
-                    : '',
-        };
-        this.params.id = `fabric-expanding-${Math.floor(
-            Math.random() * 10000
-        ).toString(16)}`;
-        const $fabricExpandingV1 = $.create(
-            template(fabricExpandingV1Html)({
-                data: Object.assign(
-                    this.params,
-                    showmoreArrow,
-                    showmorePlus,
-                    videoDesktop,
-                    videoMobile,
-                    scrollingbg
-                ),
-            })
-        );
-
-        mediator.on('window:throttledScroll', this.listener);
-
-        bean.on(this.adSlot, 'click', '.ad-exp__open', () => {
-            if (!this.isClosed && hasVideo) {
-                // wait 1000ms for close animation to finish
-                this.stopVideo(1000);
-            }
-
-            fastdom.mutate(() => {
-                $('.ad-exp__close-button').toggleClass('button-spin');
-                $('.ad-exp__open-chevron')
-                    .removeClass('chevron-up')
-                    .toggleClass('chevron-down');
-                this.$ad.css(
-                    'height',
-                    this.isClosed ? this.openedHeight : this.closedHeight
-                );
-                this.isClosed = !this.isClosed;
-                this.initialExpandCounter = true;
-            });
-        });
-
-        if (FabricExpandingV1.hasScrollEnabled) {
-            // update bg position
-            this.updateBgPosition();
-
-            mediator.on('window:throttledScroll', this.updateBgPosition);
-            // to be safe, also update on window resize
-            mediator.on('window:throttledResize', this.updateBgPosition);
-        }
-
-        return fastdom.mutate(function() {
-            this.$ad = $('.ad-exp--expand', $fabricExpandingV1).css(
-                'height',
-                this.closedHeight
-            );
-            this.$button = $('.ad-exp__open', $fabricExpandingV1);
-
-            $('.ad-exp-collapse__slide', $fabricExpandingV1).css(
-                'height',
-                this.closedHeight
-            );
-
-            if (this.params.trackingPixel) {
-                addTrackingPixel(
-                    this.params.trackingPixel + this.params.cacheBuster
-                );
-            }
-
-            if (this.params.researchPixel) {
-                addTrackingPixel(
-                    this.params.researchPixel + this.params.cacheBuster
-                );
-            }
-
-            $fabricExpandingV1.appendTo(this.adSlot);
-
-            if (this.params.viewabilityTracker) {
-                addViewabilityTracker(
-                    this.adSlot,
-                    this.params.id,
-                    this.params.viewabilityTracker
-                );
-            }
-
-            this.adSlot.classList.add('ad-slot--fabric');
-
-            if (
-                this.adSlot.parentNode.classList.contains(
-                    'top-banner-ad-container'
-                )
-            ) {
-                this.adSlot.parentNode.classList.add(
-                    'top-banner-ad-container--fabric'
-                );
-            }
-            return true;
-        }, this);
-    }
-}
-
-FabricExpandingV1.hasScrollEnabled = !isIOS() && !isAndroid();
-
-export { FabricExpandingV1 };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-v1.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-v1.js
deleted file mode 100644
index ff8c71635dd..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-v1.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/fabric-v1.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import { isEnhanced, isAndroid, getUserAgent, getViewport } from 'lib/detect';
-import template from 'lodash/template';
-import mediator from 'lib/mediator';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-import fabricV1Html from 'raw-loader!commercial/views/creatives/fabric-v1.html';
-import iframeVideoStr from 'raw-loader!commercial/views/creatives/iframe-video.html';
-import scrollBgStr from 'raw-loader!commercial/views/creatives/scrollbg.html';
-
-const hasBackgroundFixedSupport = !isAndroid();
-const isIE10OrLess =
-    typeof getUserAgent === 'object' &&
-    getUserAgent.browser === 'MSIE' &&
-    parseInt(getUserAgent.version, 10) <= 10;
-
-let fabricV1Tpl;
-let iframeVideoTpl;
-let scrollBgTpl;
-
-// This is a hasty clone of fluid250.js
-
-class FabricV1 {
-    adSlot: Element;
-    params: Object;
-
-    scrollingBg: ?HTMLElement;
-    layer2: ?HTMLElement;
-    scrollType: string;
-
-    constructor(adSlot: Element, params: Object) {
-        this.adSlot = adSlot;
-        this.params = params;
-    }
-
-    create() {
-        if (!fabricV1Tpl) {
-            fabricV1Tpl = template(fabricV1Html);
-            iframeVideoTpl = template(iframeVideoStr);
-            scrollBgTpl = template(scrollBgStr);
-        }
-
-        const videoPosition = {
-            position:
-                this.params.videoPositionH === 'left' ||
-                this.params.videoPositionH === 'right'
-                    ? `${this.params.videoPositionH}:${
-                          this.params.videoHorizSpace
-                      }px;`
-                    : '',
-        };
-
-        const templateOptions = {
-            id: `fabric-${Math.trunc(Math.random() * 10000).toString(16)}`,
-            showLabel: this.params.showAdLabel !== 'hide',
-            video: this.params.videoURL
-                ? iframeVideoTpl(Object.assign({}, this.params, videoPosition))
-                : '',
-            hasContainer: 'layerTwoAnimation' in this.params,
-            layerTwoBGPosition:
-                this.params.layerTwoBGPosition &&
-                (!this.params.layerTwoAnimation ||
-                    this.params.layerTwoAnimation === 'disabled' ||
-                    (!isEnhanced() &&
-                        this.params.layerTwoAnimation === 'enabled'))
-                    ? this.params.layerTwoBGPosition
-                    : '0% 0%',
-            scrollbg:
-                this.params.backgroundImagePType &&
-                this.params.backgroundImagePType !== 'none'
-                    ? scrollBgTpl(this.params)
-                    : false,
-        };
-
-        if (templateOptions.scrollbg) {
-            // update bg position
-            fastdom.measure(this.updateBgPosition, this);
-            mediator.on(
-                'window:throttledScroll',
-                this.updateBgPosition.bind(this)
-            );
-            // to be safe, also update on window resize
-            mediator.on(
-                'window:throttledResize',
-                this.updateBgPosition.bind(this)
-            );
-        }
-
-        if (this.params.trackingPixel) {
-            addTrackingPixel(
-                this.params.trackingPixel + this.params.cacheBuster
-            );
-        }
-
-        if (this.params.researchPixel) {
-            addTrackingPixel(
-                this.params.researchPixel + this.params.cacheBuster
-            );
-        }
-
-        return fastdom.mutate(() => {
-            this.adSlot.insertAdjacentHTML(
-                'beforeend',
-                fabricV1Tpl({
-                    data: Object.assign({}, this.params, templateOptions),
-                })
-            );
-            this.scrollingBg = this.adSlot.querySelector('.ad-scrolling-bg');
-            this.layer2 = this.adSlot.querySelector(
-                '.hide-until-tablet .fabric-v1_layer2'
-            );
-            this.scrollType = this.params.backgroundImagePType;
-
-            // layer two animations must not have a background position, otherwise the background will
-            // be visible before the animation has been initiated.
-            if (
-                this.params.layerTwoAnimation === 'enabled' &&
-                this.layer2 &&
-                isEnhanced() &&
-                !isIE10OrLess
-            ) {
-                this.layer2.style.backgroundPosition = '';
-            }
-
-            if (
-                this.scrollType === 'fixed' &&
-                this.scrollingBg &&
-                hasBackgroundFixedSupport
-            ) {
-                this.scrollingBg.style.backgroundAttachment = 'fixed';
-            }
-
-            // #? `classList.add` takes multiple arguments, but we are using it
-            // here with arity 1 because polyfill.io has incorrect support with IE 10 and 11.
-            // One may revert to this.adSlot.classList.add('ad-slot--fabric-v1', 'ad-slot--fabric', 'content__mobile-full-width');
-            // When support is correct or when we stop supporting IE <= 11
-            this.adSlot.classList.add('ad-slot--fabric-v1');
-            this.adSlot.classList.add('ad-slot--fabric');
-            this.adSlot.classList.add('content__mobile-full-width');
-
-            if (
-                this.adSlot.parentNode &&
-                this.adSlot.parentNode instanceof HTMLElement &&
-                this.adSlot.parentNode.classList.contains(
-                    'top-banner-ad-container'
-                )
-            ) {
-                this.adSlot.parentNode.classList.add(
-                    'top-banner-ad-container--fabric'
-                );
-            }
-
-            if (this.params.viewabilityTracker) {
-                addViewabilityTracker(
-                    this.adSlot,
-                    this.params.id,
-                    this.params.viewabilityTracker
-                );
-            }
-
-            return true;
-        });
-    }
-
-    updateBgPosition() {
-        if (this.scrollType === 'parallax') {
-            const scrollAmount =
-                Math.ceil(this.adSlot.getBoundingClientRect().top * 0.3) + 20;
-            fastdom.mutate(() => {
-                if (this.scrollingBg) {
-                    this.scrollingBg.style.backgroundPosition = `50% ${scrollAmount}%`;
-                    this.scrollingBg.classList.add('ad-scrolling-bg-parallax');
-                }
-            });
-        } else if (this.scrollType === 'fixed' && !hasBackgroundFixedSupport) {
-            const adRect = this.adSlot.getBoundingClientRect();
-            const vPos =
-                ((window.innerHeight - adRect.bottom + adRect.height / 2) /
-                    window.innerHeight) *
-                100;
-            fastdom.mutate(() => {
-                if (this.scrollingBg) {
-                    this.scrollingBg.style.backgroundPosition = `50% ${vPos}%`;
-                }
-            });
-        }
-        this.layer2Animation();
-    }
-
-    layer2Animation() {
-        let inViewB;
-        if (
-            this.params.layerTwoAnimation === 'enabled' &&
-            isEnhanced() &&
-            !isIE10OrLess
-        ) {
-            inViewB =
-                getViewport().height > this.adSlot.getBoundingClientRect().top;
-            fastdom.mutate(() => {
-                if (this.layer2) {
-                    this.layer2.classList.add(
-                        `ad-scrolling-text-hide${
-                            this.params.layerTwoAnimationPosition
-                                ? `-${this.params.layerTwoAnimationPosition}`
-                                : ''
-                        }`
-                    );
-                }
-                if (this.layer2 && inViewB) {
-                    this.layer2.classList.add(
-                        `ad-scrolling-text-animate${
-                            this.params.layerTwoAnimationPosition
-                                ? `-${this.params.layerTwoAnimationPosition}`
-                                : ''
-                        }`
-                    );
-                }
-            });
-        }
-    }
-}
-
-export { FabricV1 };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-video.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-video.js
deleted file mode 100644
index f49d05f3adf..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/fabric-video.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/fabric-video.js
- * to .ts, then delete it.
- */
-
-// @flow
-import qwery from 'qwery';
-import { addEventListener } from 'lib/events';
-import fastdom from 'lib/fastdom-promise';
-import { isIOS, isAndroid, isBreakpoint, getViewport } from 'lib/detect';
-import template from 'lodash/template';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-import fabricVideoStr from 'raw-loader!commercial/views/creatives/fabric-video.html';
-import objectFitVideos from 'object-fit-videos';
-
-class FabricVideo {
-    isUpdating: boolean;
-    adSlot: HTMLElement;
-    params: Object;
-    layer2: ?Array<Element>;
-    video: ?HTMLVideoElement;
-    hasVideo: boolean;
-    inView: boolean;
-
-    constructor(adSlot: HTMLElement, params: Object) {
-        const isSmallScreen = isBreakpoint({
-            max: 'phablet',
-        });
-
-        this.isUpdating = false;
-        this.hasVideo = !(isIOS() || isAndroid() || isSmallScreen);
-        this.inView = false;
-        this.adSlot = adSlot;
-        this.params = params;
-
-        this.params.id = `fabric-video-${Math.floor(
-            Math.random() * 10000
-        ).toString(16)}`;
-
-        if (isSmallScreen) {
-            this.params.posterMobile = `<div class="creative__poster" style="background-image:url(${
-                this.params.Videobackupimage
-            })"></div>`;
-        } else {
-            if (this.hasVideo) {
-                this.params.video = `<video muted class="creative__video creative__video--${
-                    this.params.Videoalignment
-                }"><source src="${
-                    this.params.VideoURL
-                }" type="video/mp4"></video>`;
-            }
-
-            this.params.posterTablet = `<div class="creative__poster" style="background-image:url(${
-                this.params.BackgroundImagemobile
-            })"></div>`;
-        }
-    }
-
-    onVideoEnded() {
-        if (this.video) {
-            this.video.onended = null;
-            this.video = null;
-        }
-    }
-
-    onScroll() {
-        const viewportHeight = getViewport().height;
-        const rect = this.adSlot.getBoundingClientRect();
-        this.inView = rect.top >= 0 && rect.bottom < viewportHeight;
-        if (!this.isUpdating) {
-            this.isUpdating = true;
-            fastdom.mutate(this.updateView, this);
-        }
-    }
-
-    updateView() {
-        this.isUpdating = false;
-        if (this.video) {
-            this.updateVideo();
-        }
-        this.updateAnimation();
-    }
-
-    updateVideo() {
-        if (this.video) {
-            if (this.inView) {
-                this.video.play();
-            } else {
-                this.video.pause();
-            }
-        }
-    }
-
-    updateAnimation() {
-        if (this.inView) {
-            this.playAnimation();
-        } else {
-            this.pauseAnimation();
-        }
-    }
-
-    playAnimation() {
-        if (this.layer2) {
-            this.layer2.forEach(l => {
-                l.classList.add('is-animating');
-            });
-        }
-    }
-
-    pauseAnimation() {
-        if (this.layer2) {
-            this.layer2.forEach(l => {
-                l.classList.remove('is-animating');
-            });
-        }
-    }
-
-    create() {
-        const fabricVideoTpl = template(fabricVideoStr);
-
-        return fastdom
-            .mutate(() => {
-                if (this.params.Trackingpixel) {
-                    addTrackingPixel(
-                        this.params.Trackingpixel + this.params.cacheBuster
-                    );
-                }
-                if (this.params.Researchpixel) {
-                    addTrackingPixel(
-                        this.params.Researchpixel + this.params.cacheBuster
-                    );
-                }
-
-                this.adSlot.insertAdjacentHTML(
-                    'beforeend',
-                    fabricVideoTpl({
-                        data: this.params,
-                    })
-                );
-
-                if (this.params.viewabilityTracker) {
-                    addViewabilityTracker(
-                        this.adSlot,
-                        this.params.id,
-                        this.params.viewabilityTracker
-                    );
-                }
-                if (this.adSlot) {
-                    this.adSlot.classList.add('ad-slot--fabric');
-                }
-
-                if (
-                    this.adSlot.parentNode &&
-                    this.adSlot.parentNode instanceof Element &&
-                    this.adSlot.parentNode.classList.contains(
-                        'top-banner-ad-container'
-                    )
-                ) {
-                    this.adSlot.parentNode.classList.add(
-                        'top-banner-ad-container--fabric'
-                    );
-                }
-
-                // The objectFitVideos should be removed after the DAP campaign is finished (09/12/2017).
-                // At this point, IE support for Fabric Video will only be available through DFP Native Styles.
-                objectFitVideos(this.adSlot.querySelector('video'));
-            })
-            .then(() => {
-                this.layer2 = qwery('.creative__layer2', this.adSlot);
-                const boundOnScroll = this.onScroll.bind(this);
-
-                addEventListener(window, 'scroll', boundOnScroll, {
-                    passive: true,
-                });
-                addEventListener(this.adSlot, 'animationend', () => {
-                    window.removeEventListener('scroll', boundOnScroll);
-                });
-
-                if (this.hasVideo) {
-                    this.video = this.adSlot.getElementsByTagName('video')[0];
-                    this.video.onended = this.onVideoEnded;
-                }
-
-                fastdom.measure(this.onScroll, this);
-
-                return true;
-            });
-    }
-}
-
-export { FabricVideo };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/frame.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/frame.js
deleted file mode 100644
index 1bedbe40f0f..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/frame.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/frame.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import template from 'lodash/template';
-import { Toggles } from 'common/modules/ui/toggles';
-import { addClassesAndTitle } from 'common/views/svg';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-import frameStr from 'raw-loader!commercial/views/creatives/frame.html';
-import labelStr from 'raw-loader!commercial/views/creatives/gustyle-label.html';
-import externalLink from 'svgs/icon/external-link.svg';
-import arrow from 'svgs/icon/arrow.svg';
-
-class Frame {
-    adSlot: HTMLElement;
-    params: Object;
-
-    constructor(adSlot: HTMLElement, params: Object) {
-        this.adSlot = adSlot;
-        this.params = params;
-    }
-
-    create() {
-        this.params.externalLinkIcon = addClassesAndTitle(externalLink.markup, [
-            'frame__external-link-icon',
-        ]);
-        this.params.target =
-            this.params.newWindow === 'yes' ? '_blank' : '_self';
-        this.params.id = `frame-${Math.floor(Math.random() * 10000).toString(
-            16
-        )}`;
-
-        const frameMarkup = template(frameStr)({
-            data: this.params,
-        });
-        const labelMarkup = template(labelStr)({
-            data: {
-                buttonTitle: 'Ad',
-                infoTitle: 'Advertising on the Guardian',
-                infoText: 'is created and paid for by third parties.',
-                infoLinkText:
-                    'Learn more about how advertising supports the Guardian.',
-                infoLinkUrl:
-                    'https://www.theguardian.com/advertising-on-the-guardian',
-                icon: addClassesAndTitle(arrow.markup, ['gu-comlabel__icon']),
-                dataAttr: this.adSlot.id,
-            },
-        });
-
-        return fastdom.mutate(() => {
-            this.adSlot.insertAdjacentHTML('beforeend', frameMarkup);
-
-            if (this.adSlot.lastElementChild) {
-                this.adSlot.lastElementChild.insertAdjacentHTML(
-                    'afterbegin',
-                    labelMarkup
-                );
-            }
-            this.adSlot.classList.add('ad-slot--frame');
-            if (this.params.trackingPixel) {
-                addTrackingPixel(
-                    this.params.trackingPixel + this.params.cacheBuster
-                );
-            }
-            if (this.params.researchPixel) {
-                addTrackingPixel(
-                    this.params.researchPixel + this.params.cacheBuster
-                );
-            }
-            if (this.params.viewabilityTracker) {
-                addViewabilityTracker(
-                    this.adSlot,
-                    this.params.id,
-                    this.params.viewabilityTracker
-                );
-            }
-            const toggles = new Toggles(this.adSlot);
-            toggles.init();
-            return true;
-        });
-    }
-}
-
-export { Frame };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/scrollable-mpu-v2.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/scrollable-mpu-v2.js
deleted file mode 100644
index 6138c6cd379..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/scrollable-mpu-v2.js
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/scrollable-mpu-v2.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import { isAndroid } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-import type { bonzo } from 'bonzo';
-
-/**
- * TODO: rather blunt instrument this, due to the fact *most* mobile devices don't have a fixed
- * background-attachment - need to make this more granular
- */
-const hasScrollEnabled = !isAndroid();
-
-/**
- * https://www.google.com/dfp/59666047#delivery/CreateCreativeTemplate/creativeTemplateId=10026567
- * https://www.google.com/dfp/59666047#delivery/CreateCreativeTemplate/creativeTemplateId=10037607
- */
-
-type ScrollableMpuParams = {
-    id: string,
-    backgroundImage: string,
-    backgroundImagePType: string,
-    layer1Image: string,
-    mobileImage: string,
-    destination: string,
-    trackingPixel: string,
-    researchPixel: string,
-    cacheBuster: string,
-    viewabilityTracker: string,
-    clickMacro: string,
-};
-
-const scrollableMpuTpl = (params: Object) => `
-<a id="${params.id}" class="creative--scrollable-mpu"
-    href="${params.clickMacro}${params.destination}"
-    target="_new">
-    <div class="creative--scrollable-mpu-inner">
-        ${params.backgroundImage}
-        <div class="creative--scrollable-mpu-static-image" style="background-image: url('${
-            params.layer1Image
-        }');"></div>
-    </div>
-</a>
-`;
-
-class ScrollableMpu {
-    adSlot: HTMLElement;
-    params: ScrollableMpuParams;
-    $scrollableImage: ?bonzo;
-    $scrollableMpu: ?bonzo;
-
-    constructor(adSlot: HTMLElement, params: Object) {
-        this.adSlot = adSlot;
-        this.params = params;
-        this.$scrollableImage = null;
-        this.$scrollableMpu = null;
-    }
-
-    updateBgFluid250() {
-        fastdom.mutate(() => {
-            if (this.$scrollableImage) {
-                this.$scrollableImage.addClass(
-                    'creative--scrollable-mpu-image-fixed'
-                );
-            }
-        });
-    }
-
-    updateBgParallax() {
-        const scrollAmount =
-            Math.ceil(this.adSlot.getBoundingClientRect().top * 0.3) + 20;
-        fastdom.mutate(() => {
-            if (this.$scrollableImage) {
-                this.$scrollableImage
-                    .addClass('creative--scrollable-mpu-image-parallax')
-                    .css('background-position', `50% ${scrollAmount}%`);
-            }
-        });
-    }
-
-    updateBg() {
-        if (this.$scrollableMpu) {
-            const position = -this.$scrollableMpu[0].getBoundingClientRect()
-                .top;
-            fastdom.mutate(() => {
-                if (this.$scrollableImage) {
-                    this.$scrollableImage.css(
-                        'background-position',
-                        `100% ${position}px`
-                    );
-                }
-            });
-        }
-    }
-
-    create(): Promise<?boolean> {
-        const templateOptions = {
-            id: `scrollable-mpu-${Math.floor(Math.random() * 10000).toString(
-                16
-            )}`,
-            clickMacro: this.params.clickMacro,
-            destination: this.params.destination,
-            layer1Image: hasScrollEnabled
-                ? this.params.layer1Image
-                : this.params.mobileImage,
-            backgroundImage:
-                hasScrollEnabled && this.params.backgroundImage
-                    ? `<div class="creative--scrollable-mpu-image" style="background-image: url(${
-                          this.params.backgroundImage
-                      });"></div>`
-                    : '',
-        };
-
-        this.$scrollableMpu = $.create(
-            scrollableMpuTpl(templateOptions)
-        ).appendTo(this.adSlot);
-
-        if (this.params.trackingPixel) {
-            addTrackingPixel(
-                this.params.trackingPixel + this.params.cacheBuster
-            );
-        }
-
-        if (this.params.researchPixel) {
-            addTrackingPixel(
-                this.params.researchPixel + this.params.cacheBuster
-            );
-        }
-
-        if (this.params.viewabilityTracker) {
-            addViewabilityTracker(
-                this.adSlot,
-                this.params.id,
-                this.params.viewabilityTracker
-            );
-        }
-
-        if (hasScrollEnabled) {
-            let updateFn;
-            if (
-                this.params.backgroundImagePType === 'fixed matching fluid250'
-            ) {
-                updateFn = () => this.updateBgFluid250();
-            } else if (this.params.backgroundImagePType === 'parallax') {
-                updateFn = () => this.updateBgParallax();
-            } else {
-                updateFn = () => this.updateBg();
-            }
-
-            this.$scrollableImage = $(
-                '.creative--scrollable-mpu-image',
-                this.adSlot
-            );
-
-            // update bg position
-            fastdom.measure(updateFn);
-
-            mediator.on('window:throttledScroll', updateFn);
-            // to be safe, also update on window resize
-            mediator.on('window:throttledResize', updateFn);
-        }
-
-        return Promise.resolve(true);
-    }
-}
-
-export { ScrollableMpu };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/scrollable-mpu-v2.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/scrollable-mpu-v2.spec.js
deleted file mode 100644
index ed118e459c5..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/creatives/scrollable-mpu-v2.spec.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/creatives/scrollable-mpu-v2.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'fastdom';
-import { ScrollableMpu } from 'commercial/modules/creatives/scrollable-mpu-v2';
-import { addTrackingPixel } from 'commercial/modules/creatives/add-tracking-pixel';
-import { addViewabilityTracker } from 'commercial/modules/creatives/add-viewability-tracker';
-
-jest.mock('commercial/modules/creatives/add-tracking-pixel', () => ({
-    addTrackingPixel: jest.fn(),
-}));
-
-jest.mock('commercial/modules/creatives/add-viewability-tracker', () => ({
-    addViewabilityTracker: jest.fn(),
-}));
-
-jest.mock('lib/detect', () => ({
-    isAndroid: jest.fn(),
-}));
-
-const testParams = {
-    id: '',
-    backgroundImage: '',
-    backgroundImagePType: '',
-    layer1Image: '',
-    mobileImage: '',
-    destination: '',
-    trackingPixel: '',
-    researchPixel: '',
-    cacheBuster: '',
-    viewabilityTracker: '',
-    clickMacro: '',
-};
-
-describe('Scrollable MPU', () => {
-    let adSlot: any;
-
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = '<div></div>';
-        }
-        adSlot = document.querySelector('div');
-    });
-
-    afterEach(() => {
-        if (document.body) {
-            document.body.innerHTML = '';
-        }
-        adSlot = null;
-    });
-
-    it('should exist', () => {
-        expect(ScrollableMpu).toBeDefined();
-    });
-
-    it('should add tracking pixels', () => {
-        const theParams = Object.assign({}, testParams, {
-            trackingPixel: 'trackingPixel',
-            researchPixel: 'researchPixel',
-            cacheBuster: '+-+-+-+',
-        });
-        new ScrollableMpu(adSlot, theParams).create();
-        expect(addTrackingPixel).toHaveBeenCalledTimes(2);
-        expect(addTrackingPixel).toHaveBeenCalledWith('researchPixel+-+-+-+');
-        expect(addTrackingPixel).toHaveBeenCalledWith('trackingPixel+-+-+-+');
-    });
-
-    it('should add viewability tracker', () => {
-        const theParams = Object.assign({}, testParams, {
-            id: 'id',
-            viewabilityTracker: 'viewabilityTracker',
-        });
-        new ScrollableMpu(adSlot, theParams).create();
-        expect(addViewabilityTracker).toHaveBeenCalledTimes(1);
-        expect(addViewabilityTracker).toHaveBeenCalledWith(
-            adSlot,
-            'id',
-            'viewabilityTracker'
-        );
-    });
-
-    it('should set up background for fluid250', done => {
-        const theParams = Object.assign({}, testParams, {
-            backgroundImagePType: 'fixed matching fluid250',
-            backgroundImage: 'image',
-        });
-        new ScrollableMpu(adSlot, theParams).create();
-        fastdom.measure(() => {
-            expect(
-                document.querySelector(
-                    '.creative--scrollable-mpu-image.creative--scrollable-mpu-image-fixed'
-                )
-            ).not.toBeNull();
-            done();
-        });
-    });
-
-    it('should set up background for parallax', done => {
-        const theParams = Object.assign({}, testParams, {
-            backgroundImagePType: 'parallax',
-            backgroundImage: 'image',
-        });
-        new ScrollableMpu(adSlot, theParams).create();
-        fastdom.measure(() => {
-            expect(
-                document.querySelector(
-                    '.creative--scrollable-mpu-image.creative--scrollable-mpu-image-parallax'
-                )
-            ).not.toBeNull();
-            done();
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/Advert.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/Advert.spec.js
deleted file mode 100644
index 102f87f4fb5..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/Advert.spec.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/dfp/Advert.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { _, Advert } from 'commercial/modules/dfp/Advert';
-
-const { filterClasses } = _;
-
-jest.mock('lib/raven');
-jest.mock('ophan/ng', () => null);
-
-describe('Filter classes', () => {
-    it('should return nil for empty class lists', () => {
-        const result = filterClasses([], []);
-        expect(result.length).toBe(0);
-    });
-
-    it('should return one class to be removed', () => {
-        const result = filterClasses(['old-class'], []);
-        expect(result.length).toBe(1);
-        expect(result).toContain('old-class');
-    });
-
-    it('should return nil classes to be removed', () => {
-        const result = filterClasses([], ['new-class']);
-        expect(result.length).toBe(0);
-    });
-
-    it('should remove two unused classes', () => {
-        const result = filterClasses(
-            ['old-class', 'old-class-2', 'old-class-3'],
-            ['old-class-2']
-        );
-        expect(result.length).toBe(2);
-        expect(result).toContain('old-class');
-        expect(result).toContain('old-class-3');
-    });
-});
-
-describe('Advert', () => {
-    beforeEach(() => {
-        const sizeMapping = {
-            sizes: [],
-            build: jest.fn(() => []),
-        };
-        window.googletag = {
-            pubads() {
-                return {};
-            },
-            sizeMapping() {
-                return sizeMapping;
-            },
-            defineSlot: jest.fn(() => window.googletag),
-            addService: jest.fn(() => window.googletag),
-            defineSizeMapping: jest.fn(() => window.googletag),
-            setTargeting: jest.fn(() => window.googletag),
-            setSafeFrameConfig: jest.fn(() => window.googletag),
-        };
-    });
-
-    it('should enable safeframe to expand in the top-above-nav slot', () => {
-        const slot = document.createElement('div');
-        slot.setAttribute('data-name', 'top-above-nav');
-        const ad = new Advert(slot);
-        expect(ad).toBeDefined();
-        expect(window.googletag.setSafeFrameConfig).toBeCalledWith({
-            allowOverlayExpansion: false,
-            allowPushExpansion: true,
-            sandbox: true,
-        });
-    });
-
-    it('should enable safeframe to expand in the inline1 slot', () => {
-        const slot = document.createElement('div');
-        slot.setAttribute('data-name', 'inline1');
-        const ad = new Advert(slot);
-        expect(ad).toBeDefined();
-        expect(window.googletag.setSafeFrameConfig).toBeCalledWith({
-            allowOverlayExpansion: false,
-            allowPushExpansion: true,
-            sandbox: true,
-        });
-    });
-
-    it('should not enable safeframe to expand in a slot that cannot take outstream ads', () => {
-        const slot = document.createElement('div');
-        slot.setAttribute('data-name', 'inline2');
-        const ad = new Advert(slot);
-        expect(ad).toBeDefined();
-        expect(window.googletag.setSafeFrameConfig).not.toBeCalled();
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/apply-creative-template.js b/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/apply-creative-template.js
deleted file mode 100644
index 3d73ad12bfe..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/apply-creative-template.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/dfp/apply-creative-template.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-import reportError from 'lib/report-error';
-
-import { Frame } from 'commercial/modules/creatives/frame';
-import { FabricV1 } from 'commercial/modules/creatives/fabric-v1';
-import { FabricExpandingV1 } from 'commercial/modules/creatives/fabric-expanding-v1';
-import { FabricExpandableVideoV2 } from 'commercial/modules/creatives/fabric-expandable-video-v2';
-import { FabricVideo } from 'commercial/modules/creatives/fabric-video';
-import { ScrollableMpu } from 'commercial/modules/creatives/scrollable-mpu-v2';
-
-const creativeLookup: Object = {
-    frame: Frame,
-    'fabric-v1': FabricV1,
-    'fabric-expanding-v1': FabricExpandingV1,
-    'fabric-expandable-video-v2': FabricExpandableVideoV2,
-    'fabric-video': FabricVideo,
-    'scrollable-mpu-v2': ScrollableMpu,
-};
-
-const renderCreativeTemplate = (
-    adSlot: Element,
-    iFrame: HTMLIFrameElement
-): Promise<boolean> => {
-    const fetchCreativeConfig = (): ?string => {
-        try {
-            const breakoutScript = iFrame.contentDocument.body
-                ? iFrame.contentDocument.body.querySelector(
-                      '.breakout__script[type="application/json"]'
-                  )
-                : null;
-            return breakoutScript ? breakoutScript.innerHTML : null;
-        } catch (err) {
-            return null;
-        }
-    };
-
-    const mergeViewabilityTracker = (json: Object): Object => {
-        const viewabilityTrackerDiv = iFrame.contentDocument.getElementById(
-            'viewabilityTracker'
-        );
-        const viewabilityTracker = viewabilityTrackerDiv
-            ? viewabilityTrackerDiv.childNodes[0].nodeValue.trim()
-            : null;
-
-        if (viewabilityTracker && json.params) {
-            json.params.viewabilityTracker = viewabilityTracker;
-        }
-
-        return json;
-    };
-
-    const renderCreative = (config: Object): Promise<boolean> =>
-        new Promise(resolve => {
-            const Creative = creativeLookup[config.name];
-            resolve(new Creative(adSlot, config.params, config.opts).create());
-        });
-
-    const hideIframe = (): Promise<any> =>
-        fastdom.mutate(() => {
-            iFrame.style.display = 'none';
-        });
-
-    const creativeConfig: ?string = fetchCreativeConfig();
-
-    if (creativeConfig) {
-        return hideIframe()
-            .then(() => JSON.parse(creativeConfig))
-            .then(mergeViewabilityTracker)
-            .then(renderCreative)
-            .catch(err => {
-                reportError(
-                    Error(`Failed to get creative JSON ${err}`),
-                    { feature: 'commercial' },
-                    false
-                );
-
-                return Promise.resolve(true);
-            });
-    }
-
-    return Promise.resolve(true);
-};
-
-const getAdvertIframe = (adSlot: Element): Promise<HTMLIFrameElement> =>
-    new Promise((resolve, reject) => {
-        // DFP will sometimes return empty iframes, denoted with a '__hidden__' parameter embedded in its ID.
-        // We need to be sure only to select the ad content frame.
-        const contentFrame: ?HTMLIFrameElement = (adSlot.querySelector(
-            'iframe:not([id*="__hidden__"])'
-        ): any);
-
-        if (!contentFrame) {
-            reject();
-        } else if (
-            // According to Flow, readyState exists on the Document, not the HTMLIFrameElement
-            // Is this different for old IE?
-            // $FlowFixMe
-            contentFrame.readyState &&
-            contentFrame.readyState !== 'complete'
-        ) {
-            // On IE, wait for the frame to load before interacting with it
-            const getIeIframe = e => {
-                const updatedIFrame = e.srcElement;
-
-                // $FlowFixMe
-                if (updatedIFrame && updatedIFrame.readyState === 'complete') {
-                    updatedIFrame.removeEventListener(
-                        'readystatechange',
-                        getIeIframe
-                    );
-                    resolve(contentFrame);
-                }
-            };
-
-            contentFrame.addEventListener('readystatechange', getIeIframe);
-        } else {
-            resolve(contentFrame);
-        }
-    });
-
-/**
- * Not all adverts render themselves - some just provide data for templates that we implement in commercial.js.
- * This looks for any such data and, if we find it, renders the appropriate component.
- */
-const applyCreativeTemplate = (adSlot: Element): Promise<boolean> =>
-    getAdvertIframe(adSlot).then((iframe: HTMLIFrameElement) =>
-        renderCreativeTemplate(adSlot, iframe)
-    );
-
-export { applyCreativeTemplate };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/define-slot.js b/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/define-slot.js
deleted file mode 100644
index 858b352d7e8..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/define-slot.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/dfp/define-slot.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { getUrlVars } from 'lib/url';
-import config from 'lib/config';
-import { breakpoints } from 'lib/detect';
-import uniqBy from 'lodash/uniqBy';
-import flatten from 'lodash/flatten';
-import once from 'lodash/once';
-import type { Slot } from 'commercial/types';
-
-const adUnit = once(() => {
-    const urlVars = getUrlVars();
-    return urlVars['ad-unit']
-        ? `/${config.get('page.dfpAccountId')}/${urlVars['ad-unit']}`
-        : config.get('page.adUnit');
-});
-
-type SizeMappingArray = Array<Object>;
-
-/**
- * Builds and assigns the correct size map for a slot based on the breakpoints
- * attached to the element via data attributes.
- *
- * A new size map is created for a given slot. We then loop through each breakpoint
- * defined in the config, checking if that breakpoint has been set on the slot.
- *
- * If it has been defined, then we add that size to the size mapping.
- *
- */
-const buildSizeMapping = (sizes: Object): SizeMappingArray => {
-    const mapping = window.googletag.sizeMapping();
-
-    breakpoints
-        .filter(_ => _.name in sizes)
-        .forEach(_ => {
-            mapping.addSize([_.width, 0], sizes[_.name]);
-        });
-
-    return mapping.build();
-};
-
-const getSizeOpts = (sizesByBreakpoint: Object): Object => {
-    const sizeMapping = buildSizeMapping(sizesByBreakpoint);
-    // as we're using sizeMapping, pull out all the ad sizes, as an array of arrays
-    const sizes = uniqBy(
-        flatten(sizeMapping.map(size => size[1])),
-        size => `${size[0]}-${size[1]}`
-    );
-
-    return {
-        sizeMapping,
-        sizes,
-    };
-};
-
-const adomikClassify = (): string => {
-    const rand = Math.random();
-
-    switch (true) {
-        case rand < 0.09:
-            return `ad_ex${Math.floor(100 * rand)}`;
-        case rand < 0.1:
-            return 'ad_bc';
-        default:
-            return 'ad_opt';
-    }
-};
-
-const isEligibleForOutstream = (slotTarget: ?string): boolean =>
-    typeof slotTarget === 'string' &&
-    (slotTarget === 'inline1' || slotTarget === 'top-above-nav');
-
-const allowSafeFrameToExpand = (slot: Slot): Slot => {
-    slot.setSafeFrameConfig({
-        allowOverlayExpansion: false,
-        allowPushExpansion: true,
-        sandbox: true,
-    });
-    return slot;
-};
-
-const defineSlot = (adSlotNode: Element, sizes: Object): Object => {
-    const slotTarget = adSlotNode.getAttribute('data-name');
-    const sizeOpts = getSizeOpts(sizes);
-    const id = adSlotNode.id;
-    let slot;
-    let slotReady = Promise.resolve();
-
-    if (adSlotNode.getAttribute('data-out-of-page')) {
-        slot = window.googletag
-            .defineOutOfPageSlot(adUnit(), id)
-            .defineSizeMapping(sizeOpts.sizeMapping);
-    } else {
-        slot = window.googletag
-            .defineSlot(adUnit(), sizeOpts.sizes, id)
-            .defineSizeMapping(sizeOpts.sizeMapping);
-        if (isEligibleForOutstream(slotTarget)) {
-            allowSafeFrameToExpand(slot);
-        }
-    }
-
-    /*
-        For each ad slot defined, we request information from IAS, based
-        on slot name, ad unit and sizes. We then add this targeting to the
-        slot prior to requesting it from DFP.
-
-        We race the request to IAS with a Timeout of 2 seconds. If the
-        timeout resolves before the request to IAS then the slot is defined
-        without the additional IAS data.
-
-        To see debugging output from IAS add the URL param `&iasdebug=true` to the page URL
-     */
-    if (config.get('switches.iasAdTargeting', false)) {
-        /* eslint-disable no-underscore-dangle */
-        // this should all have been instantiated by commercial/modules/third-party-tags/ias.js
-        window.__iasPET = window.__iasPET || {};
-        const iasPET = window.__iasPET;
-        /* eslint-disable no-underscore-enable */
-
-        iasPET.queue = iasPET.queue || [];
-        iasPET.pubId = '10249';
-
-        // IAS Optimization Targeting
-        const iasPETSlots = [
-            {
-                adSlotId: id,
-                size: slot
-                    .getSizes()
-                    .filter(size => size !== 'fluid')
-                    .map(size => [size.getWidth(), size.getHeight()]),
-                adUnitPath: adUnit(), // why do we have this method and not just slot.getAdUnitPath()?
-            },
-        ];
-
-        // this is stored so that the timeout can be cancelled in the event of IAS not timing out
-        let timeoutId;
-
-        // this is resolved by either the iasTimeout or iasDataCallback, defined below
-        let loadedResolve;
-        const iasDataPromise = new Promise(resolve => {
-            loadedResolve = resolve;
-        });
-
-        const iasDataCallback = targetingJSON => {
-            clearTimeout(timeoutId);
-
-            /*  There is a name-clash with the `fr` targeting returned by IAS
-                and the `fr` paramater we already use for frequency. Therefore
-                we apply the targeting to the slot ourselves and rename the IAS
-                fr parameter to `fra` (given that, here, it relates to fraud).
-            */
-            const targeting = JSON.parse(targetingJSON);
-
-            // brand safety is on a page level
-            Object.keys(targeting.brandSafety).forEach(key =>
-                window.googletag
-                    .pubads()
-                    .setTargeting(key, targeting.brandSafety[key])
-            );
-            if (targeting.fr) {
-                window.googletag.pubads().setTargeting('fra', targeting.fr);
-            }
-            if (targeting.custom && targeting.custom['ias-kw']) {
-                window.googletag
-                    .pubads()
-                    .setTargeting('ias-kw', targeting.custom['ias-kw']);
-            }
-
-            // viewability targeting is on a slot level
-            const ignoredKeys = ['pub'];
-            Object.keys(targeting.slots[id])
-                .filter(x => !ignoredKeys.includes(x))
-                .forEach(key =>
-                    slot.setTargeting(key, targeting.slots[id][key])
-                );
-
-            loadedResolve();
-        };
-
-        iasPET.queue.push({
-            adSlots: iasPETSlots,
-            dataHandler: iasDataCallback,
-        });
-
-        const iasTimeoutDuration = 1000;
-
-        const iasTimeout = () =>
-            new Promise(resolve => {
-                timeoutId = setTimeout(resolve, iasTimeoutDuration);
-            });
-
-        slotReady = Promise.race([iasTimeout(), iasDataPromise]);
-    }
-    const isBn = config.get('page.isbn');
-
-    if (slotTarget === 'im' && isBn) {
-        slot.setTargeting('isbn', isBn);
-    }
-
-    const fabricKeyValues = new Map([
-        ['top-above-nav', 'fabric1'],
-        ['merchandising-high', 'fabric2'],
-        ['merchandising', 'fabric3'],
-    ]);
-
-    if (fabricKeyValues.has(slotTarget)) {
-        slot.setTargeting('slot-fabric', fabricKeyValues.get(slotTarget));
-    }
-
-    if (config.get('switches.adomik')) {
-        slot.setTargeting('ad_group', adomikClassify());
-        slot.setTargeting('ad_h', new Date().getUTCHours().toString());
-    }
-
-    slot.addService(window.googletag.pubads()).setTargeting('slot', slotTarget);
-
-    return {
-        slot,
-        slotReady,
-    };
-};
-
-export { defineSlot };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/refresh-on-resize.js b/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/refresh-on-resize.js
deleted file mode 100644
index 189180367b4..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/dfp/refresh-on-resize.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/dfp/refresh-on-resize.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { hasCrossedBreakpoint, breakpoints } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { dfpEnv } from 'commercial/modules/dfp/dfp-env';
-import { breakpointNameToAttribute } from 'commercial/modules/dfp/breakpoint-name-to-attribute';
-import { refreshAdvert } from 'commercial/modules/dfp/load-advert';
-
-/* hasBreakpointChanged: ((string, string) -> undefined) -> undefined. Invokes the callback if a breakpoint has been crossed since last invocation */
-const hasBreakpointChanged = hasCrossedBreakpoint(true);
-
-/* breakpointNames: array<string>. List of breakpoint names */
-const breakpointNames = breakpoints.map(_ => _.name);
-
-// TODO: reset advert flags
-const refresh = (currentBreakpoint, previousBreakpoint) => {
-    const getBreakpointIndex = (breakpoint, slotBreakpoints) => {
-        const validBreakpointNames = breakpointNames
-            .slice(0, breakpointNames.indexOf(breakpoint) + 1)
-            .map(breakpointNameToAttribute);
-        return Math.max(
-            ...slotBreakpoints.map(_ => validBreakpointNames.lastIndexOf(_))
-        );
-    };
-
-    const shouldRefresh = advert => {
-        // get the slot breakpoints
-        const slotBreakpoints = Object.keys(advert.sizes);
-        // find the currently matching breakpoint
-        const currentSlotBreakpoint = getBreakpointIndex(
-            currentBreakpoint,
-            slotBreakpoints
-        );
-        // find the previously matching breakpoint
-        const previousSlotBreakpoint = getBreakpointIndex(
-            previousBreakpoint,
-            slotBreakpoints
-        );
-        return (
-            currentSlotBreakpoint !== -1 &&
-            currentSlotBreakpoint !== previousSlotBreakpoint
-        );
-    };
-
-    // only refresh if the slot needs to
-    const advertsToRefresh = dfpEnv.advertsToRefresh.filter(shouldRefresh);
-    advertsToRefresh.forEach(refreshAdvert);
-};
-
-const windowResize = () => {
-    // refresh on resize
-    hasBreakpointChanged(refresh);
-};
-
-export const refreshOnResize = () => {
-    mediator.on('window:throttledResize', windowResize);
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/appnexus.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/appnexus.spec.js
deleted file mode 100644
index 9c696daa4a7..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/appnexus.spec.js
+++ /dev/null
@@ -1,317 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/header-bidding/prebid/appnexus.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { isInUsOrCa as isInUsOrCa_,
-    isInAuOrNz as isInAuOrNz_} from 'common/modules/commercial/geo-utils';
-import {
-    _,
-    getAppNexusDirectBidParams,
-    getAppNexusServerSideBidParams,
-} from './appnexus';
-import {
-    getBreakpointKey as getBreakpointKey_
-} from '../utils';
-import type { HeaderBiddingSize } from '../types';
-
-jest.mock('common/modules/commercial/build-page-targeting', () => ({
-    buildAppNexusTargeting: () => 'someTestAppNexusTargeting',
-    buildAppNexusTargetingObject: () => ({
-        url: 'gu.com',
-        sens: 'f',
-        edition: 'UK',
-    }),
-    getPageTargeting: () => 'pageTargeting',
-}));
-
-jest.mock('../utils', () => {
-    // $FlowFixMe property requireActual is actually not missing Flow.
-    const original = jest.requireActual('../utils');
-    return {
-        ...original,
-        getBreakpointKey: jest.fn(),
-    };
-});
-
-jest.mock('common/modules/commercial/geo-utils', () => ({
-        isInAuOrNz: jest.fn(),
-        isInUsOrCa: jest.fn(),
-}));
-
-jest.mock('lib/cookies', () => ({
-    getCookie: jest.fn(),
-}));
-
-jest.mock('common/modules/experiments/ab', () => ({
-    isInVariantSynchronous: jest.fn(
-        (testId, variantId) => variantId === 'variant'
-    ),
-}));
-
-const {
-    getAppNexusPlacementId,
-    getAppNexusInvCode,
-    getAppNexusDirectPlacementId,
-} = _;
-
-const getBreakpointKey: any = getBreakpointKey_;
-const isInAuOrNz: any = isInAuOrNz_;
-const isInUsOrCa: any = isInUsOrCa_;
-
-/* eslint-disable guardian-frontend/no-direct-access-config */
-const resetConfig = () => {
-    config.set('switches.prebidAppnexus', true);
-    config.set('switches.prebidAppnexusInvcode', false);
-    config.set('ophan', { pageViewId: 'pvid' });
-    config.set('page.contentType', 'Article');
-    config.set('page.section', 'Magic');
-    config.set('page.sectionName', 'More Magic');
-    config.set('page.edition', 'UK');
-};
-
-describe('getAppNexusInvCode', () => {
-    beforeEach(() => {
-        resetConfig();
-    });
-
-    afterEach(() => {
-        jest.resetAllMocks();
-        resetConfig();
-    });
-
-    test('should return the magic strings for mobile breakpoints', () => {
-        getBreakpointKey.mockReturnValue('M');
-        const invCodes = [
-            [[300, 250]],
-            [[300, 600]],
-            [[970, 250]],
-            [[728, 90]],
-        ].map(getAppNexusInvCode);
-
-        expect(invCodes).toEqual([
-            'Mmagic300x250',
-            'Mmagic300x600',
-            'Mmagic970x250',
-            'Mmagic728x90',
-        ]);
-    });
-
-    test('should return the magic strings for other breakpoints', () => {
-        getBreakpointKey.mockReturnValueOnce('T');
-        getBreakpointKey.mockReturnValueOnce('D');
-        const invCodes = [
-            [[300, 250]],
-            [[300, 600]],
-            [[970, 250]],
-            [[728, 90]],
-        ].map(getAppNexusInvCode);
-        expect(invCodes).toEqual([
-            'Dmagic300x250',
-            'Dmagic300x600',
-            'Dmagic970x250',
-            'Dmagic728x90',
-        ]);
-    });
-
-    test('should use sectionName, replacing whitespace with hyphens, when section is an empty string', () => {
-        config.set('page.section', '');
-        expect(getAppNexusInvCode([[300, 250]])).toEqual('Dmore-magic300x250');
-    });
-});
-
-describe('getAppNexusDirectPlacementId', () => {
-    beforeEach(() => {
-        resetConfig();
-        window.OzoneLotameData = { some: 'lotamedata' };
-    });
-
-    afterEach(() => {
-        jest.resetAllMocks();
-        resetConfig();
-        window.OzoneLotameData = undefined;
-    });
-
-    const prebidSizes: Array<Array<HeaderBiddingSize>> = [
-        [[300, 250]],
-        [[300, 600]],
-        [[970, 250]],
-        [[728, 90]],
-        [[1, 2]],
-    ];
-
-    test('should return the expected values when in AU region and desktop device', () => {
-        isInAuOrNz.mockReturnValue(true);
-        expect(
-            prebidSizes.map(size => getAppNexusDirectPlacementId(size))
-        ).toEqual(['11016434', '11016434', '11016434', '11016434', '11016434']);
-    });
-
-    test('should return the expected values for ROW when on desktop device', () => {
-        isInAuOrNz.mockReturnValue(false);
-        getBreakpointKey.mockReturnValue('D');
-        expect(
-            prebidSizes.map(size => getAppNexusDirectPlacementId(size))
-        ).toEqual(['9251752', '9251752', '9926678', '9926678', '9251752']);
-    });
-
-    test('should return the expected values for ROW when on tablet device', () => {
-        getBreakpointKey.mockReturnValue('T');
-        isInAuOrNz.mockReturnValue(false);
-        expect(
-            prebidSizes.map(size => getAppNexusDirectPlacementId(size))
-        ).toEqual(['4371641', '9251752', '9251752', '4371640', '9251752']);
-    });
-});
-
-describe('getAppNexusPlacementId', () => {
-    beforeEach(() => {
-        resetConfig();
-        isInAuOrNz.mockReturnValue(false);
-        isInUsOrCa.mockReturnValue(false);
-        window.OzoneLotameData = { some: 'lotamedata' };
-    });
-
-    afterEach(() => {
-        jest.resetAllMocks();
-        resetConfig();
-        window.OzoneLotameData = undefined;
-    });
-
-    const generateTestIds = (): Array<string> => {
-        const prebidSizes: Array<Array<HeaderBiddingSize>> = [
-            [[300, 250]],
-            [[300, 600]],
-            [[970, 250]],
-            [[728, 90]],
-            [[1, 2]],
-        ];
-        return prebidSizes.map(getAppNexusPlacementId);
-    };
-
-    test('should return the expected values when on desktop device', () => {
-        getBreakpointKey.mockReturnValue('D');
-        expect(generateTestIds()).toEqual([
-            '13366606',
-            '13366606',
-            '13366615',
-            '13366615',
-            '13915593',
-        ]);
-    });
-
-    test('should return the expected values when on tablet device', () => {
-        getBreakpointKey.mockReturnValue('T');
-        expect(generateTestIds()).toEqual([
-            '13366913',
-            '13915593',
-            '13915593',
-            '13366916',
-            '13915593',
-        ]);
-    });
-
-    test('should return the expected values when on mobile device', () => {
-        getBreakpointKey.mockReturnValue('M');
-        expect(generateTestIds()).toEqual([
-            '13366904',
-            '13915593',
-            '13915593',
-            '13915593',
-            '13915593',
-        ]);
-    });
-
-    test('should return the default value if in US or AU regions', () => {
-        getBreakpointKey.mockReturnValue('D');
-        isInAuOrNz.mockReturnValueOnce(true);
-        isInUsOrCa.mockReturnValueOnce(true);
-        expect(getAppNexusPlacementId([[300, 250]])).toEqual('13915593');
-        expect(getAppNexusPlacementId([[970, 250]])).toEqual('13915593');
-        expect(getAppNexusPlacementId([[1, 2]])).toEqual('13915593');
-    });
-});
-
-describe('getAppNexusServerSideBidParams', () => {
-    beforeEach(() => {
-        resetConfig();
-    });
-
-    afterEach(() => {
-        jest.resetAllMocks();
-        resetConfig();
-        window.OzoneLotameData = undefined;
-    });
-
-    test('should include OzoneLotameData if available', () => {
-        getBreakpointKey.mockReturnValue('M');
-        window.OzoneLotameData = { some: 'lotamedata' };
-        expect(getAppNexusServerSideBidParams([[300, 250]])).toEqual({
-            keywords: { edition: 'UK', sens: 'f', url: 'gu.com' },
-            placementId: '13366904',
-            lotame: { some: 'lotamedata' },
-        });
-    });
-
-    test('should excude lotame if data is unavailable', () => {
-        getBreakpointKey.mockReturnValue('M');
-        expect(getAppNexusServerSideBidParams([[300, 250]])).toEqual({
-            keywords: { edition: 'UK', sens: 'f', url: 'gu.com' },
-            placementId: '13366904',
-        });
-    });
-});
-
-describe('getAppNexusDirectBidParams', () => {
-    beforeEach(() => {
-        resetConfig();
-    });
-
-    afterEach(() => {
-        jest.resetAllMocks();
-        resetConfig();
-    });
-
-    test('should include placementId for AU region when invCode switch is off', () => {
-        getBreakpointKey.mockReturnValue('M');
-        isInAuOrNz.mockReturnValue(true);
-        expect(getAppNexusDirectBidParams([[300, 250]])).toEqual({
-            keywords: { edition: 'UK', sens: 'f', url: 'gu.com' },
-            placementId: '11016434',
-        });
-    });
-
-    test('should exclude placementId for AU region when including member and invCode', () => {
-        config.set('switches.prebidAppnexusInvcode', true);
-        getBreakpointKey.mockReturnValue('M');
-        isInAuOrNz.mockReturnValueOnce(true);
-        expect(getAppNexusDirectBidParams([[300, 250]])).toEqual({
-            keywords: {
-                edition: 'UK',
-                sens: 'f',
-                url: 'gu.com',
-                invc: ['Mmagic300x250'],
-            },
-            member: '7012',
-            invCode: 'Mmagic300x250',
-        });
-    });
-
-    test('should include placementId and not include invCode if outside AU region', () => {
-        config.set('switches.prebidAppnexusInvcode', true);
-        getBreakpointKey.mockReturnValue('M');
-        expect(getAppNexusDirectBidParams([[300, 250]])).toEqual({
-            keywords: { edition: 'UK', sens: 'f', url: 'gu.com' },
-            placementId: '4298191',
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/bid-config.js b/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/bid-config.js
deleted file mode 100644
index 6cedd71de8f..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/bid-config.js
+++ /dev/null
@@ -1,524 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/header-bidding/prebid/bid-config.js
- * to .ts, then delete it.
- */
-
-// @flow strict
-
-import config from 'lib/config';
-import { pbTestNameMap } from 'lib/url';
-import isEmpty from 'lodash/isEmpty';
-import {
-    buildAppNexusTargeting,
-    buildAppNexusTargetingObject,
-    getPageTargeting,
-} from 'common/modules/commercial/build-page-targeting';
-import { commercialPrebidSafeframe } from 'common/modules/experiments/tests/commercial-prebid-safeframe';
-import { isInVariantSynchronous } from 'common/modules/experiments/ab';
-import { isInUk,
-    isInUsOrCa,
-    isInAuOrNz,
-    isInRow } from 'common/modules/commercial/geo-utils';
-import { getLotameData } from '@guardian/commercial';
-import type {
-    PrebidAdYouLikeParams,
-    PrebidAppNexusParams,
-    PrebidBid,
-    PrebidBidder,
-    PrebidImproveParams,
-    PrebidIndexExchangeParams,
-    PrebidOpenXParams,
-    PrebidOzoneParams,
-    PrebidPubmaticParams,
-    HeaderBiddingSize,
-    PrebidSonobiParams,
-    PrebidTripleLiftParams,
-    PrebidTrustXParams,
-    PrebidXaxisParams,
-} from '../types';
-import {
-    containsBillboard,
-    containsDmpu,
-    containsLeaderboard,
-    containsLeaderboardOrBillboard,
-    containsMpu,
-    containsMpuOrDmpu,
-    containsMobileSticky,
-    getBreakpointKey,
-    shouldIncludeAdYouLike,
-    shouldIncludeAppNexus,
-    shouldIncludeImproveDigital,
-    shouldIncludeOpenx,
-    shouldIncludeSonobi,
-    shouldIncludeTrustX,
-    shouldIncludeTripleLift,
-    shouldIncludeXaxis,
-    shouldUseOzoneAdaptor,
-    stripDfpAdPrefixFrom,
-    stripMobileSuffix,
-    stripTrailingNumbersAbove1,
-} from '../utils';
-import { getAppNexusDirectBidParams } from './appnexus';
-
-// The below line is needed for page skins to show
-getPageTargeting();
-
-const isInSafeframeTestVariant = (): boolean =>
-    isInVariantSynchronous(commercialPrebidSafeframe, 'variant');
-
-const isArticle = config.get('page.contentType') === 'Article';
-
-const isDesktopAndArticle = getBreakpointKey() === 'D' && isArticle;
-
-const getTrustXAdUnitId = (
-    slotId: string,
-    isDesktopArticle: boolean
-): string => {
-    switch (stripMobileSuffix(slotId)) {
-        case 'dfp-ad--inline1':
-            return '2960';
-        case 'dfp-ad--inline2':
-            if (isDesktopArticle) return '3826';
-            return '3827';
-        case 'dfp-ad--inline3':
-            if (isDesktopArticle) return '3828';
-            return '3829';
-        case 'dfp-ad--inline4':
-            if (isDesktopArticle) return '3830';
-            return '3831';
-        case 'dfp-ad--inline5':
-            if (isDesktopArticle) return '3832';
-            return '3833';
-        case 'dfp-ad--inline6':
-            if (isDesktopArticle) return '3834';
-            return '3835';
-        case 'dfp-ad--inline7':
-            if (isDesktopArticle) return '3836';
-            return '3837';
-        case 'dfp-ad--inline8':
-            if (isDesktopArticle) return '3838';
-            return '3839';
-        case 'dfp-ad--inline9':
-            if (isDesktopArticle) return '3840';
-            return '3841';
-        case 'dfp-ad--mostpop':
-            return '2961';
-        case 'dfp-ad--right':
-            return '2962';
-        case 'dfp-ad--top-above-nav':
-            return '2963';
-        case 'dfp-ad--comments':
-            return '3840';
-        case 'dfp-ad--mobile-sticky':
-            return '8519';
-        default:
-            // for inline10 and onwards just use same IDs as inline9
-            if (slotId.startsWith('dfp-ad--inline')) {
-                if (isDesktopArticle) return '3840';
-                return '3841';
-            }
-            // eslint-disable-next-line no-console
-            console.log(
-                `PREBID: Failed to get TrustX ad unit for slot ${slotId}.`
-            );
-            return '';
-    }
-};
-
-const getIndexSiteId = (): string => {
-    if (isInSafeframeTestVariant()) {
-        switch (getBreakpointKey()) {
-            case 'D':
-                return '287246';
-            case 'T':
-                return '287247';
-            case 'M':
-                return '287248';
-            default:
-                return '-1';
-        }
-    } else {
-        const site = config
-            .get('page.pbIndexSites', [])
-            .find(s => s.bp === getBreakpointKey());
-        return site && site.id ? site.id.toString() : '';
-    }
-};
-
-const getImprovePlacementId = (sizes: HeaderBiddingSize[]): number => {
-    if (isInSafeframeTestVariant()) {
-        switch (getBreakpointKey()) {
-            case 'D':
-                if (containsDmpu(sizes)) {
-                    return 1116408;
-                }
-                if (containsMpu(sizes)) {
-                    return 1116407;
-                }
-                if (containsLeaderboardOrBillboard(sizes)) {
-                    return 1116409;
-                }
-                return -1;
-            case 'T':
-                if (containsMpu(sizes)) {
-                    return 1116410;
-                }
-                if (containsLeaderboard(sizes)) {
-                    return 1116411;
-                }
-                return -1;
-            case 'M':
-                return 1116412;
-            default:
-                return -1;
-        }
-    }
-    if (isInUk()) {
-        switch (getBreakpointKey()) {
-            case 'D':
-                if (containsMpuOrDmpu(sizes)) {
-                    return 1116396;
-                }
-                if (containsLeaderboardOrBillboard(sizes)) {
-                    return 1116397;
-                }
-                return -1;
-            case 'M':
-                if (containsMpuOrDmpu(sizes)) {
-                    return 1116400;
-                }
-                return -1;
-            case 'T':
-                if (containsMpuOrDmpu(sizes)) {
-                    return 1116398;
-                }
-                if (containsLeaderboardOrBillboard(sizes)) {
-                    return 1116399;
-                }
-                return -1;
-            default:
-                return -1;
-        }
-    }
-    if (isInRow()) {
-        switch (getBreakpointKey()) {
-            case 'D':
-                if (containsMpuOrDmpu(sizes)) {
-                    return 1116420;
-                }
-                if (containsLeaderboardOrBillboard(sizes)) {
-                    return 1116421;
-                }
-                return -1;
-            case 'M':
-                if (containsMpuOrDmpu(sizes)) {
-                    return 1116424;
-                }
-                return -1;
-            case 'T':
-                if (containsMpuOrDmpu(sizes)) {
-                    return 1116422;
-                }
-                if (containsLeaderboardOrBillboard(sizes)) {
-                    return 1116423;
-                }
-                return -1;
-            default:
-                return -1;
-        }
-    }
-    return -1;
-};
-
-// Improve has to have single size as parameter if slot doesn't accept multiple sizes,
-// because it uses same placement ID for multiple slot sizes and has no other size information
-const getImproveSizeParam = (slotId: string): { w?: number, h?: number } => {
-    const key = stripTrailingNumbersAbove1(stripMobileSuffix(slotId));
-    return key &&
-        (key.endsWith('mostpop') ||
-            key.endsWith('comments') ||
-            key.endsWith('inline1') ||
-            (key.endsWith('inline') && !isDesktopAndArticle))
-        ? { w: 300, h: 250 }
-        : {};
-};
-
-const getXaxisPlacementId = (sizes: HeaderBiddingSize[]): number => {
-    if (containsDmpu(sizes)) return 13663297;
-    if (containsMpu(sizes)) return 13663304;
-    if (containsBillboard(sizes)) return 13663284;
-    return 13663304;
-};
-
-const getTripleLiftInventoryCode = (
-    slotId: string,
-    sizes: HeaderBiddingSize[]
-): string => {
-    if (containsLeaderboard(sizes))
-        return 'theguardian_topbanner_728x90_prebid';
-
-    if (containsMpu(sizes))
-        return isArticle
-            ? 'theguardian_article_300x250_prebid'
-            : 'theguardian_sectionfront_300x250_prebid';
-
-    if (containsMobileSticky(sizes)) return 'theguardian_320x50_HDX';
-
-    console.log(`PREBID: Failed to get TripleLift ad unit for slot ${slotId}.`);
-    return '';
-};
-
-const getOzoneTargeting = (): { } => {
-    const lotameData = getLotameData();
-    const appNexusTargetingObject = buildAppNexusTargetingObject(getPageTargeting());
-    if (typeof lotameData !== 'undefined') {
-        return {
-            ...appNexusTargetingObject,
-            'lotameSegs': lotameData.ozoneLotameData,
-            'lotamePid': lotameData.ozoneLotameProfileId,
-        }
-    }
-    return appNexusTargetingObject;
-};
-
-// Is pbtest being used?
-const isPbTestOn = (): boolean => !isEmpty(pbTestNameMap());
-// Helper for conditions
-const inPbTestOr = (liveClause: boolean): boolean => isPbTestOn() || liveClause;
-
-/* Bidders */
-const appNexusBidder: PrebidBidder = {
-    name: 'and',
-    switchName: 'prebidAppnexus',
-    bidParams: (
-        slotId: string,
-        sizes: HeaderBiddingSize[]
-    ): PrebidAppNexusParams => getAppNexusDirectBidParams(sizes),
-};
-
-const openxClientSideBidder: PrebidBidder = {
-    name: 'oxd',
-    switchName: 'prebidOpenx',
-    bidParams: (): PrebidOpenXParams => {
-        if (isInUsOrCa()) {
-            return {
-                delDomain: 'guardian-us-d.openx.net',
-                unit: '540279544',
-                customParams: buildAppNexusTargetingObject(getPageTargeting()),
-            };
-        }
-        if (isInAuOrNz()) {
-            return {
-                delDomain: 'guardian-aus-d.openx.net',
-                unit: '540279542',
-                customParams: buildAppNexusTargetingObject(getPageTargeting()),
-            };
-        }
-        // UK and ROW
-        return {
-            delDomain: 'guardian-d.openx.net',
-            unit: '540279541',
-            customParams: buildAppNexusTargetingObject(getPageTargeting()),
-        };
-    },
-};
-
-const ozoneClientSideBidder: PrebidBidder = {
-    name: 'ozone',
-    switchName: 'prebidOzone',
-    bidParams: (): PrebidOzoneParams =>
-        Object.assign(
-            {},
-            (() => ({
-                publisherId: 'OZONEGMG0001',
-                siteId: '4204204209',
-                placementId: '0420420500',
-                customData: [
-                    {
-                        settings: {},
-                        targeting: getOzoneTargeting(),
-                    },
-                ],
-                ozoneData: {}, // TODO: confirm if we need to send any
-            }))(),
-        ),
-};
-
-const sonobiBidder: PrebidBidder = {
-    name: 'sonobi',
-    switchName: 'prebidSonobi',
-    bidParams: (slotId: string): PrebidSonobiParams =>
-        Object.assign(
-            {},
-            {
-                ad_unit: config.get('page.adUnit'),
-                dom_id: slotId,
-                appNexusTargeting: buildAppNexusTargeting(getPageTargeting()),
-                pageViewId: config.get('ophan.pageViewId'),
-            },
-            isInSafeframeTestVariant() ? { render: 'safeframe' } : {}
-        ),
-};
-
-const getPubmaticPublisherId = (): string => {
-    if (isInUsOrCa()) {
-        return '157206';
-    }
-    if (isInAuOrNz()) {
-        return '157203';
-    }
-    return '157207';
-};
-
-const pubmaticBidder: PrebidBidder = {
-    name: 'pubmatic',
-    switchName: 'prebidPubmatic',
-    bidParams: (slotId: string): PrebidPubmaticParams =>
-        Object.assign(
-            {},
-            {
-                publisherId: getPubmaticPublisherId(),
-                adSlot: stripDfpAdPrefixFrom(slotId),
-            }
-        ),
-};
-
-const trustXBidder: PrebidBidder = {
-    name: 'trustx',
-    switchName: 'prebidTrustx',
-    bidParams: (slotId: string): PrebidTrustXParams => ({
-        uid: getTrustXAdUnitId(slotId, isDesktopAndArticle),
-    }),
-};
-
-const tripleLiftBidder: PrebidBidder = {
-    name: 'triplelift',
-    switchName: 'prebidTriplelift',
-    bidParams: (
-        slotId: string,
-        sizes: HeaderBiddingSize[]
-    ): PrebidTripleLiftParams => ({
-        inventoryCode: getTripleLiftInventoryCode(slotId, sizes),
-    }),
-};
-
-const improveDigitalBidder: PrebidBidder = {
-    name: 'improvedigital',
-    switchName: 'prebidImproveDigital',
-    bidParams: (
-        slotId: string,
-        sizes: HeaderBiddingSize[]
-    ): PrebidImproveParams => ({
-        placementId: getImprovePlacementId(sizes),
-        size: getImproveSizeParam(slotId),
-    }),
-};
-
-const xaxisBidder: PrebidBidder = {
-    name: 'xhb',
-    switchName: 'prebidXaxis',
-    bidParams: (
-        slotId: string,
-        sizes: HeaderBiddingSize[]
-    ): PrebidXaxisParams => ({
-        placementId: getXaxisPlacementId(sizes),
-    }),
-};
-
-const adYouLikeBidder: PrebidBidder = {
-    name: 'adyoulike',
-    switchName: 'prebidAdYouLike',
-    bidParams: (): PrebidAdYouLikeParams => {
-        if (isInUk()) {
-            return {
-                placement: '2b4d757e0ec349583ce704699f1467dd',
-            };
-        }
-        if (isInUsOrCa()) {
-            return {
-                placement: '7fdf0cd05e1d4bf39a2d3df9c61b3495',
-            };
-        }
-        if (isInAuOrNz()) {
-            return {
-                placement: '5cf05e1705a2d57ba5d51e03f2af9208',
-            };
-        }
-        // ROW
-        return {
-            placement: 'c1853ee8bfe0d4e935cbf2db9bb76a8b',
-        };
-    },
-};
-
-// There's an IX bidder for every size that the slot can take
-const indexExchangeBidders: (
-    HeaderBiddingSize[]
-) => PrebidBidder[] = slotSizes => {
-    const indexSiteId = getIndexSiteId();
-    return slotSizes.map(size => ({
-        name: 'ix',
-        switchName: 'prebidIndexExchange',
-        bidParams: (): PrebidIndexExchangeParams => ({
-            siteId: indexSiteId,
-            size,
-        }),
-    }));
-};
-
-const biddersBeingTested: (PrebidBidder[]) => PrebidBidder[] = allBidders =>
-    allBidders.filter(bidder => pbTestNameMap()[bidder.name]);
-
-const biddersSwitchedOn: (PrebidBidder[]) => PrebidBidder[] = allBidders => {
-    const isSwitchedOn: PrebidBidder => boolean = bidder =>
-        config.get(`switches.${bidder.switchName}`);
-    return allBidders.filter(bidder => isSwitchedOn(bidder));
-};
-
-const currentBidders: (HeaderBiddingSize[]) => PrebidBidder[] = slotSizes => {
-    const otherBidders: PrebidBidder[] = [
-        ...(inPbTestOr(shouldIncludeSonobi()) ? [sonobiBidder] : []),
-        ...(inPbTestOr(shouldIncludeTrustX()) ? [trustXBidder] : []),
-        ...(inPbTestOr(shouldIncludeTripleLift()) ? [tripleLiftBidder] : []),
-        ...(inPbTestOr(shouldIncludeAppNexus()) ? [appNexusBidder] : []),
-        ...(inPbTestOr(shouldIncludeImproveDigital())
-            ? [improveDigitalBidder]
-            : []),
-        ...(inPbTestOr(shouldIncludeXaxis()) ? [xaxisBidder] : []),
-        pubmaticBidder,
-        ...(inPbTestOr(shouldIncludeAdYouLike(slotSizes))
-            ? [adYouLikeBidder]
-            : []),
-        ...(inPbTestOr(shouldUseOzoneAdaptor()) ? [ozoneClientSideBidder] : []),
-        ...(shouldIncludeOpenx() ? [openxClientSideBidder] : []),
-    ];
-
-    const allBidders = indexExchangeBidders(slotSizes)
-        .concat(otherBidders);
-    return isPbTestOn()
-        ? biddersBeingTested(allBidders)
-        : biddersSwitchedOn(allBidders);
-};
-
-export const bids: (string, HeaderBiddingSize[]) => PrebidBid[] = (
-    slotId,
-    slotSizes
-) =>
-    currentBidders(slotSizes).map((bidder: PrebidBidder) => ({
-        bidder: bidder.name,
-        params: bidder.bidParams(slotId, slotSizes),
-    }));
-
-export const _ = {
-    getIndexSiteId,
-    getImprovePlacementId,
-    getTrustXAdUnitId,
-    indexExchangeBidders,
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/prebid.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/prebid.spec.js
deleted file mode 100644
index 4be70cd0a23..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/prebid.spec.js
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/header-bidding/prebid/prebid.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import prebid from 'commercial/modules/header-bidding/prebid/prebid';
-import 'prebid.js/build/dist/prebid';
-import { getAdvertById as getAdvertById_ } from 'commercial/modules/dfp/get-advert-by-id';
-
-const getAdvertById: any = getAdvertById_;
-
-jest.mock('lib/raven');
-
-jest.mock('commercial/modules/dfp/Advert', () =>
-    jest.fn().mockImplementation(() => ({ advert: jest.fn() }))
-);
-
-jest.mock('commercial/modules/header-bidding/prebid/bid-config', () => ({
-    bids: jest.fn(),
-}));
-
-jest.mock('commercial/modules/dfp/get-advert-by-id', () => ({
-    getAdvertById: jest.fn(),
-}));
-
-jest.mock('common/modules/experiments/ab', () => ({
-    isInVariantSynchronous: jest.fn(
-        (testId, variantId) => variantId === 'variant'
-    ),
-}));
-
-describe('initialise', () => {
-    beforeEach(() => {
-        config.set('switches.consentManagement', true);
-        config.set('switches.prebidUserSync', true);
-        config.set('switches.prebidAppNexus', true);
-        config.set('switches.prebidSonobi', true);
-        config.set('switches.prebidXaxis', true);
-        window.pbjs.setConfig({ consentManagement: {} });
-        getAdvertById.mockReset();
-    });
-
-    test('should generate correct Prebid config when all switches on', () => {
-        prebid.initialise(window);
-        expect(window.pbjs.getConfig()).toEqual({
-            _bidderSequence: 'random',
-            _bidderTimeout: 1500,
-            _customPriceBucket: {
-                buckets: [
-                    {
-                        increment: 0.01,
-                        max: 100,
-                    },
-                    {
-                        increment: 1,
-                        max: 500,
-                    },
-                ],
-            },
-            _debug: false,
-            _deviceAccess: true,
-            _disableAjaxTimeout: false,
-            _mediaTypePriceGranularity: {},
-            _priceGranularity: 'custom',
-            _publisherDomain: 'http://testurl.theguardian.com',
-            _sendAllBids: true,
-            _timeoutBuffer: 400,
-            _useBidCache: false,
-            bidderSequence: 'random',
-            bidderTimeout: 1500,
-            consentManagement: {
-                gdpr: {
-                    allowAuctionWithoutConsent: true,
-                    cmpApi: 'iab',
-                    timeout: 200,
-                },
-                usp: {
-                    timeout: 1500,
-                },
-            },
-            customPriceBucket: {
-                buckets: [
-                    {
-                        increment: 0.01,
-                        max: 100,
-                    },
-                    {
-                        increment: 1,
-                        max: 500,
-                    },
-                ],
-            },
-            debug: false,
-            deviceAccess: true,
-            disableAjaxTimeout: false,
-            enableSendAllBids: true,
-            mediaTypePriceGranularity: {},
-            priceGranularity: 'custom',
-            publisherDomain: 'http://testurl.theguardian.com',
-            s2sConfig: {
-                adapter: 'prebidServer',
-                adapterOptions: {},
-                enabled: false,
-                maxBids: 1,
-                syncUrlModifier: {},
-                timeout: 1000,
-            },
-            timeoutBuffer: 400,
-            useBidCache: false,
-            userSync: {
-                syncDelay: 3000,
-                syncEnabled: true,
-                syncsPerBidder: 0,
-                auctionDelay: 0,
-                filterSettings: {
-                    all: {
-                        bidders: '*',
-                        filter: 'include',
-                    },
-                },
-            },
-        });
-    });
-
-    test('should generate correct Prebid config when consent management off', () => {
-        config.set('switches.consentManagement', false);
-        prebid.initialise(window);
-        expect(window.pbjs.getConfig().consentManagement).toEqual({});
-    });
-
-    test('should generate correct bidder settings', () => {
-        prebid.initialise(window);
-        expect(window.pbjs.bidderSettings.xhb).toHaveProperty(
-            'adserverTargeting'
-        );
-    });
-
-    test('should generate correct bidder settings when Xaxis off', () => {
-        config.set('switches.prebidXaxis', false);
-        prebid.initialise(window);
-        expect(window.pbjs.bidderSettings).toEqual({});
-    });
-
-    test('should generate correct Prebid config when user-sync off', () => {
-        config.set('switches.prebidUserSync', false);
-        prebid.initialise(window);
-        expect(window.pbjs.getConfig().userSync.syncEnabled).toEqual(false);
-    });
-
-    test('should respond to prebid.js bidWon event', () => {
-        let bidWonEventName;
-        let bidWonEventHandler: ?() => void;
-        const dummyAdvert = {
-            size: [200, 200],
-            hasPrebidSize: false,
-        };
-
-        window.pbjs.onEvent = jest.fn((eventName, eventHandler) => {
-            bidWonEventName = eventName;
-            bidWonEventHandler = eventHandler;
-        });
-
-        getAdvertById.mockImplementation(() => dummyAdvert);
-
-        prebid.initialise(window);
-
-        expect(bidWonEventName).toBe('bidWon');
-        expect(window.pbjs.onEvent).toHaveBeenCalledTimes(1);
-
-        if (bidWonEventHandler) {
-            bidWonEventHandler({
-                height: 100,
-                width: 100,
-                adUnitCode: 'foo',
-            });
-        }
-
-        expect(getAdvertById).toHaveBeenCalledTimes(1);
-        expect(getAdvertById).toHaveBeenCalledWith('foo');
-        expect(dummyAdvert.size).toMatchObject([100, 100]);
-        expect(dummyAdvert.hasPrebidSize).toBe(true);
-    });
-
-    test('should not respond to prebid.js bidWon event if height missing from prebid data', () => {
-        let bidWonEventName;
-        let bidWonEventHandler: ?() => void;
-
-        window.pbjs.onEvent = jest.fn((eventName, eventHandler) => {
-            bidWonEventName = eventName;
-            bidWonEventHandler = eventHandler;
-        });
-
-        prebid.initialise(window);
-
-        expect(bidWonEventName).toBe('bidWon');
-        expect(window.pbjs.onEvent).toHaveBeenCalledTimes(1);
-
-        if (bidWonEventHandler) {
-            bidWonEventHandler({
-                width: 100,
-                adUnitCode: 'foo',
-            });
-        }
-
-        expect(getAdvertById).not.toHaveBeenCalled();
-    });
-
-    test('should not respond to prebid.js bidWon event if width missing from prebid data', () => {
-        let bidWonEventName;
-        let bidWonEventHandler: ?() => void;
-
-        window.pbjs.onEvent = jest.fn((eventName, eventHandler) => {
-            bidWonEventName = eventName;
-            bidWonEventHandler = eventHandler;
-        });
-
-        prebid.initialise(window);
-
-        expect(bidWonEventName).toBe('bidWon');
-        expect(window.pbjs.onEvent).toHaveBeenCalledTimes(1);
-
-        if (bidWonEventHandler) {
-            bidWonEventHandler({
-                height: 100,
-                adUnitCode: 'foo',
-            });
-        }
-
-        expect(getAdvertById).not.toHaveBeenCalled();
-    });
-
-    test('should not respond to prebid.js bidWon event if adUnitCode missing from prebid data', () => {
-        let bidWonEventName;
-        let bidWonEventHandler: ?() => void;
-
-        window.pbjs.onEvent = jest.fn((eventName, eventHandler) => {
-            bidWonEventName = eventName;
-            bidWonEventHandler = eventHandler;
-        });
-
-        prebid.initialise(window);
-
-        expect(bidWonEventName).toBe('bidWon');
-        expect(window.pbjs.onEvent).toHaveBeenCalledTimes(1);
-
-        if (bidWonEventHandler) {
-            bidWonEventHandler({
-                height: 100,
-                width: 100,
-            });
-        }
-
-        expect(getAdvertById).not.toHaveBeenCalled();
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/price-config.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/price-config.spec.js
deleted file mode 100644
index e6e1b17bbdd..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/prebid/price-config.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/header-bidding/prebid/price-config.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { priceGranularity } from './price-config';
-
-describe('priceGranularity', () => {
-    test('should have correct number of buckets', () => {
-        expect(priceGranularity.buckets.length).toBe(2);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/types.js b/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/types.js
deleted file mode 100644
index d44fe62c5f7..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/header-bidding/types.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/header-bidding/types.js
- * to .ts, then delete it.
- */
-
-// @flow strict
-
-export type HeaderBiddingSize = [number, number];
-
-export type HeaderBiddingSlot = {
-    key:
-        | 'top-above-nav'
-        | 'right'
-        | 'inline1'
-        | 'inline'
-        | 'mostpop'
-        | 'comments'
-        | 'mobile-sticky'
-        | 'banner',
-    sizes: HeaderBiddingSize[],
-};
-
-export type PrebidOzoneParams = {
-    publisherId: string,
-    siteId: string,
-    placementId: string,
-    customData?: [{ [string]: mixed }],
-    ozoneData?: { [string]: mixed },
-};
-
-export type PrebidSonobiParams = {
-    ad_unit: string,
-    dom_id: string,
-    appNexusTargeting: string,
-    pageViewId: string,
-    render?: string,
-};
-
-export type PrebidPubmaticParams = {
-    publisherId: string,
-    adSlot: string,
-};
-
-export type PrebidIndexExchangeParams = {
-    siteId: string,
-    size: HeaderBiddingSize,
-};
-
-export type PrebidTrustXParams = {
-    uid: string,
-};
-
-export type PrebidTripleLiftParams = {
-    inventoryCode: string,
-};
-
-export type PrebidImproveParams = {
-    placementId: number,
-    size: {
-        w?: number,
-        h?: number,
-    },
-};
-
-export type PrebidXaxisParams = {
-    placementId: number,
-};
-
-export type PrebidAppNexusParams = {
-    invCode?: string,
-    member?: string,
-    placementId?: string,
-    keywords: {},
-    lotame?: {},
-};
-
-export type PrebidOpenXParams = {
-    delDomain: string,
-    unit: string,
-    customParams: {},
-    lotame?: {},
-};
-
-export type PrebidAdYouLikeParams = {
-    placement: string,
-};
-
-export type PrebidBidder = {
-    name: string,
-    switchName: string,
-    bidParams: (
-        slotId: string,
-        sizes: HeaderBiddingSize[]
-    ) =>
-        | PrebidSonobiParams
-        | PrebidIndexExchangeParams
-        | PrebidTrustXParams
-        | PrebidTripleLiftParams
-        | PrebidImproveParams
-        | PrebidXaxisParams
-        | PrebidAppNexusParams
-        | PrebidOpenXParams
-        | PrebidOzoneParams
-        | PrebidAdYouLikeParams
-        | PrebidPubmaticParams,
-};
-
-export type PrebidBid = {
-    bidder: string,
-    params:
-        | PrebidSonobiParams
-        | PrebidIndexExchangeParams
-        | PrebidTrustXParams
-        | PrebidTripleLiftParams
-        | PrebidImproveParams
-        | PrebidXaxisParams
-        | PrebidAppNexusParams
-        | PrebidOpenXParams
-        | PrebidOzoneParams
-        | PrebidAdYouLikeParams
-        | PrebidPubmaticParams,
-};
-
-export type PrebidMediaTypes = {
-    banner: {
-        sizes: HeaderBiddingSize[],
-    },
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery-html.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery-html.js
deleted file mode 100644
index e90d2842404..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery-html.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/gallery-html.js
- * to .ts, then delete it.
- */
-
-// @flow
-export const galleryHtml = `
-<div>
-    <div class="js-hosted-gallery-container">
-        <div class="js-hosted-gallery-frame">
-            <div class="js-hosted-gallery-images">
-                <div class="js-hosted-gallery-image">
-                    <img src="" alt="">
-                    <div class="js-hosted-gallery-meta">
-                        <div class="content__main-column">
-                            <h1 class="hosted-gallery__heading"></h1>
-                            <h3 class="hosted-gallery__sub-heading"></h3>
-                        </div>
-                    </div>
-                </div>
-                <div class="js-hosted-gallery-image"><img src="" alt=""></div>
-                <div class="js-hosted-gallery-image"><img src="" alt=""></div>
-            </div>
-            <div class="js-hosted-gallery-scroll-container">
-                <div class="hosted-gallery__image--placeholder"></div>
-                <div class="hosted-gallery__image--placeholder"></div>
-                <div class="hosted-gallery__image--placeholder"></div>
-            </div>
-            <div class="js-hosted-gallery-cta"></div>
-            <div class="js-hosted-gallery-progress">
-                <span class="inline-arrow-up"></span>
-                <div class="js-hosted-gallery-rotating-border"></div>
-                <div class="js-hosted-gallery-image-count">
-                    1/3
-                </div>
-                <span class="inline-arrow-down"></span>
-            </div>
-            <div class="js-hosted-gallery-oj">
-                <div class="js-onward-placeholder"></div>
-                <div class="js-hosted-gallery-oj-close"></div>
-            </div>
-        </div>
-    </div>
-    <div class="js-gallery-caption-bar">
-        <div class="js-hosted-gallery-caption"></div>
-        <div class="js-hosted-gallery-caption"></div>
-        <div class="js-hosted-gallery-caption"></div>
-
-        <div class="js-gallery-caption-button"></div>
-    </div>
-</div>
-`;
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery.js
deleted file mode 100644
index 2b9faaabfe3..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery.js
+++ /dev/null
@@ -1,594 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/gallery.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import qwery from 'qwery';
-import config from 'lib/config';
-import { pushUrl } from 'lib/url';
-import { getBreakpoint, hasTouchScreen } from 'lib/detect';
-import FiniteStateMachine from 'lib/fsm';
-import mediator from 'lib/mediator';
-import throttle from 'lodash/throttle';
-import interactionTracking from 'common/modules/analytics/interaction-tracking';
-import { loadCssPromise } from 'lib/load-css-promise';
-
-class HostedGallery {
-    useSwipe: boolean;
-    swipeThreshold: number;
-    swipeContainerWidth: number;
-    index: number;
-    imageRatios: number[];
-    $galleryEl: bonzo;
-    $galleryFrame: bonzo;
-    $header: bonzo;
-    $imagesContainer: bonzo;
-    $captionContainer: bonzo;
-    $captions: bonzo;
-    $scrollEl: bonzo;
-    $images: bonzo;
-    $progress: bonzo;
-    $border: bonzo;
-    prevBtn: HTMLElement;
-    nextBtn: HTMLElement;
-    infoBtn: HTMLElement;
-    $counter: bonzo;
-    $ctaFloat: bonzo;
-    $ojFloat: bonzo;
-    $meta: bonzo;
-    ojClose: HTMLElement;
-    resize: (data?: Object) => void;
-    resizer: () => void;
-    fsm: FiniteStateMachine;
-    constructor() {
-        // CONFIG
-        const breakpoint = getBreakpoint();
-        this.useSwipe =
-            hasTouchScreen() &&
-            (breakpoint === 'mobile' || breakpoint === 'tablet');
-        this.swipeThreshold = 0.05;
-        this.index = this.index || 1;
-        this.imageRatios = [];
-
-        // ELEMENT BINDINGS
-        this.$galleryEl = $('.js-hosted-gallery-container');
-        this.$galleryFrame = $('.js-hosted-gallery-frame');
-        this.$header = $('.js-hosted-headerwrap');
-        this.$imagesContainer = $('.js-hosted-gallery-images', this.$galleryEl);
-        this.$captionContainer = $('.js-gallery-caption-bar');
-        this.$captions = $(
-            '.js-hosted-gallery-caption',
-            this.$captionContainer
-        );
-        this.$scrollEl = $(
-            '.js-hosted-gallery-scroll-container',
-            this.$galleryEl
-        );
-        this.$images = $('.js-hosted-gallery-image', this.$imagesContainer);
-        this.$progress = $('.js-hosted-gallery-progress', this.$galleryEl);
-        this.$border = $('.js-hosted-gallery-rotating-border', this.$progress);
-        this.prevBtn = qwery('.inline-arrow-up', this.$progress)[0];
-        this.nextBtn = qwery('.inline-arrow-down', this.$progress)[0];
-        this.infoBtn = qwery(
-            '.js-gallery-caption-button',
-            this.$captionContainer
-        )[0];
-        this.$counter = $('.js-hosted-gallery-image-count', this.$progress);
-        this.$ctaFloat = $('.js-hosted-gallery-cta', this.$galleryEl)[0];
-        this.$ojFloat = $('.js-hosted-gallery-oj', this.$galleryEl)[0];
-        this.$meta = $('.js-hosted-gallery-meta', this.$galleryEl)[0];
-        this.ojClose = qwery('.js-hosted-gallery-oj-close', this.$ojFloat)[0];
-
-        if (this.$galleryEl.length) {
-            this.resize = this.trigger.bind(this, 'resize');
-            mediator.on('window:throttledResize', this.resize);
-
-            // FSM CONFIG
-            this.fsm = new FiniteStateMachine({
-                initial: 'image',
-                onChangeState() {},
-                context: this,
-                // $FlowFixMe
-                states: this.states,
-            });
-
-            this.infoBtn.addEventListener(
-                'click',
-                this.trigger.bind(this, 'toggle-info')
-            );
-            this.ojClose.addEventListener('click', this.toggleOj.bind(this));
-
-            if (document.body) {
-                document.body.addEventListener(
-                    'keydown',
-                    this.handleKeyEvents.bind(this)
-                );
-            }
-            this.loadSurroundingImages(1, this.$images.length);
-            this.setPageWidth();
-
-            if (this.useSwipe) {
-                this.$galleryEl.addClass('use-swipe');
-                this.initSwipe();
-            } else {
-                this.$galleryEl.addClass('use-scroll');
-                this.initScroll();
-            }
-        }
-    }
-
-    toggleOj() {
-        bonzo(this.$ojFloat).toggleClass('minimise-oj');
-    }
-
-    initScroll() {
-        this.nextBtn.addEventListener('click', () => {
-            this.scrollTo(this.index + 1);
-            if (this.index < this.$images.length) {
-                this.trigger('next', {
-                    nav: 'Click',
-                });
-            } else {
-                this.trigger('reload');
-            }
-        });
-        this.prevBtn.addEventListener('click', () => {
-            this.scrollTo(this.index - 1);
-            if (this.index > 1) {
-                this.trigger('prev', {
-                    nav: 'Click',
-                });
-            } else {
-                this.trigger('reload');
-            }
-        });
-
-        this.$scrollEl[0].addEventListener(
-            'scroll',
-            throttle(this.fadeContent.bind(this), 20)
-        );
-    }
-
-    initSwipe() {
-        let threshold; // time in ms
-        let ox;
-        let dx;
-        const updateTime = 20;
-        this.$imagesContainer.css('width', `${this.$images.length}00%`);
-
-        this.$galleryEl[0].addEventListener('touchstart', e => {
-            threshold = this.swipeContainerWidth * this.swipeThreshold;
-            ox = e.touches[0].pageX;
-            dx = 0;
-        });
-
-        const touchMove = e => {
-            e.preventDefault();
-            if (e.touches.length > 1 || (e.scale && e.scale !== 1)) {
-                return;
-            }
-            dx = e.touches[0].pageX - ox;
-            this.translateContent(this.index, dx, updateTime);
-        };
-
-        this.$galleryEl[0].addEventListener(
-            'touchmove',
-            throttle(touchMove, updateTime, {
-                trailing: false,
-            })
-        );
-
-        this.$galleryEl[0].addEventListener('touchend', () => {
-            let direction;
-            if (Math.abs(dx) > threshold) {
-                direction = dx > threshold ? 1 : -1;
-            } else {
-                direction = 0;
-            }
-            dx = 0;
-
-            if (direction === 1) {
-                if (this.index > 1) {
-                    this.trigger('prev', {
-                        nav: 'Swipe',
-                    });
-                } else {
-                    this.trigger('reload');
-                }
-            } else if (direction === -1) {
-                if (this.index < this.$images.length) {
-                    this.trigger('next', {
-                        nav: 'Swipe',
-                    });
-                } else {
-                    this.trigger('reload');
-                }
-            } else {
-                this.trigger('reload');
-            }
-        });
-    }
-
-    static ctaIndex(): ?number {
-        const ctaIndex = config.get('page.ctaIndex');
-        const images = config.get('page.images');
-        return ctaIndex > 0 && ctaIndex < images.length - 1
-            ? ctaIndex
-            : undefined;
-    }
-
-    trigger(event: string, data?: Object) {
-        this.fsm.trigger(event, data);
-    }
-
-    loadSurroundingImages(index: number, count: number) {
-        let $img;
-        const that = this;
-
-        const setSize = ($image, imageIndex) => {
-            if (!that.imageRatios[imageIndex]) {
-                that.imageRatios[imageIndex] =
-                    $image[0].naturalWidth / $image[0].naturalHeight;
-            }
-            that.resizeImage.call(that, imageIndex);
-        };
-
-        [0, 1, 2]
-            .map(i => (index + i === 0 ? count - 1 : (index - 1 + i) % count))
-            .forEach(function(i) {
-                $img = $('img', this.$images[i]);
-                if (!$img[0].complete) {
-                    $img[0].addEventListener(
-                        'load',
-                        setSize.bind(this, $img, i)
-                    );
-                } else {
-                    setSize($img, i);
-                }
-            }, this);
-    }
-
-    resizeImage(imgIndex: number) {
-        const $galleryFrame = this.$galleryFrame[0];
-        const width = $galleryFrame.clientWidth;
-        const height = $galleryFrame.clientHeight;
-
-        const getFrame = (desiredRatio, w = width, h = height) => {
-            const frame = {
-                height: h,
-                width: w,
-                topBottom: 0,
-                leftRight: 0,
-            };
-            if (!desiredRatio) return frame;
-            if (desiredRatio > w / h) {
-                // portrait screens
-                frame.height = w / desiredRatio;
-                frame.topBottom = (h - frame.height) / 2;
-            } else {
-                // landscape screens
-                frame.width = h * desiredRatio;
-                frame.leftRight = (w - frame.width) / 2;
-            }
-            return frame;
-        };
-
-        const $imageDiv = this.$images[imgIndex];
-        const $ctaFloat = this.$ctaFloat;
-        const $ojFloat = this.$ojFloat;
-        const $meta = this.$meta;
-        const $images = this.$images;
-        const $sizer = $('.js-hosted-gallery-image-sizer', $imageDiv);
-        const imgRatio = this.imageRatios[imgIndex];
-        const ctaSize = getFrame(0);
-        const ctaIndex = HostedGallery.ctaIndex();
-        const tabletSize = 740;
-        const imageSize = getFrame(imgRatio);
-
-        fastdom.mutate(() => {
-            $sizer.css('width', imageSize.width);
-            $sizer.css('height', imageSize.height);
-            $sizer.css('top', imageSize.topBottom);
-            $sizer.css('left', imageSize.leftRight);
-            if (imgIndex === ctaIndex) {
-                bonzo($ctaFloat).css('bottom', ctaSize.topBottom);
-            }
-            if (imgIndex === $images.length - 1) {
-                bonzo($ojFloat).css('bottom', ctaSize.topBottom);
-            }
-            if (imgIndex === $images.length - 1) {
-                bonzo($ojFloat).css(
-                    'padding-bottom',
-                    ctaSize.topBottom > 40 || width > tabletSize ? 0 : 40
-                );
-            }
-            if (imgIndex === 0) {
-                bonzo($meta).css(
-                    'padding-bottom',
-                    imageSize.topBottom > 40 || width > tabletSize ? 20 : 40
-                );
-            }
-        });
-    }
-
-    translateContent(imgIndex: number, offset: number, duration: number) {
-        const px = -1 * (imgIndex - 1) * this.swipeContainerWidth;
-        const galleryEl = this.$imagesContainer[0];
-        const $meta = this.$meta;
-
-        galleryEl.style.webkitTransitionDuration = `${duration}ms`;
-        galleryEl.style.mozTransitionDuration = `${duration}ms`;
-        galleryEl.style.msTransitionDuration = `${duration}ms`;
-        galleryEl.style.transitionDuration = `${duration}ms`;
-        galleryEl.style.webkitTransform = `translate(${px +
-            offset}px,0) translateZ(0)`;
-        galleryEl.style.mozTransform = `translate(${px + offset}px,0)`;
-        galleryEl.style.msTransform = `translate(${px + offset}px,0)`;
-        galleryEl.style.transform = `translate(${px +
-            offset}px,0) translateZ(0)`;
-        fastdom.mutate(() => {
-            bonzo($meta).css('opacity', offset !== 0 ? 0 : 1);
-        });
-    }
-
-    fadeContent(e: Event) {
-        const length = this.$images.length;
-        const scrollTop =
-            e.target instanceof HTMLElement ? e.target.scrollTop : 0;
-        const scrollHeight =
-            e.target instanceof HTMLElement ? e.target.scrollHeight : 0;
-        const progress =
-            Math.round(length * (scrollTop / scrollHeight) * 100) / 100;
-        const fractionProgress = progress % 1;
-        const deg = Math.ceil(fractionProgress * 360);
-        const newIndex = Math.round(progress + 0.75);
-        const ctaIndex: number = HostedGallery.ctaIndex() || -1;
-        fastdom.mutate(() => {
-            this.$images.each((image, index) => {
-                const opacity = ((progress - index + 1) * 16) / 11 - 0.0625;
-                bonzo(image).css('opacity', Math.min(Math.max(opacity, 0), 1));
-            });
-
-            bonzo(this.$border).css('transform', `rotate(${deg}deg)`);
-            bonzo(this.$border).css('-webkit-transform', `rotate(${deg}deg)`);
-
-            bonzo(this.$galleryEl).toggleClass(
-                'show-cta',
-                progress <= ctaIndex && progress >= ctaIndex - 0.25
-            );
-            bonzo(this.$galleryEl).toggleClass(
-                'show-oj',
-                progress >= length - 1.25
-            );
-
-            bonzo(this.$progress).toggleClass(
-                'first-half',
-                fractionProgress && fractionProgress < 0.5
-            );
-
-            bonzo(this.$meta).css('opacity', progress !== 0 ? 0 : 1);
-        });
-
-        if (newIndex && newIndex !== this.index) {
-            this.index = newIndex;
-            this.trigger('reload', {
-                nav: 'Scroll',
-            });
-        }
-    }
-
-    scrollTo(index: number) {
-        const scrollEl = this.$scrollEl;
-        const length = this.$images.length;
-        const scrollHeight = scrollEl[0].scrollHeight;
-        fastdom.mutate(() => {
-            scrollEl.scrollTop(((index - 1) * scrollHeight) / length);
-        });
-    }
-
-    trackNavBetweenImages(data: Object) {
-        if (data && data.nav) {
-            const trackingPrefix = config.get('page.trackingPrefix', '');
-            interactionTracking.trackNonClickInteraction(
-                `${trackingPrefix + data.nav} - image ${this.index}`
-            );
-        }
-    }
-
-    onResize() {
-        this.resizer =
-            this.resizer ||
-            (() => {
-                this.loadSurroundingImages(this.index, this.$images.length);
-                if (this.useSwipe) {
-                    this.swipeContainerWidth = this.$galleryFrame.dim().width;
-                    this.translateContent(this.index, 0, 0);
-                }
-                this.setPageWidth();
-            });
-        throttle(this.resizer, 200)();
-    }
-
-    setPageWidth() {
-        const $imagesContainer = this.$imagesContainer[0];
-        const $gallery = this.$galleryEl[0];
-        const width = $gallery.clientWidth;
-        const height = $imagesContainer.clientHeight;
-        const $header = this.$header;
-        const $footer = this.$captionContainer;
-        const $galleryFrame = this.$galleryFrame;
-        const imgRatio = 5 / 3;
-        let imageWidth = width;
-        let leftRight = 0;
-        const that = this;
-        if (imgRatio < width / height) {
-            imageWidth = height * imgRatio;
-            leftRight = `${(width - imageWidth) / 2}px`;
-        }
-        this.swipeContainerWidth = imageWidth;
-        fastdom.mutate(() => {
-            $header.css('width', imageWidth);
-            $footer.css('margin', `0 ${leftRight}`);
-            $footer.css('width', 'auto');
-            $galleryFrame.css('left', leftRight);
-            $galleryFrame.css('right', leftRight);
-            that.loadSurroundingImages(that.index, that.$images.length);
-        });
-    }
-
-    handleKeyEvents(e: KeyboardEvent) {
-        const keyNames = {
-            '37': 'left',
-            '38': 'up',
-            '39': 'right',
-            '40': 'down',
-        };
-        if (e.keyCode === 37 || e.keyCode === 38) {
-            // up/left
-            e.preventDefault();
-            this.scrollTo(this.index - 1);
-            this.trigger('prev', {
-                nav: `KeyPress:${keyNames[e.keyCode]}`,
-            });
-            return false;
-        } else if (e.keyCode === 39 || e.keyCode === 40) {
-            // down/right
-            e.preventDefault();
-            this.scrollTo(this.index + 1);
-            this.trigger('next', {
-                nav: `KeyPress:${keyNames[e.keyCode]}`,
-            });
-            return false;
-        } else if (e.keyCode === 73) {
-            // 'i'
-            this.trigger('toggle-info');
-        }
-    }
-
-    loadAtIndex(i: number) {
-        this.index = i;
-        this.trigger('reload');
-        if (this.useSwipe) {
-            this.translateContent(this.index, 0, 0);
-        } else {
-            this.scrollTo(this.index);
-        }
-    }
-}
-// TODO: If we add `states` to the list of annotations within the class, it is `undefined` in the constructor. Wat?
-// $FlowFixMe
-HostedGallery.prototype.states = {
-    image: {
-        enter() {
-            const that = this;
-
-            // load prev/current/next
-            this.loadSurroundingImages(this.index, this.$images.length);
-            this.$captions.each((caption, index) => {
-                bonzo(caption).toggleClass(
-                    'current-caption',
-                    that.index === index + 1
-                );
-            });
-            bonzo(this.$counter).html(`${this.index}/${this.$images.length}`);
-
-            if (this.useSwipe) {
-                this.translateContent(this.index, 0, 100);
-                bonzo(this.$galleryEl).toggleClass(
-                    'show-oj',
-                    this.index === this.$images.length
-                );
-                bonzo(this.$galleryEl).toggleClass(
-                    'show-cta',
-                    this.index === HostedGallery.ctaIndex() + 1
-                );
-            }
-
-            const pageName =
-                config.get('page.pageName') ||
-                window.location.pathname.substr(
-                    window.location.pathname.lastIndexOf('/') + 1
-                );
-            pushUrl({}, document.title, `${pageName}#img-${this.index}`, true);
-            // event bindings
-            mediator.on('window:throttledResize', this.resize);
-        },
-        leave() {
-            this.trigger('hide-info');
-            mediator.off('window:throttledResize', this.resize);
-        },
-        events: {
-            next(e: Object) {
-                if (this.index < this.$images.length) {
-                    // last img
-                    this.index += 1;
-                    this.trackNavBetweenImages(e);
-                }
-                this.reloadState = true;
-            },
-            prev(e: Object) {
-                if (this.index > 1) {
-                    // first img
-                    this.index -= 1;
-                    this.trackNavBetweenImages(e);
-                }
-                this.reloadState = true;
-            },
-            reload(e: Object) {
-                this.trackNavBetweenImages(e);
-                this.reloadState = true;
-            },
-            'toggle-info': function() {
-                this.$captionContainer.toggleClass(
-                    'hosted-gallery--show-caption'
-                );
-            },
-            'hide-info': function() {
-                this.$captionContainer.removeClass(
-                    'hosted-gallery--show-caption'
-                );
-            },
-            'show-info': function() {
-                this.$captionContainer.addClass('hosted-gallery--show-caption');
-            },
-            resize() {
-                this.onResize();
-            },
-        },
-    },
-};
-
-export const init = (): Promise<any> => {
-    if (qwery('.js-hosted-gallery-container').length) {
-        return loadCssPromise.then(() => {
-            let res;
-            const galleryHash = window.location.hash;
-            const gallery = new HostedGallery();
-            const match = /\?index=(\d+)/.exec(document.location.href);
-            if (match) {
-                // index specified so launch gallery at that index
-                gallery.loadAtIndex(parseInt(match[1], 10));
-            } else {
-                res = /^#(?:img-)?(\d+)$/.exec(galleryHash);
-                if (res) {
-                    gallery.loadAtIndex(parseInt(res[1], 10));
-                }
-            }
-
-            return gallery;
-        });
-    }
-
-    return Promise.resolve();
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery.spec.js
deleted file mode 100644
index 3a3648f7983..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/gallery.spec.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/gallery.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import interactionTracking from 'common/modules/analytics/interaction-tracking';
-import { noop } from 'lib/noop';
-import { init } from './gallery';
-import { galleryHtml } from './gallery-html';
-
-jest.mock('lib/detect', () => ({
-    hasPushStateSupport: jest.fn(),
-    getBreakpoint: jest.fn(),
-    hasTouchScreen: jest.fn(),
-}));
-jest.mock('common/modules/analytics/interaction-tracking', () => ({
-    trackNonClickInteraction: jest.fn(() => Promise.resolve()),
-}));
-jest.mock('lib/load-css-promise', () => ({
-    loadCssPromise: Promise.resolve(),
-}));
-
-let gallery: any;
-
-describe('Hosted Gallery', () => {
-    beforeEach(done => {
-        if (document.body) {
-            document.body.innerHTML = galleryHtml;
-        }
-        init().then(galleryInstance => {
-            gallery = galleryInstance;
-            done();
-        });
-    });
-
-    afterEach(() => {
-        jest.resetAllMocks();
-
-        if (document.body) {
-            document.body.innerHTML = '';
-        }
-    });
-
-    it('should exist', done => {
-        expect(gallery).toBeDefined();
-        done();
-    });
-
-    const classListFor = (className: string): string =>
-        (document.querySelector(`.${className}`): any).classList.toString();
-
-    it('should open and close the caption on click', () => {
-        const button: any = document.querySelector(
-            '.js-gallery-caption-button'
-        );
-
-        button.click();
-
-        expect(classListFor('js-gallery-caption-bar')).toEqual(
-            expect.stringContaining('hosted-gallery--show-caption')
-        );
-
-        button.click();
-
-        expect(classListFor('js-gallery-caption-bar')).not.toEqual(
-            expect.stringContaining('hosted-gallery--show-caption')
-        );
-    });
-
-    it('should open and close  the caption on pressing "i"', () => {
-        gallery.handleKeyEvents({ keyCode: 73 });
-
-        expect(classListFor('js-gallery-caption-bar')).toEqual(
-            expect.stringContaining('hosted-gallery--show-caption')
-        );
-
-        gallery.handleKeyEvents({ keyCode: 73 });
-
-        expect(classListFor('js-gallery-caption-bar')).not.toEqual(
-            expect.stringContaining('hosted-gallery--show-caption')
-        );
-    });
-
-    it('should open and close the onward journey on click', () => {
-        const button: any = document.querySelector(
-            '.js-hosted-gallery-oj-close'
-        );
-        button.click();
-
-        expect(classListFor('js-hosted-gallery-oj')).toEqual(
-            expect.stringContaining('minimise-oj')
-        );
-
-        button.click();
-
-        expect(classListFor('js-hosted-gallery-oj')).not.toEqual(
-            expect.stringContaining('minimise-oj')
-        );
-    });
-
-    it('should log navigation in GA when using arrow key navigation', () => {
-        gallery.handleKeyEvents({ keyCode: 40, preventDefault: noop });
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('KeyPress:down - image 2');
-        gallery.handleKeyEvents({ keyCode: 39, preventDefault: noop });
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('KeyPress:right - image 3');
-        gallery.handleKeyEvents({ keyCode: 38, preventDefault: noop });
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('KeyPress:up - image 2');
-        gallery.handleKeyEvents({ keyCode: 37, preventDefault: noop });
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('KeyPress:left - image 1');
-    });
-
-    it('should log navigation in GA when clicking through images', () => {
-        gallery.initScroll.call(gallery);
-        (document.querySelector('.inline-arrow-down'): any).click();
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('Click - image 2');
-        (document.querySelector('.inline-arrow-up'): any).click();
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('Click - image 1');
-    });
-
-    it('should log navigation in GA when scrolling through images', () => {
-        const nativeHTMLElement = window.HTMLElement;
-        window.HTMLElement = function() {
-            this.scrollTop = 20;
-            this.scrollHeight = 30;
-        };
-        gallery.fadeContent({
-            target: new window.HTMLElement(),
-        });
-        expect(
-            interactionTracking.trackNonClickInteraction
-        ).toHaveBeenCalledWith('Scroll - image 3');
-        window.HTMLElement = nativeHTMLElement;
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/next-video.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/next-video.js
deleted file mode 100644
index dec355734a6..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/next-video.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/next-video.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import fastdom from 'lib/fastdom-promise';
-
-const loadNextVideo = (): Promise<void> => {
-    const placeholders = document.querySelectorAll('.js-autoplay-placeholder');
-
-    if (placeholders.length) {
-        return fetchJson(
-            `${config.get('page.ajaxUrl')}/${config.get(
-                'page.pageId'
-            )}/autoplay.json`,
-            {
-                mode: 'cors',
-            }
-        ).then(json =>
-            fastdom.mutate(() => {
-                let i;
-                for (i = 0; i < placeholders.length; i += 1) {
-                    placeholders[i].innerHTML = json.html;
-                }
-            })
-        );
-    }
-
-    return Promise.resolve();
-};
-
-export { loadNextVideo as init, loadNextVideo as load };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/next-video.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/next-video.spec.js
deleted file mode 100644
index 9c9e22153e0..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/next-video.spec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/next-video.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { load } from 'commercial/modules/hosted/next-video';
-import fetchJson from 'lib/fetch-json';
-import config from 'lib/config';
-
-jest.mock('lib/fetch-json', () =>
-    jest.fn(() => Promise.resolve({ html: '<div class="video"></div>' }))
-);
-
-describe('Hosted Next Video', () => {
-    beforeAll(() => {
-        config.set('page', {
-            ajaxUrl: 'some.url',
-            pageId: 'pageId',
-        });
-    });
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML =
-                '<div class="js-autoplay-placeholder"></div>';
-        }
-    });
-
-    afterEach(() => {
-        if (document.body) {
-            document.body.innerHTML = '';
-        }
-    });
-
-    it('should exist', () => {
-        expect(load).toBeDefined();
-    });
-
-    it('should make an ajax call and insert html', done => {
-        load()
-            .then(() => {
-                expect(fetchJson).toHaveBeenCalledWith(
-                    'some.url/pageId/autoplay.json',
-                    {
-                        mode: 'cors',
-                    }
-                );
-                expect(
-                    document.querySelector('.js-autoplay-placeholder .video')
-                ).not.toBeNull();
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/onward.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/onward.js
deleted file mode 100644
index 6352908208e..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/onward.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/onward.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import fastdom from 'lib/fastdom-promise';
-import { initHostedCarousel } from './onward-journey-carousel';
-
-// there should only ever be one onward component on the page
-// if the component does not exist, return an empty array rather than `undefined`
-const getPlaceholderFromDom = (
-    dom: typeof document = document
-): Array<HTMLElement> =>
-    Array.from(dom.getElementsByClassName('js-onward-placeholder')).slice(0, 1);
-
-const generateUrlFromConfig = (
-    c: {
-        page: {
-            ajaxUrl: string,
-            pageId: string,
-            contentType: string,
-        },
-    } = config
-): string =>
-    c.page.pageId && c.page.contentType
-        ? `${c.page.ajaxUrl || ''}/${
-              c.page.pageId
-          }/${c.page.contentType.toLowerCase()}/onward.json`
-        : '';
-
-const insertHTMLfromPlaceholders = (
-    json: { html: string },
-    placeholders: Array<HTMLElement>
-): void => {
-    placeholders[0].insertAdjacentHTML('beforeend', json.html);
-};
-
-export const loadOnwardComponent = (
-    insertHtmlFn: (
-        json: { html: string },
-        placeholders: Array<HTMLElement>
-    ) => void = insertHTMLfromPlaceholders
-): Promise<any> => {
-    const placeholders: Array<HTMLElement> = getPlaceholderFromDom();
-    const jsonUrl: string = generateUrlFromConfig();
-
-    if (placeholders && placeholders.length) {
-        fetchJson(jsonUrl, { mode: 'cors' })
-            .then(json =>
-                fastdom.mutate(() => {
-                    insertHtmlFn(json, placeholders);
-                })
-            )
-            .then(() => {
-                initHostedCarousel();
-            });
-    }
-
-    return Promise.resolve();
-};
-
-export const _ = { insertHTMLfromPlaceholders, generateUrlFromConfig };
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/onward.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/onward.spec.js
deleted file mode 100644
index 07518323b5f..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/onward.spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/onward.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fetchJson_ from 'lib/fetch-json';
-import { loadOnwardComponent, _ } from './onward.js';
-
-const { insertHTMLfromPlaceholders, generateUrlFromConfig } = _;
-
-const fetchJson: any = fetchJson_;
-
-jest.mock('lib/fetch-json', () => jest.fn());
-
-describe('URL generator', () => {
-    it('generates correct URL from valid config', () => {
-        const fakeConfig = {
-            page: {
-                ajaxUrl: 'some.url',
-                contentType: 'gallery',
-                pageId: 'pageId',
-            },
-        };
-        const expectResult = 'some.url/pageId/gallery/onward.json';
-        const result = generateUrlFromConfig(fakeConfig);
-
-        expect(result).toEqual(expectResult);
-    });
-});
-
-describe('Insert onward HTML', () => {
-    it('calls own insertion method', () => {
-        const fakePlaceholder = document.createElement('div');
-        fakePlaceholder.innerHTML = '<div class="js-onward-placeholder"></div>';
-        const fakeJson = { html: '<div class="next-page"></div>' };
-        const result =
-            '<div class="js-onward-placeholder"></div><div class="next-page"></div>';
-
-        insertHTMLfromPlaceholders(fakeJson, [fakePlaceholder]);
-        expect(fakePlaceholder.innerHTML).toBe(result);
-    });
-});
-
-describe('Loading onward component', () => {
-    afterEach(() => {
-        fetchJson.mockReset();
-    });
-
-    it('Does not fetch onwards if placeholder length is 0', () => {
-        loadOnwardComponent();
-        expect(fetchJson).not.toHaveBeenCalled();
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/youtube.js b/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/youtube.js
deleted file mode 100644
index f1ba5f82b8e..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/hosted/youtube.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/hosted/youtube.js
- * to .ts, then delete it.
- */
-
-// @flow strict
-import {
-    init as initNextVideoAutoPlay,
-    canAutoplay as canAutoplayNextVideo,
-    addCancelListener,
-    triggerAutoplay,
-    triggerEndSlate,
-} from 'commercial/modules/hosted/next-video-autoplay';
-import { isOn } from 'common/modules/accessibility/main';
-import { initYoutubePlayer } from 'common/modules/atoms/youtube-player';
-import {
-    trackYoutubeEvent,
-    initYoutubeEvents,
-} from 'common/modules/atoms/youtube-tracking';
-import config from 'lib/config';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-
-// https://developers.google.com/youtube/iframe_api_reference
-type YouTubePlayer = {
-    getCurrentTime: () => number,
-    getDuration: () => number,
-    fullscreener: () => void,
-    playVideo: () => void,
-    pauseVideo: () => void,
-    stopVideo: () => void,
-};
-
-type Page = {
-    isDev: boolean,
-    contentType: string,
-    host: string,
-    productionOffice: string,
-};
-
-const EVENTSFIRED = [];
-
-const isDesktop: boolean = isBreakpoint({ min: 'desktop' });
-
-const shouldAutoplay = (
-    page: Page,
-    switches: { hostedVideoAutoplay: ?boolean }
-): boolean => {
-    const flashingElementsAllowed = () => isOn('flashing-elements');
-    const isVideoArticle = () => page.contentType.toLowerCase() === 'video';
-    const isUSContent = () => page.productionOffice.toLowerCase() === 'us';
-    const isSwitchedOn = switches.hostedVideoAutoplay || false;
-
-    if (!page.contentType || !page.productionOffice) {
-        return false;
-    }
-
-    return (
-        isSwitchedOn &&
-        isUSContent() &&
-        isVideoArticle() &&
-        flashingElementsAllowed()
-    );
-};
-
-const sendPercentageCompleteEvents = (
-    atomId: string,
-    youtubePlayer: YouTubePlayer,
-    playerTotalTime: number
-): void => {
-    const quartile = playerTotalTime / 4;
-    const playbackEvents = {
-        '25': quartile,
-        '50': quartile * 2,
-        '75': quartile * 3,
-    };
-
-    Object.keys(playbackEvents).forEach(key => {
-        const value = playbackEvents[key];
-        if (
-            !EVENTSFIRED.includes(key) &&
-            youtubePlayer.getCurrentTime() > value
-        ) {
-            trackYoutubeEvent(key, atomId);
-            EVENTSFIRED.push(key);
-            mediator.emit(key);
-        }
-    });
-};
-
-export const initHostedYoutube = (el: HTMLElement): void => {
-    const atomId = el.getAttribute('data-media-id') || null;
-    const duration = Number(el.getAttribute('data-duration')) || null;
-
-    if (!atomId || !duration) {
-        return;
-    }
-
-    const youtubeTimer = document.getElementsByClassName(
-        'js-youtube-current-time'
-    )[0];
-
-    let playTimer;
-
-    initYoutubeEvents(atomId);
-    initYoutubePlayer(
-        el,
-        {
-            onPlayerStateChange(event: { data: mixed, target: YouTubePlayer }) {
-                const player = event.target;
-
-                // show end slate when movie finishes
-                if (event.data === window.YT.PlayerState.ENDED) {
-                    trackYoutubeEvent('end', atomId);
-                    youtubeTimer.textContent = '0:00';
-                    if (canAutoplayNextVideo()) {
-                        // on mobile show the next video link in the end of the currently watching video
-                        if (!isDesktop) {
-                            triggerEndSlate();
-                        }
-                    }
-                } else {
-                    // update current time
-                    const currentTime = Math.floor(player.getCurrentTime());
-                    const seconds = currentTime % 60;
-                    const minutes = (currentTime - seconds) / 60;
-                    youtubeTimer.textContent =
-                        minutes + (seconds < 10 ? ':0' : ':') + seconds;
-                }
-
-                if (event.data === window.YT.PlayerState.PLAYING) {
-                    trackYoutubeEvent('play', atomId);
-                    const playerTotalTime = player.getDuration();
-                    playTimer = setInterval(() => {
-                        sendPercentageCompleteEvents(
-                            atomId,
-                            player,
-                            playerTotalTime
-                        );
-                    }, 1000);
-                } else {
-                    window.clearInterval(playTimer);
-                }
-            },
-            onPlayerReady(event: { target: YouTubePlayer }) {
-                if (
-                    shouldAutoplay(
-                        config.get('page', {}),
-                        config.get('switches', {})
-                    )
-                ) {
-                    event.target.playVideo();
-                }
-                initNextVideoAutoPlay().then(() => {
-                    if (canAutoplayNextVideo() && isDesktop) {
-                        addCancelListener();
-                        triggerAutoplay(
-                            event.target.getCurrentTime.bind(event.target),
-                            duration
-                        );
-                    }
-                });
-            },
-        },
-        el.dataset.assetId
-    );
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/measure-timing.js b/static/src/javascripts.flow.archive/projects/commercial/modules/measure-timing.js
deleted file mode 100644
index a17b87c8549..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/measure-timing.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/measure-timing.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export const measureTiming = (name: string) => {
-    type TimeTakenInMilliseconds = number | null;
-    if (window.performance && window.performance.now) {
-        const perf = window.performance;
-        const startKey = `${name}-start`;
-        const endKey = `${name}-end`;
-
-        const start = () => {
-            perf.mark(startKey);
-        };
-
-        const end = (): TimeTakenInMilliseconds => {
-            perf.mark(endKey);
-            perf.measure(name, startKey, endKey);
-
-            const measureEntries = perf.getEntriesByName(name, "measure");
-            const timeTakenFloat = measureEntries[0].duration;
-            const timeTakenInt = Math.round(timeTakenFloat);
-
-            return timeTakenInt;
-        };
-
-        const clear = () => {
-            perf.clearMarks(startKey)
-        }
-
-        return {
-            start,
-            end,
-            clear
-        };
-    }
-    return { start: () => null, end: (): TimeTakenInMilliseconds => null, clear: () => null }
-};
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/messenger.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/messenger.spec.js
deleted file mode 100644
index 28e85684583..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/messenger.spec.js
+++ /dev/null
@@ -1,269 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/messenger.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { noop } from 'lib/noop';
-import {
-    register as register_,
-    unregister as unregister_,
-    _ as testExports,
-} from 'commercial/modules/messenger';
-import { postMessage } from 'commercial/modules/messenger/post-message';
-
-const onMessage: any = testExports.onMessage;
-const register: any = register_;
-const unregister: any = unregister_;
-
-const addEventListenerSpy = jest
-    .spyOn(global, 'addEventListener')
-    .mockImplementation(() => {});
-const removeEventListenerSpy = jest
-    .spyOn(global, 'removeEventListener')
-    .mockImplementation(() => {});
-const jsonParseSpy = jest.spyOn(JSON, 'parse');
-const mockOrigin = "someorigin.com";
-
-jest.mock('commercial/modules/messenger/post-message', () => ({
-    postMessage: jest.fn(),
-}));
-
-jest.mock('lib/report-error', () => jest.fn());
-
-describe('Cross-frame messenger', () => {
-    const routines = {
-        thrower() {
-            throw new Error('catch this if you can!');
-        },
-        respond(value) {
-            return `${value} johnny!`;
-        },
-        add1(value) {
-            return value + 1;
-        },
-        add2(_, ret) {
-            return ret + 2;
-        },
-        rubicon() {
-            return 'rubicon';
-        },
-    };
-
-    beforeEach(() => {
-        jest.resetAllMocks();
-        expect.hasAssertions();
-    });
-
-    it('should expose register and unregister as a public API', () => {
-        expect(register).toBeDefined();
-        expect(unregister).toBeDefined();
-    });
-
-    it('should register an event listener when there is at least one message routine', () => {
-        register('test', noop);
-        expect(addEventListenerSpy).toHaveBeenCalled();
-        unregister('test', noop);
-        expect(removeEventListenerSpy).toHaveBeenCalled();
-    });
-
-    it('should not respond when sending malformed JSON', done => {
-        jsonParseSpy.mockImplementation(() => {
-            throw new Error();
-        });
-
-        Promise.resolve()
-            .then(() => onMessage({ origin: mockOrigin, data: '{', source: '' }))
-            .then(() => {
-                expect(postMessage).not.toHaveBeenCalled();
-            })
-            .then(done)
-            .catch(done.fail);
-    });
-
-    it('should not respond when sending incomplete payload', done => {
-        const payloads = [
-            { type: 'missing data' },
-            { value: 'missing type' },
-            { type: 'unregistered', value: 'type' },
-        ];
-
-        Promise.all(
-            payloads.map(data => {
-                jsonParseSpy.mockReturnValueOnce(data);
-                return onMessage({ origin: mockOrigin, data: '', source: '' });
-            })
-        ).then(() => {
-            expect(postMessage).not.toHaveBeenCalled();
-            done();
-        });
-    });
-
-    it('should respond with a 405 code when no listener is attached to a message type', done => {
-        const payload = {
-            id: '01234567-89ab-cdef-fedc-ba9876543210',
-            type: 'that',
-            value: 'hello',
-        };
-        jsonParseSpy.mockImplementationOnce(() => payload);
-        register('this', noop);
-        register('that', noop);
-        unregister('that', noop);
-        Promise.resolve()
-            .then(() =>
-                onMessage({
-                    origin: mockOrigin,
-                    data: JSON.stringify(payload),
-                    source: 'source',
-                })
-            )
-            .then(() => {
-                expect(postMessage).toHaveBeenCalledWith(
-                    {
-                        error: {
-                            code: 405,
-                            message: 'Service that not implemented',
-                        },
-                        id: payload.id,
-                        result: null,
-                    },
-                    'source',
-                );
-            })
-            .then(done)
-            .catch(done.fail)
-            .then(() => {
-                unregister('this', noop);
-            });
-    });
-
-    it('should throw when the listener fails', done => {
-        const payload = {
-            id: '01234567-89ab-cdef-fedc-ba9876543210',
-            type: 'this',
-            value: 'hello',
-        };
-        jsonParseSpy.mockImplementationOnce(() => payload);
-        register('this', routines.thrower);
-        Promise.resolve()
-            .then(() =>
-                onMessage({ origin: mockOrigin, data: '', source: 'source' })
-            )
-            .then(() => {
-                expect(postMessage).toHaveBeenCalledWith(
-                    {
-                        error: {
-                            code: 500,
-                            message:
-                                'Internal server error\n\nError: catch this if you can!',
-                        },
-                        id: payload.id,
-                        result: null,
-                    },
-                    'source',
-                );
-            })
-            .then(done)
-            .catch(done.fail)
-            .then(() => {
-                unregister('this', routines.thrower);
-            });
-    });
-
-    it("should respond with the routine's return value", done => {
-        const payload = {
-            id: '01234567-89ab-cdef-fedc-ba9876543210',
-            type: 'this',
-            value: 'hello',
-        };
-        jsonParseSpy.mockImplementationOnce(() => payload);
-        register('this', routines.respond);
-        Promise.resolve()
-            .then(() =>
-                onMessage({
-                    origin: mockOrigin,
-                    data: '',
-                    source: 'sauce',
-                })
-            )
-            .then(() => {
-                expect(postMessage).toHaveBeenCalledWith(
-                    {
-                        error: null,
-                        id: payload.id,
-                        result: 'hello johnny!',
-                    },
-                    'sauce',
-                );
-            })
-            .then(done)
-            .catch(done.fail)
-            .then(() => {
-                unregister('this', routines.respond);
-            });
-    });
-
-    it('should respond with the listeners cumulative result', done => {
-        const payload = {
-            id: '01234567-89ab-cdef-fedc-ba9876543210',
-            type: 'this',
-            value: 1,
-        };
-        jsonParseSpy.mockImplementationOnce(() => payload);
-        register('this', routines.add1);
-        register('this', routines.add2);
-
-        Promise.resolve()
-            .then(() =>
-                onMessage({ origin: mockOrigin, data: '', source: 'sorcery' })
-            )
-            .then(() => {
-                expect(postMessage).toHaveBeenCalledWith(
-                    {
-                        error: null,
-                        id: payload.id,
-                        result: 4,
-                    },
-                    'sorcery',
-                );
-            })
-            .then(done)
-            .catch(done.fail)
-            .then(() => {
-                unregister('this', routines.add1);
-                unregister('this', routines.add2);
-            });
-    });
-
-    it('should respond to Rubicon messages with no IDs', done => {
-        const payload = {
-            type: 'set-ad-height',
-            value: { id: 'test', height: '20px' },
-        };
-        jsonParseSpy.mockImplementationOnce(() => payload);
-        register('resize', routines.rubicon);
-        onMessage({ origin: mockOrigin, data: '', source: 'saucy' })
-            .then(() => {
-                expect(postMessage).toHaveBeenCalledWith(
-                    {
-                        error: null,
-                        id: 'aaaa0000-bb11-cc22-dd33-eeeeee444444',
-                        result: 'rubicon',
-                    },
-                    'saucy',
-                );
-            })
-            .then(done)
-            .catch(done.fail)
-            .then(() => {
-                unregister('resize', routines.rubicon);
-            });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/modules/third-party-tags/imr-worldwide.spec.js b/static/src/javascripts.flow.archive/projects/commercial/modules/third-party-tags/imr-worldwide.spec.js
deleted file mode 100644
index 373b083577f..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/modules/third-party-tags/imr-worldwide.spec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/modules/third-party-tags/imr-worldwide.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { imrWorldwide } from './imr-worldwide';
-
-const { shouldRun, url } = imrWorldwide;
-const onLoad: any = imrWorldwide.onLoad;
-
-/**
- * we have to mock config like this because
- * loading imr-worldwide has side affects
- * that are dependent on config.
- * */
-
-jest.mock('lib/config', () => {
-    const defaultConfig = {
-        switches: {
-            imrWorldwide: true,
-        },
-        page: {
-            headline: 'Starship Enterprise',
-            author: 'Captain Kirk',
-            section: 'spaceexploration',
-            sectionName: 'Space Exploration',
-            keywords: 'Space,Travel',
-            webPublicationDate: 1498113262000,
-            isFront: false,
-            isPaidContent: true,
-            pageId: 100,
-        },
-    };
-
-    return Object.assign({}, defaultConfig, {
-        get: (path: string = '', defaultValue: any) =>
-            path
-                .replace(/\[(.+?)]/g, '.$1')
-                .split('.')
-                .reduce((o, key) => o[key], defaultConfig) || defaultValue,
-    });
-});
-
-jest.mock('common/modules/commercial/geo-utils', () => ({
-        isInAuOrNz: jest.fn().mockReturnValue(true)
-}));
-
-jest.mock('common/modules/experiments/ab', () => ({
-    isInVariantSynchronous: jest.fn(),
-}));
-
-const nSdkInstance = {
-    ggInitialize: jest.fn(),
-    ggPM: jest.fn(),
-};
-
-window.NOLCMB = {
-    getInstance: jest.fn(() => nSdkInstance),
-};
-
-describe('third party tag IMR in AUS', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    afterAll(() => {
-        jest.clearAllMocks();
-    });
-
-    it('should exist and have the correct exports', () => {
-        expect(shouldRun).toBe(true);
-        expect(url).toBe(
-            '//secure-dcr.imrworldwide.com/novms/js/2/ggcmb510.js'
-        );
-    });
-
-    it('should initalize, with a brand-only apid on an unmatched section', () => {
-        // If a section does not exist in guMetadata, it will use the default apid
-        const expectedNolggParams = {
-            sfcode: 'dcr',
-            apid: 'P0EE0F4F4-8D7C-4082-A2A4-82C84728DC59',
-            apn: 'theguardian',
-        };
-        onLoad();
-        expect(nSdkInstance.ggInitialize).toBeCalledWith(expectedNolggParams);
-    });
-
-    it('should call nSdkInstance.ggPM with staticstart and dcrStaticMetadata', () => {
-        const expectedMetadata = {
-            assetid: 100,
-            section: 'The Guardian - brand only',
-            type: 'static',
-        };
-        onLoad();
-        expect(nSdkInstance.ggPM).toBeCalledWith(
-            'staticstart',
-            expectedMetadata
-        );
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/commercial/types.js b/static/src/javascripts.flow.archive/projects/commercial/types.js
deleted file mode 100644
index 8492942944f..00000000000
--- a/static/src/javascripts.flow.archive/projects/commercial/types.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/commercial/types.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/* eslint no-use-before-define: "off" */
-
-export type AdSizes = { [k: string]: Array<AdSize> };
-export type AdSize = SingleSizeArray | NamedSize;
-
-export type SingleSizeArray = Array<number>;
-export type NamedSize = 'fluid';
-export type MultiSize = Array<AdSize>;
-export type GeneralSize = AdSize | MultiSize;
-export type SizeMapping = Array<GeneralSize>;
-
-export type ResponseInformation = {
-    advertiserId: string,
-    campaignId: string,
-    creativeId: ?number,
-    labelIds: ?Array<number>,
-    lineItemId: ?number,
-};
-
-export type SafeFrameConfig = {
-    allowOverlayExpansion: boolean,
-    allowPushExpansion: boolean,
-    sandbox: boolean,
-};
-
-type AddService = (s: string) => Slot;
-type ClearCategoryExclusions = () => Slot;
-type ClearTargeting = (s?: string) => Slot;
-type DefineSizeMapping = (asm: Array<SizeMapping>) => Slot;
-type Get = (s: string) => ?string;
-type GetString = () => string;
-type GetStrings = () => Array<string>;
-type GetResponseInformation = () => ?ResponseInformation;
-type GetTargeting = (s: string) => Array<string>;
-type Set = (s1: string, s2: string) => Slot;
-type SetString = (s: string) => Slot;
-type SetCollapseEmptyDiv = (b1: boolean, b2: boolean) => Slot;
-type SetForceSafeFrame = (b1: boolean) => Slot;
-type SetSafeFrameConfig = (sfc: SafeFrameConfig) => Slot;
-type SetTargeting = (s: string, a: string | Array<string>) => Slot;
-
-export type Slot = {
-    addService: AddService,
-    clearCategoryExclusions: ClearCategoryExclusions,
-    clearTargeting: ClearTargeting,
-    defineSizeMapping: DefineSizeMapping,
-    get: Get,
-    getAdUnitPath: GetString,
-    getAttributeKeys: GetStrings,
-    getCategoryExclusions: GetStrings,
-    getResponseInformation: GetResponseInformation,
-    getSlotElementId: GetString,
-    getTargeting: GetTargeting,
-    getTargetingKeys: GetStrings,
-    set: Set,
-    setCategoryExclusion: SetString,
-    setClickUrl: SetString,
-    setCollapseEmptyDiv: SetCollapseEmptyDiv,
-    setForceSafeFrame: SetForceSafeFrame,
-    setSafeFrameConfig: SetSafeFrameConfig,
-    setTargeting: SetTargeting,
-};
-
-export type SlotOnloadEvent = {
-    serviceName: string,
-    slot: Slot,
-};
-
-export type SlotRenderEndedEvent = {
-    advertiserId?: number,
-    campaignId?: number,
-    creativeId?: number,
-    isEmpty: boolean,
-    lineItemId?: number,
-    serviceName: string,
-    size: AdSize,
-    slot: Slot,
-    sourceAgnosticCreativeId?: number,
-    sourceAgnosticLineItemId?: number,
-};
-
-export type ImpressionViewableEvent = {
-    serviceName: string,
-    slot: Slot,
-};
-
-export type ImpressionViewableEventCallback = ImpressionViewableEvent => void;
-
-export type SlotVisibilityChangedEvent = {
-    inViewPercentage: number,
-    serviceName: string,
-    slot: Slot,
-};
-
-export type GuAdSize = {
-    width: number,
-    height: number,
-    toString: (_: void) => string,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/accessibility/helpers.js b/static/src/javascripts.flow.archive/projects/common/modules/accessibility/helpers.js
deleted file mode 100644
index e3264712e8d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/accessibility/helpers.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/accessibility/helpers.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'fastdom';
-import { isOn } from 'common/modules/accessibility/main';
-
-const shouldHideFlashingElements = (callback: ?() => {}): void => {
-    if (!isOn('flashing-elements')) {
-        fastdom.mutate(() => {
-            if (document.body) {
-                document.body.classList.add('disable-flashing-elements');
-            }
-
-            if (callback) {
-                callback();
-            }
-        });
-    } else if (callback) {
-        callback();
-    }
-};
-
-export { shouldHideFlashingElements };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/accessibility/main.js b/static/src/javascripts.flow.archive/projects/common/modules/accessibility/main.js
deleted file mode 100644
index 79a36ad6c28..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/accessibility/main.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/accessibility/main.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import userPrefs from 'common/modules/user-prefs';
-
-const KEY_PREFIX = 'accessibility';
-
-const saveState = (state: { [key: string]: boolean }): void => {
-    Object.keys(state).forEach(key => {
-        userPrefs.set(`${KEY_PREFIX}.${key}`, state[key]);
-    });
-};
-
-const getStoredValue = (key: string): boolean =>
-    userPrefs.get(`${KEY_PREFIX}.${key}`) !== false;
-
-const isOn = (key: string): boolean => getStoredValue(key) === true;
-
-export { saveState, isOn };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/accessibility/main.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/accessibility/main.spec.js
deleted file mode 100644
index 975246b1be3..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/accessibility/main.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/accessibility/main.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { saveState, isOn } from 'common/modules/accessibility/main';
-
-jest.mock('common/modules/user-prefs');
-
-describe('Accessibility', () => {
-    it('saves the state', () => {
-        saveState({
-            'flashing-elements': true,
-            'exploding-avocados': false,
-        });
-
-        expect(isOn('flashing-elements')).toBe(true);
-        expect(isOn('exploding-avocados')).toBe(false);
-    });
-    it('state is on by default', () => {
-        expect(isOn('jumping-weathervanes')).toBe(true);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/beacon.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/beacon.js
deleted file mode 100644
index 5b860939467..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/beacon.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/beacon.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import fetch from 'lib/fetch';
-
-const fire = (path: string): Image => {
-    const img = new Image();
-
-    img.src = config.get('page.beaconUrl') + path;
-
-    return img;
-};
-
-const postJson = (path: string, jsonString: string): void => {
-    const url =
-        config
-            .get('page.beaconUrl', '')
-            .replace(/^\/\//, `${window.location.protocol}//`) + path;
-
-    fetch(url, {
-        method: 'post',
-        header: {
-            'Content-Type': 'application/json',
-        },
-        body: jsonString,
-        mode: 'cors',
-    });
-};
-
-export { fire, postJson };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/beacon.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/beacon.spec.js
deleted file mode 100644
index 721367b94ce..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/beacon.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/beacon.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { fire } from './beacon';
-
-jest.mock('lib/config');
-
-describe('beacon', () => {
-    config.page = {
-        beaconUrl: '//beacon.gu-web.net',
-    };
-
-    test('should create correct img element when fired', () => {
-        const img = fire('/pv.gif');
-
-        expect(img.nodeName.toLowerCase()).toBe('img');
-        expect(img.getAttribute('src')).toBe('//beacon.gu-web.net/pv.gif');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/discussion.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/discussion.js
deleted file mode 100644
index ddaf2472fec..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/discussion.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/discussion.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import bonzo from 'bonzo';
-import config from 'lib/config';
-import debounce from 'lodash/debounce';
-import mediator from 'lib/mediator';
-
-let seen = false;
-
-const sendToGA = (label: string, customDimensions: Object = {}): void => {
-    const tracker = config.get('googleAnalytics.trackers.editorial');
-
-    window.ga(
-        `${tracker}.send`,
-        'event',
-        'element view',
-        'onpage item',
-        label,
-        Object.assign(
-            {
-                nonInteraction: true, // to avoid affecting bounce rate
-            },
-            customDimensions
-        )
-    );
-};
-
-const jumpedToComments = (): void => {
-    if (!seen) {
-        seen = true;
-    }
-};
-
-const commentPermalink = (): void => {
-    if (!seen) {
-        seen = true;
-    }
-};
-
-const scrolledToComments = (): void => {
-    if (!seen) {
-        sendToGA('scroll to comments');
-        seen = true;
-    }
-};
-
-const areCommentsVisible = (): boolean => {
-    const comments = $('#comments').offset();
-    const scrollTop = window.pageYOffset;
-    const viewport = bonzo.viewport().height;
-
-    if (
-        comments.top - viewport / 2 < scrollTop &&
-        comments.top + comments.height - viewport / 3 > scrollTop
-    ) {
-        return true;
-    }
-
-    return false;
-};
-
-// Convenience functions
-const areCommentsSeen = (): void => {
-    const scroll = () => {
-        if (!seen && areCommentsVisible()) {
-            scrolledToComments();
-            mediator.off('window:throttledScroll', debounce(scroll, 200));
-        }
-    };
-
-    if (!seen) {
-        mediator.on('window:throttledScroll', debounce(scroll, 200));
-    }
-};
-
-const initDiscussionAnalytics = (): void => {
-    mediator.on('discussion:seen:comment-permalink', commentPermalink);
-    mediator.on('discussion:seen:comments-anchor', jumpedToComments);
-
-    areCommentsSeen();
-};
-
-export { initDiscussionAnalytics };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/interaction-tracking.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/interaction-tracking.js
deleted file mode 100644
index c208a13faaa..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/interaction-tracking.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/interaction-tracking.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-import { storage } from '@guardian/libs';
-import {
-    trackSamePageLinkClick as trackSamePageLinkClickGoogle,
-    trackNonClickInteraction as trackNonClickInteractionGoogle,
-    trackExternalLinkClick as trackExternalLinkClickGoogle,
-    trackSponsorLogoLinkClick as trackSponsorLogoLinkClickGoogle,
-} from 'common/modules/analytics/google';
-import { catchErrorsWithContext } from 'lib/robust';
-
-const NG_STORAGE_KEY = 'gu.analytics.referrerVars';
-let loc = document.location;
-
-type Spec = {
-    validTarget: boolean,
-    target: any,
-    sameHost: boolean,
-    samePage: boolean,
-    tag: string,
-};
-
-const isSponsorLogoLinkClick = (target: Object): boolean =>
-    target.hasAttribute('data-sponsor');
-
-// used where we don't have an element to pass as a tag, eg. keyboard interaction
-const trackNonClickInteraction = (actionName: string): void => {
-    trackNonClickInteractionGoogle(actionName);
-};
-
-const trackSamePageLinkClick = (spec: Spec): void => {
-    // Do not perform a same-page track link when there isn't a tag.
-    if (spec.tag) {
-        trackSamePageLinkClickGoogle(spec.target, spec.tag);
-    }
-};
-
-const trackInternalLinkClick = (spec: Spec): void => {
-    // Store in session storage.
-    // GA and Omniture will both pick it up on next page load,
-    // then Omniture will remove it from storage.
-    const storeObj = {
-        path: loc.pathname,
-        tag: spec.tag || 'untracked',
-        time: new Date().getTime(),
-    };
-    storage.session.set(NG_STORAGE_KEY, storeObj);
-};
-
-const trackExternalLinkClick = (spec: Spec): void => {
-    // Execute the GA and Omniture tracking in parallel
-    // and rely on Omniture to provide a 500 ms delay so they both get a chance to complete.
-    // TODO when Omniture goes away, implement the delay ourselves.
-    trackExternalLinkClickGoogle(spec.target, spec.tag);
-};
-
-const trackClick = (spec: Spec): void => {
-    if (!spec.validTarget) {
-        return;
-    }
-
-    if (isSponsorLogoLinkClick(spec.target)) {
-        return trackSponsorLogoLinkClickGoogle(spec.target);
-    }
-
-    if (spec.sameHost) {
-        if (spec.samePage) {
-            trackSamePageLinkClick(spec);
-        } else {
-            trackInternalLinkClick(spec);
-        }
-    } else {
-        trackExternalLinkClick(spec);
-    }
-};
-
-const addHandlers = (): void => {
-    mediator.on('module:clickstream:interaction', trackNonClickInteraction);
-
-    mediator.on('module:clickstream:click', spec => {
-        // We don't want tracking errors to terminate the event emitter, as
-        // this will mean other event listeners will not be called.
-        catchErrorsWithContext([
-            [
-                'c-analytics',
-                () => {
-                    trackClick(spec);
-                },
-            ],
-        ]);
-    });
-};
-
-const init = (options: Object = {}): void => {
-    if (options.location) {
-        loc = options.location; // allow a fake location to be passed in for testing
-    }
-    addHandlers();
-};
-
-export default {
-    init,
-    trackClick,
-    trackNonClickInteraction,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/interaction-tracking.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/interaction-tracking.spec.js
deleted file mode 100644
index fb1d20498a0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/interaction-tracking.spec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/interaction-tracking.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {
-    trackSamePageLinkClick,
-    trackExternalLinkClick,
-    trackSponsorLogoLinkClick,
-} from 'common/modules/analytics/google';
-import mediator from 'lib/mediator';
-import { storage } from '@guardian/libs';
-
-import interactionTracking from './interaction-tracking';
-
-jest.mock('lib/mediator');
-jest.mock('lib/raven');
-
-jest.mock('common/modules/analytics/google', () => ({
-    trackSamePageLinkClick: jest.fn(),
-    trackExternalLinkClick: jest.fn(),
-    trackSponsorLogoLinkClick: jest.fn(),
-}));
-
-describe('interaction-tracking', () => {
-    afterEach(() => {
-        storage.session.remove('gu.analytics.referrerVars');
-        mediator.removeEvent('module:clickstream:interaction');
-        mediator.removeEvent('module:clickstream:click');
-    });
-
-    test('should log a clickstream event for an in-page link', () => {
-        interactionTracking.init();
-
-        mediator.emit('module:clickstream:click', {
-            target: document.documentElement,
-            samePage: true,
-            sameHost: true,
-            validTarget: true,
-            tag: true,
-        });
-
-        expect(trackSamePageLinkClick).toHaveBeenCalledTimes(1);
-    });
-
-    test('should not log clickstream events with an invalidTarget', () => {
-        interactionTracking.init();
-
-        mediator.emit('module:clickstream:click', {
-            target: document.documentElement,
-            samePage: true,
-            sameHost: true,
-            validTarget: false,
-            tag: true,
-        });
-
-        expect(trackSamePageLinkClick).toHaveBeenCalledTimes(1);
-    });
-
-    test('should use local storage for same-host links', () => {
-        const pathName = '/foo/bar';
-        const tagName = 'tag in localstorage';
-
-        interactionTracking.init({ location: { pathname: pathName } });
-
-        mediator.emit('module:clickstream:click', {
-            target: document.createElement('a'),
-            samePage: false,
-            sameHost: true,
-            validTarget: true,
-            tag: tagName,
-        });
-
-        const referrerVars = storage.session.get('gu.analytics.referrerVars');
-
-        expect(referrerVars.tag).toEqual(tagName);
-        expect(referrerVars.path).toEqual(pathName);
-    });
-
-    test('should log a clickstream event for an external link', () => {
-        interactionTracking.init();
-
-        mediator.emit('module:clickstream:click', {
-            target: document.createElement('a'),
-            samePage: false,
-            sameHost: false,
-            validTarget: true,
-            tag: 'tag',
-        });
-
-        expect(trackExternalLinkClick).toHaveBeenCalledTimes(1);
-    });
-
-    test('should log a clickstream event for a sponsor logo link', () => {
-        interactionTracking.init();
-
-        const el = document.createElement('a');
-        el.setAttribute('data-sponsor', 'Sponsor');
-
-        mediator.emit('module:clickstream:click', {
-            target: el,
-            samePage: false,
-            sameHost: false,
-            validTarget: true,
-            tag: 'tag',
-        });
-
-        expect(trackSponsorLogoLinkClick).toHaveBeenCalledTimes(1);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/media-listener.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/media-listener.js
deleted file mode 100644
index 4f0722a3f49..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/media-listener.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/media-listener.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-
-const mediaListener = (): void => {
-    if (window.matchMedia) {
-        const mql = window.matchMedia('print');
-        mql.addListener(
-            (): void => {
-                if (mql.matches) {
-                    mediator.emit('module:clickstream:interaction', 'print');
-                }
-            }
-        );
-    }
-};
-
-export { mediaListener };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/register.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/register.js
deleted file mode 100644
index 986ae17badb..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/register.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/register.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/*
- *  The register module is used to measure whether a module was executed, how
- *  long it took, and whether an error was caught. The data is sent to Ophan.
- *
- *  The system is passive, and is typically used for modules which we want to
- *  run analytics over (eg. ab tests, enhancement).
- */
-
-import mediator from 'lib/mediator';
-import ophan from 'ophan/ng';
-
-const register: Array<{ name: string, status: string, endTime?: string }> = [];
-const startTime: number = Date.now();
-
-const begin = (name: string): void => {
-    register.push({
-        name,
-        status: 'unfinished',
-    });
-};
-
-const end = (name: string): void => {
-    register
-        .filter(_ => _.name === name)
-        .forEach(module => {
-            module.status = 'completed';
-            module.endTime = `${Date.now() - startTime}ms`;
-        });
-};
-
-const error = (name: string): void => {
-    register
-        .filter(_ => _.name === name)
-        .forEach(module => {
-            module.status = 'failed';
-            module.endTime = `${Date.now() - startTime}ms`;
-        });
-};
-
-const sendEvent = (): void => {
-    ophan.record({
-        register,
-    });
-};
-
-const initAnalyticsRegister = (): void => {
-    mediator.on('register:begin', begin);
-    mediator.on('register:end', end);
-    mediator.on('register:error', error);
-
-    window.setTimeout(sendEvent, 5000);
-};
-
-export { initAnalyticsRegister, begin, end, error };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/analytics/send-privacy-prefs.js b/static/src/javascripts.flow.archive/projects/common/modules/analytics/send-privacy-prefs.js
deleted file mode 100644
index bc5bcd7dca2..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/analytics/send-privacy-prefs.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/analytics/send-privacy-prefs.js
- * to .ts, then delete it.
- */
-
-// @flow
-import ophan from 'ophan/ng';
-import userPrefs from 'common/modules/user-prefs';
-import type {
-    AdConsent,
-    AdConsentWithState,
-} from 'common/modules/commercial/ad-prefs.lib';
-
-const alertViewCount: string = 'first-pv-consent.lifetime-views';
-
-const getAlertViewCount = (): number =>
-    parseInt(userPrefs.get(alertViewCount) || 0, 10);
-
-const upAlertViewCount = (): void => {
-    userPrefs.set(alertViewCount, getAlertViewCount() + 1);
-    ophan.record({
-        component: `privacy-prefs`,
-        value: `lifetime-alert-views : ${getAlertViewCount()}`,
-    });
-};
-
-const resetAlertViewCount = (): void => {
-    userPrefs.set(alertViewCount, 0);
-};
-
-const onConsentSet = (consent: AdConsent, status: ?boolean): void => {
-    ophan.record({
-        component: `privacy-prefs`,
-        value: `set : ${String(status)} : ${consent.cookie.toLowerCase()}`,
-    });
-    resetAlertViewCount();
-};
-
-const trackConsentCookies = (
-    allConsentsWithState: AdConsentWithState[]
-): void => {
-    allConsentsWithState.forEach((consentWithState: AdConsentWithState) => {
-        ophan.record({
-            component: `privacy-prefs`,
-            value: `pv : ${String(
-                consentWithState.state
-            )} : ${consentWithState.consent.cookie.toLowerCase()}`,
-        });
-    });
-};
-
-export {
-    onConsentSet,
-    trackConsentCookies,
-    upAlertViewCount,
-    getAlertViewCount,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/article/membership-events.js b/static/src/javascripts.flow.archive/projects/common/modules/article/membership-events.js
deleted file mode 100644
index 23cefa23050..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/article/membership-events.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/article/membership-events.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import fetchJson from 'lib/fetch-json';
-import reportError from 'lib/report-error';
-
-const ELEMENT_INITIAL_CLASS = 'element-membership--not-upgraded';
-const ELEMENT_UPGRADED_CLASS = 'element-membership--upgraded';
-
-const upgradeEvent = (el: Node): void => {
-    const href = $('a', el).attr('href');
-    const matches = href.match(/https:\/\/membership.theguardian.com/);
-
-    if (matches) {
-        fetchJson(`${href}/card`, {
-            mode: 'cors',
-        })
-            .then(resp => {
-                if (resp.html) {
-                    fastdom.mutate(() => {
-                        $(el)
-                            .html(resp.html)
-                            .removeClass(ELEMENT_INITIAL_CLASS)
-                            .addClass(ELEMENT_UPGRADED_CLASS);
-                    });
-                }
-            })
-            .catch(ex => {
-                reportError(ex, {
-                    feature: 'membership-events',
-                });
-            });
-    }
-};
-
-export const upgradeMembershipEvents = (): void => {
-    $(`.${ELEMENT_INITIAL_CLASS}`).each(upgradeEvent);
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/article/space-filler.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/article/space-filler.spec.js
deleted file mode 100644
index 84a6922f1aa..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/article/space-filler.spec.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/article/space-filler.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { spaceFiller } from 'common/modules/article/space-filler';
-import {
-    findSpace as findSpace_,
-    SpaceError,
-} from 'common/modules/spacefinder';
-import raven from 'lib/raven';
-import { noop } from 'lib/noop';
-import type { SpacefinderRules } from 'common/modules/spacefinder';
-
-jest.mock('lib/fastdom-promise');
-jest.mock('common/modules/spacefinder', () => ({
-    findSpace: jest.fn(),
-    // eslint-disable-next-line object-shorthand
-    SpaceError: function() {
-        this.name = 'SpaceError';
-    },
-}));
-
-jest.mock('lib/raven', () => ({
-    captureException: jest.fn(),
-}));
-
-const findSpace: JestMockFn<*, *> = (findSpace_: any);
-
-describe('spacefiller', () => {
-    const writeError = new Error('Mock writer exception');
-
-    afterEach(() => {
-        raven.captureException.mockReset();
-        findSpace.mockReset();
-    });
-
-    it('Returns a promise that resolves when the insertion completes', () => {
-        const rules = {};
-        const els = [document.createElement('div')];
-
-        findSpace.mockReturnValue(Promise.resolve(els));
-
-        const insertion = spaceFiller.fillSpace(rules, elements => elements);
-
-        return expect(insertion).resolves.toBe(els);
-    });
-
-    it('Passes a ruleset to the spacefinder', () => {
-        const rules = {};
-        const insertion = spaceFiller.fillSpace(rules, elements => elements);
-
-        return insertion.then(() => {
-            const spaceFinderArgs = findSpace.mock.calls[0];
-
-            expect(spaceFinderArgs[0]).toBe(rules);
-        });
-    });
-
-    it('If it finds a space, it calls the writer', () => {
-        const rules = {};
-        const writer = jest.fn();
-        const els = [document.createElement('p')];
-
-        findSpace.mockReturnValueOnce(Promise.resolve(els));
-
-        return spaceFiller.fillSpace(rules, writer).then(() => {
-            expect(writer).toHaveBeenCalledWith(els);
-        });
-    });
-
-    it('If there are no spaces, it rejects the promise and does not call the writer', () => {
-        const rules = ({
-            bodySelector: '',
-            slotSelector: '',
-            minAbove: 0,
-            minBelow: 0,
-            clearContentMeta: 0,
-            selectors: {},
-        }: SpacefinderRules);
-
-        findSpace.mockReturnValueOnce(Promise.reject(new SpaceError(rules)));
-
-        const writer = jest.fn();
-        const insertion = spaceFiller.fillSpace(rules, writer);
-
-        return insertion.then(result => {
-            expect(result).toBe(false);
-            expect(writer).not.toHaveBeenCalled();
-        });
-    });
-
-    it('If there are no spaces, the spacefinder exception is not recorded by Raven', () => {
-        // These exceptions are 'expected' and therefore shouldn't go into logging
-        const rules = ({
-            bodySelector: '',
-            slotSelector: '',
-            minAbove: 0,
-            minBelow: 0,
-            clearContentMeta: 0,
-            selectors: {},
-        }: SpacefinderRules);
-
-        findSpace.mockReturnValueOnce(Promise.reject(new SpaceError(rules)));
-
-        const insertion = spaceFiller.fillSpace(rules, noop);
-
-        return insertion.then(() => {
-            expect(raven.captureException).not.toHaveBeenCalled();
-        });
-    });
-
-    it('Calls writers in order', done => {
-        // This resolves a longstanding race condition where spacefinder calls would come
-        // before the scripts that inject content into spaces had completely ran
-        findSpace
-            .mockReturnValueOnce(Promise.resolve([document.createElement('p')]))
-            .mockReturnValueOnce(
-                Promise.resolve([document.createElement('p')])
-            );
-
-        const rules = {};
-        const firstWriter = jest.fn();
-
-        spaceFiller.fillSpace(rules, firstWriter).catch(done.fail);
-        spaceFiller
-            .fillSpace(rules, () => {
-                expect(firstWriter).toHaveBeenCalled();
-                done();
-            })
-            .catch(done.fail);
-    });
-
-    it('If a writer throws an exception, we record it', () => {
-        findSpace.mockReturnValueOnce(
-            Promise.resolve([document.createElement('p')])
-        );
-
-        const rules = {};
-        const insertion = spaceFiller.fillSpace(rules, () => {
-            throw writeError;
-        });
-
-        return insertion.then(() => {
-            expect(raven.captureException).toHaveBeenCalledWith(writeError);
-        });
-    });
-
-    it('If a writer throws an exception, we still call subsequent writers', () => {
-        findSpace
-            .mockReturnValueOnce(Promise.resolve([document.createElement('p')]))
-            .mockReturnValueOnce(
-                Promise.resolve([document.createElement('p')])
-            );
-
-        const rules = {};
-        const writer = jest.fn();
-        const brokenWriter = () => {
-            throw writeError;
-        };
-
-        return spaceFiller.fillSpace(rules, brokenWriter).then(() => {
-            spaceFiller.fillSpace(rules, writer).then(() => {
-                expect(writer).toHaveBeenCalled();
-            });
-        });
-    });
-
-    it('If a writer throws an exception, the promise is resolved with "false"', () => {
-        findSpace.mockReturnValueOnce(
-            Promise.resolve([document.createElement('p')])
-        );
-
-        const rules = {};
-        const insertion = spaceFiller.fillSpace(rules, () => {
-            throw writeError;
-        });
-
-        return insertion.then(result => {
-            expect(result).toBe(false);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/article/twitter.js b/static/src/javascripts.flow.archive/projects/common/modules/article/twitter.js
deleted file mode 100644
index 21d450e58d7..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/article/twitter.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/article/twitter.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/* global twttr: false */
-
-import fastdom from 'fastdom';
-import config from 'lib/config';
-import { getBreakpoint, getViewport } from 'lib/detect';
-import mediator from 'lib/mediator';
-import debounce from 'lodash/debounce';
-
-const body: ?Element = document.querySelector(
-    '.js-liveblog-body, .js-article__body, .js-article__body--minute-article'
-);
-
-const renderTweets = (): void => {
-    const nativeTweetElements: Element[] = Array.from(
-        document.querySelectorAll('blockquote.twitter-tweet')
-    );
-    const widgetScript: ?Element = document.getElementById('twitter-widget');
-
-    if (nativeTweetElements.length) {
-        if (!widgetScript) {
-            const scriptElement = document.createElement('script');
-            const target = document.scripts[0];
-
-            scriptElement.id = 'twitter-widget';
-            scriptElement.async = true;
-            scriptElement.src = '//platform.twitter.com/widgets.js';
-
-            if (target && target.parentNode) {
-                target.parentNode.insertBefore(scriptElement, target);
-            }
-        }
-
-        if (
-            typeof twttr !== 'undefined' &&
-            twttr.widgets &&
-            twttr.widgets.load
-        ) {
-            twttr.widgets.load(body);
-        }
-    }
-};
-
-const enhanceTweets = (): void => {
-    if (
-        (getBreakpoint() === 'mobile' && !config.get('page.isMinuteArticle')) ||
-        !config.get('switches.enhanceTweets')
-    ) {
-        return;
-    }
-
-    const tweetElements: Element[] = Array.from(
-        document.querySelectorAll('blockquote.js-tweet')
-    );
-    const viewportHeight: number = getViewport().height;
-
-    tweetElements.forEach(element => {
-        const rect = element.getBoundingClientRect();
-        if (viewportHeight * 2.5 > rect.top && rect.top + rect.height > 0) {
-            fastdom.mutate(() => {
-                element.classList.remove('js-tweet');
-                element.classList.add('twitter-tweet');
-                // We only want to render tweets once the class has been added
-                renderTweets();
-            });
-        }
-    });
-};
-
-const init = (): void => {
-    mediator.on('window:throttledScroll', debounce(enhanceTweets, 200));
-};
-
-export { init, enhanceTweets };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/atoms/quiz.js b/static/src/javascripts.flow.archive/projects/common/modules/atoms/quiz.js
deleted file mode 100644
index c2746da5afa..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/atoms/quiz.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/atoms/quiz.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-
-// find a bucket message to show once you finish a quiz
-const handleCompletion = (): void => {
-    // we're only handling completion in browsers who can validate forms natively
-    // others do a round trip to the server
-    if (!HTMLFormElement.prototype.checkValidity) {
-        return;
-    }
-
-    // quizzes can be set to only show answers at the end, in which case we do a round trip.
-    // we'll run this code only if it's an instant-reveal quiz
-    const quizzes: Element[] = Array.from(
-        document.getElementsByClassName('js-atom-quiz--instant-reveal')
-    );
-
-    if (!quizzes.length) {
-        return;
-    }
-
-    bean.on(document, 'click', quizzes, function onClick(e: Event): void {
-        const quiz: HTMLFormElement = (e.currentTarget: any);
-        let total: number = quiz.querySelectorAll(
-            ':checked + .atom-quiz__answer__item--is-correct'
-        ).length;
-
-        if (!quiz.checkValidity()) {
-            // the form (quiz) is complete
-            return;
-        }
-
-        do {
-            // try and find a .bucket__message for your total
-            const bucketMessage: ?HTMLElement = (quiz.querySelector(
-                `.js-atom-quiz__bucket-message--${total}`
-            ): ?any);
-
-            // if we find a message for your total show it, and exit
-            if (bucketMessage) {
-                fastdom.mutate(() => {
-                    bucketMessage.style.display = 'block';
-                });
-                bean.off(document, 'click', onClick);
-                break;
-            }
-
-            // if we haven't exited, there's no .bucket__message for your score, so you must be in
-            // a bucket with a range that begins below your total score
-            total -= 1;
-        } while (total >= 0); // the lowest we'll look is for 0 correct answers
-    });
-};
-
-export { handleCompletion };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube-tracking.js b/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube-tracking.js
deleted file mode 100644
index 7dd7d7536ae..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube-tracking.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/atoms/youtube-tracking.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-import config from 'lib/config';
-import ophan from 'ophan/ng';
-import { buildGoogleAnalyticsEvent } from 'common/modules/video/ga-helper';
-import type { MediaEvent } from 'common/modules/video/ga-helper';
-
-const buildEventId = (event: string, videoId: string): string =>
-    `${event}:${videoId}`;
-
-const initYoutubeEvents = (videoId: string): void => {
-    const gaTracker = config.get('googleAnalytics.trackers.editorial');
-    const eventAction = 'video content';
-    const events = {
-        metricMap: {
-            play: 'metric1',
-            skip: 'metric2',
-            '25': 'metric3',
-            '50': 'metric4',
-            '75': 'metric5',
-            end: 'metric6',
-        },
-        baseEventObject: {
-            eventCategory: 'media',
-            eventAction,
-            eventLabel: videoId,
-            dimension19: videoId,
-            dimension20: 'gu-video-youtube',
-        },
-    };
-    const ophanRecord = (event: MediaEvent): void => {
-        const eventObject = {
-            video: {
-                id: `gu-video-youtube-${event.mediaId}`,
-                eventType: `video:content:${event.eventType}`,
-            },
-        };
-        ophan.record(eventObject);
-    };
-
-    ['play', '25', '50', '75', 'end'].forEach(event => {
-        mediator.once(buildEventId(event, videoId), id => {
-            const mediaEvent: MediaEvent = {
-                mediaId: videoId,
-                mediaType: 'video',
-                eventType: event,
-                isPreroll: false,
-            };
-            ophanRecord(mediaEvent);
-            window.ga(
-                `${gaTracker}.send`,
-                'event',
-                buildGoogleAnalyticsEvent(
-                    mediaEvent,
-                    events.metricMap,
-                    id,
-                    'gu-video-youtube',
-                    () => eventAction,
-                    videoId
-                )
-            );
-        });
-    });
-
-    ophanRecord({
-        mediaId: videoId,
-        mediaType: 'video',
-        eventType: 'ready',
-        isPreroll: false,
-    });
-};
-
-const trackYoutubeEvent = (event: string, id: string): void => {
-    mediator.emit(buildEventId(event, id), id);
-};
-
-export { trackYoutubeEvent, initYoutubeEvents };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube.js b/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube.js
deleted file mode 100644
index 72965351b5c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube.js
+++ /dev/null
@@ -1,590 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/atoms/youtube.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import bonzo from 'bonzo';
-import fetchJson from 'lib/fetch-json';
-import reportError from 'lib/report-error';
-import { initYoutubePlayer } from 'common/modules/atoms/youtube-player';
-import {
-    trackYoutubeEvent,
-    initYoutubeEvents,
-} from 'common/modules/atoms/youtube-tracking';
-import { Component } from 'common/modules/component';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { isIOS, isAndroid, isBreakpoint } from 'lib/detect';
-import debounce from 'lodash/debounce';
-import { isOn as accessibilityIsOn } from 'common/modules/accessibility/main';
-import { getUrlVars } from 'lib/url';
-
-declare class YoutubePlayer extends EventTarget {
-    playVideo: () => void;
-    getVideoUrl: () => string;
-    pauseVideo: () => void;
-    getCurrentTime: () => number;
-    getDuration: () => number;
-    getPlayerState: () => -1 | 0 | 1 | 2 | 3 | 4 | 5;
-}
-
-declare class YoutubePlayerEvent {
-    data: -1 | 0 | 1 | 2 | 3 | 4 | 5;
-    target: YoutubePlayer;
-}
-
-interface AtomPlayer {
-    iframe: HTMLIFrameElement;
-    atomId: string;
-    youtubeId: string;
-    youtubePlayer: YoutubePlayer;
-    pendingTrackingCalls: Array<number>;
-    paused: boolean;
-    // Media that has ended is neither playing nor paused. For the Ophan
-    // attention time metric we only care if it is playing or not.
-    playing: boolean;
-    overlay?: HTMLElement;
-    endSlate?: Component;
-    duration?: number;
-    progressTracker?: ?IntervalID;
-}
-
-interface IFrameBehaviour {
-    autoplay: boolean;
-    mutedOnStart: boolean;
-}
-
-interface IFrameBehaviourConfig {
-    isAutoplayBlockingPlatform: boolean;
-    isInternalReferrer: boolean;
-    isMainVideo: boolean;
-    flashingElementsAllowed: boolean;
-    isVideoArticle: boolean;
-    isFront: boolean;
-    isUSContent: boolean;
-    isPaidContent: boolean;
-}
-
-const players: {
-    [string]: AtomPlayer,
-} = {};
-
-const iframes = [];
-
-document.addEventListener('focusout', () => {
-    iframes.forEach(iframe => {
-        fastdom
-            .measure(() => {
-                if (document.activeElement === iframe) {
-                    return $('.vjs-big-play-button', iframe.parentElement);
-                }
-            })
-            .then(($playButton: ?bonzo) => {
-                fastdom.mutate(() => {
-                    if ($playButton) {
-                        $playButton.addClass('youtube-play-btn-focussed');
-                    }
-                });
-            });
-    });
-});
-
-document.addEventListener('focusin', () => {
-    fastdom
-        .measure(() => $('.vjs-big-play-button'))
-        .then(($playButton: ?bonzo) => {
-            fastdom.mutate(() => {
-                if ($playButton) {
-                    $playButton.removeClass('youtube-play-btn-focussed');
-                }
-            });
-        });
-});
-
-const recordPlayerProgress = (uniqueAtomId: string): void => {
-    const player = players[uniqueAtomId];
-
-    if (!player) {
-        return;
-    }
-
-    const { pendingTrackingCalls, youtubePlayer, duration, atomId } = player;
-
-    if (!pendingTrackingCalls.length) {
-        return;
-    }
-
-    const currentTime = youtubePlayer.getCurrentTime();
-
-    if (duration) {
-        const percentPlayed = Math.round((currentTime / duration) * 100);
-
-        if (
-            pendingTrackingCalls.length &&
-            percentPlayed >= pendingTrackingCalls[0]
-        ) {
-            trackYoutubeEvent(pendingTrackingCalls[0].toString(), atomId);
-            pendingTrackingCalls.shift();
-        }
-    }
-};
-
-const killProgressTracker = (atomId: string): void => {
-    if (players[atomId] && players[atomId].progressTracker) {
-        clearInterval(players[atomId].progressTracker);
-    }
-};
-
-const setProgressTracker = (atomId: string): IntervalID => {
-    players[atomId].progressTracker = setInterval(
-        recordPlayerProgress.bind(null, atomId),
-        1000
-    );
-    return players[atomId].progressTracker;
-};
-
-const handlePlay = (uniqueAtomId: string, player: AtomPlayer): void => {
-    const { atomId, iframe, overlay, endSlate, paused } = player;
-
-    killProgressTracker(uniqueAtomId);
-    setProgressTracker(uniqueAtomId);
-    player.playing = true;
-    // don't track play if resumed from a paused state
-    if (paused) {
-        player.paused = false;
-    } else {
-        trackYoutubeEvent('play', atomId);
-    }
-
-    const mainMedia = iframe.closest('.immersive-main-media');
-
-    if (mainMedia) {
-        mainMedia.classList.add('atom-playing');
-    }
-
-    if (overlay && endSlate && !endSlate.rendered) {
-        const parentElem = overlay.parentElement;
-
-        if (parentElem) {
-            endSlate.fetch(parentElem, 'html');
-        }
-    }
-};
-
-const getYoutubeIdFromUrl = (url: string): string => {
-    const youtubeIdKey = 'v';
-    const splitUrl = url.split('?');
-
-    if (splitUrl.length === 1) {
-        return '';
-    }
-
-    const queryParams = getUrlVars(splitUrl[1]);
-
-    return queryParams[youtubeIdKey] || '';
-};
-
-const onPlayerPlaying = (uniqueAtomId: string): void => {
-    const player = players[uniqueAtomId];
-
-    if (!player) {
-        return;
-    }
-
-    const { youtubePlayer, youtubeId } = players[uniqueAtomId];
-
-    /**
-     * Get the youtube video id from the video currently playing.
-     * We want to compare with the youtube ID in memory. If they differ
-     * a related video has begun playing, so we need to get the atom ID
-     * for tracking.
-     */
-    const latestYoutubeId = getYoutubeIdFromUrl(youtubePlayer.getVideoUrl());
-
-    if (latestYoutubeId !== youtubeId) {
-        fetchJson(`/atom/youtube/${latestYoutubeId}.json`)
-            .then(resp => {
-                const activeAtomId = resp.atomId;
-
-                if (!activeAtomId) {
-                    return;
-                }
-                // Update trackingId, youtubeId and duration for new youtube video.
-                player.atomId = activeAtomId;
-                player.youtubeId = latestYoutubeId;
-                player.duration = youtubePlayer.getDuration();
-
-                // Listen for events with new tracking ID (activeAtomId)
-                initYoutubeEvents(activeAtomId);
-
-                handlePlay(uniqueAtomId, player);
-            })
-            .catch(err => {
-                reportError(
-                    Error(
-                        `Failed to get atom ID for youtube ID ${latestYoutubeId}. ${err}`
-                    ),
-                    { feature: 'youtube' },
-                    false
-                );
-            });
-    } else {
-        handlePlay(uniqueAtomId, player);
-    }
-};
-
-const onPlayerPaused = (atomId: string): void => {
-    const player = players[atomId];
-
-    player.playing = false;
-    player.paused = true;
-
-    killProgressTracker(atomId);
-};
-
-const onPlayerEnded = (atomId: string): void => {
-    const player = players[atomId];
-
-    player.playing = false;
-    killProgressTracker(atomId);
-
-    trackYoutubeEvent('end', player.atomId);
-
-    player.pendingTrackingCalls = [25, 50, 75];
-
-    const mainMedia =
-        (player.iframe && player.iframe.closest('.immersive-main-media')) ||
-        null;
-    if (mainMedia) {
-        mainMedia.classList.remove('atom-playing');
-    }
-};
-
-const STATES = {
-    ENDED: onPlayerEnded,
-    PLAYING: onPlayerPlaying,
-    PAUSED: onPlayerPaused,
-};
-
-const getIFrameBehaviourConfig = (
-    iframe: HTMLIFrameElement
-): IFrameBehaviourConfig => {
-    const isAutoplayBlockingPlatform = isIOS() || isAndroid();
-
-    const isInternalReferrer = ((): boolean => {
-        if (config.get('page.isDev')) {
-            return document.referrer.indexOf(window.location.origin) === 0;
-        }
-
-        return document.referrer.indexOf(config.get('page.host')) === 0;
-    })();
-
-    const isMainVideo =
-        (iframe && !!iframe.closest('figure[data-component="main video"]')) ||
-        false;
-
-    const flashingElementsAllowed = accessibilityIsOn('flashing-elements');
-
-    const isVideoArticle =
-        config.get('page.contentType', '').toLowerCase() === 'video';
-
-    const isFront = config.get('page.isFront', false);
-    const isUSContent =
-        config.get('page.productionOffice', '').toLowerCase() === 'us';
-
-    const isPaidContent = config.get('page.isPaidContent');
-
-    return {
-        isAutoplayBlockingPlatform,
-        isInternalReferrer,
-        isMainVideo,
-        flashingElementsAllowed,
-        isVideoArticle,
-        isFront,
-        isUSContent,
-        isPaidContent,
-    };
-};
-
-const getIFrameBehaviour = (
-    iframeConfig: IFrameBehaviourConfig
-): IFrameBehaviour => {
-    const {
-        isAutoplayBlockingPlatform,
-        isInternalReferrer,
-        isMainVideo,
-        flashingElementsAllowed,
-        isVideoArticle,
-        isFront,
-        isUSContent,
-        isPaidContent,
-    } = iframeConfig;
-
-    const isUsPaidContentVideo =
-        isUSContent &&
-        isPaidContent &&
-        ((isVideoArticle && isMainVideo) || isFront) &&
-        flashingElementsAllowed;
-
-    if (isUsPaidContentVideo) {
-        return {
-            autoplay: isUsPaidContentVideo,
-            mutedOnStart: isUsPaidContentVideo && isAndroid(),
-        };
-    }
-    return {
-        autoplay:
-            ((isVideoArticle && isInternalReferrer && isMainVideo) ||
-                isFront) &&
-            !isAutoplayBlockingPlatform &&
-            flashingElementsAllowed,
-        mutedOnStart: false,
-    };
-};
-
-const getEndSlate = (overlay: HTMLElement): ?Component => {
-    const overlayParent = overlay.parentNode;
-
-    if (overlayParent instanceof HTMLElement) {
-        const dataset = overlayParent.dataset || {};
-        const endSlate = dataset.endSlate;
-
-        if (endSlate) {
-            const component = new Component();
-
-            component.endpoint = endSlate;
-
-            return component;
-        }
-    }
-};
-
-const updateImmersiveButtonPos = (): void => {
-    const player = document.querySelector(
-        '.immersive-main-media__media .youtube-media-atom'
-    );
-    const playerHeight = player ? player.offsetHeight : 0;
-    const headline = document.querySelector(
-        '.immersive-main-media__headline-container'
-    );
-    const headlineHeight = headline ? headline.offsetHeight : 0;
-    const buttonOffset = playerHeight - headlineHeight;
-    const immersiveInterface = document.querySelector(
-        '.youtube-media-atom__immersive-interface'
-    );
-
-    if (immersiveInterface) {
-        immersiveInterface.style.top = `${buttonOffset}px`;
-    }
-};
-
-const muteIFrame = (iframe: HTMLIFrameElement): void => {
-    // Mute iFrame in order to autoplay on android mobile devices
-
-    const iframeSrc = new URL(iframe.src);
-    iframeSrc.searchParams.set('mute', '1');
-    iframe.setAttribute('src', iframeSrc.toString());
-};
-
-const onPlayerReady = (
-    atomId: string,
-    uniqueAtomId: string,
-    iframeId: string,
-    overlay: ?HTMLElement,
-    event: YoutubePlayerEvent
-): void => {
-    const iframe = ((document.getElementById(
-        iframeId
-    ): any): HTMLIFrameElement);
-
-    if (!iframe) {
-        return;
-    }
-
-    iframes.push(iframe);
-
-    const youtubePlayer = event.target;
-    const youtubeId = getYoutubeIdFromUrl(youtubePlayer.getVideoUrl());
-    const duration = youtubePlayer.getDuration();
-
-    players[uniqueAtomId] = {
-        iframe,
-        atomId,
-        youtubeId,
-        duration,
-        youtubePlayer,
-        paused: false,
-        playing: false,
-        pendingTrackingCalls: [25, 50, 75],
-    };
-
-    const iFrameBehaviourConfig = getIFrameBehaviourConfig(iframe);
-    const iFrameBehaviour = getIFrameBehaviour(iFrameBehaviourConfig);
-    if (iFrameBehaviour.mutedOnStart) {
-        muteIFrame(iframe);
-    }
-    if (iFrameBehaviour.autoplay) {
-        event.target.playVideo();
-    }
-
-    if (overlay) {
-        players[uniqueAtomId].overlay = overlay;
-
-        if (
-            !!config.get('page.section') &&
-            isBreakpoint({
-                min: 'desktop',
-            })
-        ) {
-            const endSlate = getEndSlate(overlay);
-
-            if (endSlate) {
-                players[uniqueAtomId].endSlate = endSlate;
-            }
-        }
-    }
-
-    if (iframe.closest('.immersive-main-media__media')) {
-        updateImmersiveButtonPos();
-
-        window.addEventListener(
-            'resize',
-            debounce(updateImmersiveButtonPos.bind(null), 200)
-        );
-    }
-};
-
-const isAnyPlayerPlaying = (): boolean =>
-    Object.keys(players)
-        .map(key => players[key])
-        .filter((p: AtomPlayer): boolean => p.playing).length > 0;
-
-const triggerVideoStateEvent = (isPlaying: boolean): void => {
-    if (isPlaying) {
-        const videoPlaying = new Event('videoPlaying');
-        document.dispatchEvent(videoPlaying);
-    } else {
-        // Use videoEnded until tracker-js updated to videoStopped.
-        const videoStopped = new Event('videoEnded');
-        document.dispatchEvent(videoStopped);
-    }
-};
-
-const onPlayerStateChange = (
-    atomId: string,
-    event: YoutubePlayerEvent
-): void => {
-    const stateId = event.data;
-
-    const stateKey = Object.keys(STATES).find(
-        key => stateId === window.YT.PlayerState[key]
-    );
-
-    if (stateKey) {
-        STATES[stateKey](atomId);
-        triggerVideoStateEvent(isAnyPlayerPlaying());
-    }
-};
-
-const getUniqueAtomId = (atomId: string): string =>
-    `${atomId}/${Math.random()
-        .toString(36)
-        .substr(2, 9)}`;
-
-const initYoutubePlayerForElem = (el: ?HTMLElement): void => {
-    fastdom.measure(() => {
-        if (!el) return;
-
-        const iframe = el.querySelector('.youtube-media-atom__iframe');
-
-        if (!iframe) {
-            return;
-        }
-
-        const iframeId = iframe.id;
-
-        const atomId = el.getAttribute('data-media-atom-id') || '';
-        /**
-         * atomId is a unique key we use for in the "players" object.
-         * Because the same atomId could exist multipe times we need to make
-         * this key unique.
-         * */
-        const uniqueAtomId = getUniqueAtomId(atomId);
-
-        el.setAttribute('data-unique-atom-id', uniqueAtomId);
-
-        const overlay = el.querySelector('.youtube-media-atom__overlay');
-
-        const channelId = el.getAttribute('data-channel-id') || '';
-
-        initYoutubeEvents(atomId);
-
-        initYoutubePlayer(
-            iframe,
-            {
-                onPlayerReady: (event: YoutubePlayerEvent) => {
-                    onPlayerReady(
-                        atomId,
-                        uniqueAtomId,
-                        iframeId,
-                        overlay,
-                        event
-                    );
-                },
-                onPlayerStateChange: (event: YoutubePlayerEvent) => {
-                    onPlayerStateChange(uniqueAtomId, event);
-                },
-            },
-            iframe.dataset.assetId,
-            channelId
-        );
-    });
-};
-
-const checkElemForVideo = (elem: ?HTMLElement): void => {
-    if (!elem) return;
-
-    fastdom.measure(() => {
-        $('.youtube-media-atom:not(.no-player)', elem).each(el => {
-            const overlay = el.querySelector('.youtube-media-atom__overlay');
-
-            if (config.get('page.isFront')) {
-                overlay.addEventListener('click', () => {
-                    initYoutubePlayerForElem(el);
-                });
-            } else {
-                initYoutubePlayerForElem(el);
-            }
-        });
-    });
-};
-
-export const checkElemsForVideos = (elems: ?Array<HTMLElement>): void => {
-    if (elems && elems.length) {
-        elems.forEach(checkElemForVideo);
-    } else {
-        checkElemForVideo(document.body);
-    }
-};
-
-export const onVideoContainerNavigation = (atomId: string): void => {
-    const player = players[atomId];
-    if (player) {
-        player.youtubePlayer.pauseVideo();
-    }
-};
-
-export const _ = {
-    muteIFrame,
-    getIFrameBehaviour,
-    getIFrameBehaviourConfig,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube.spec.js
deleted file mode 100644
index 66492cef9be..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/atoms/youtube.spec.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/atoms/youtube.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { _, checkElemsForVideos } from 'common/modules/atoms/youtube';
-import { isAndroid as _isAndroid, isIOS as _isIOS } from 'lib/detect';
-import { isOn as _isOn } from 'common/modules/accessibility/main';
-import config from 'lib/config';
-
-const { muteIFrame, getIFrameBehaviour, getIFrameBehaviourConfig } = _;
-
-const isAndroid: any = _isAndroid;
-const isIOS: any = _isIOS;
-const accessibilityIsOn: any = _isOn;
-
-jest.mock('lib/detect', () => {
-    // $FlowFixMe property requireActual is actually not missing Flow.
-    const original = jest.requireActual('lib/detect');
-    return {
-        ...original,
-        isAndroid: jest.fn(),
-        isIOS: jest.fn(),
-    };
-});
-
-jest.mock('common/modules/accessibility/main', () => {
-    // $FlowFixMe property requireActual is actually not missing Flow.
-    const original = jest.requireActual('common/modules/accessibility/main');
-    return {
-        ...original,
-        isOn: jest.fn(),
-    };
-});
-
-jest.mock('common/modules/atoms/youtube-player', () => ({
-    initYoutubePlayer: jest.fn(() => null),
-}));
-
-jest.mock('common/modules/atoms/youtube-tracking', () => ({
-    initYoutubeEvents: jest.fn(() => null),
-    trackYoutubeEvents: jest.fn(() => null),
-}));
-
-jest.mock('lib/report-error', () => jest.fn());
-
-describe('youtube', () => {
-    it('assigns an atom a unique ID', () => {
-        const atomId = 'atomA';
-        const assetId = 'assetC';
-        if (document.body) {
-            document.body.innerHTML = `<div data-media-atom-id="${atomId}" class="u-responsive-ratio u-responsive-ratio--hd youtube-media-atom"><div id="youtube-${assetId}" class="youtube-media-atom__iframe"></div></div>`;
-        }
-
-        checkElemsForVideos();
-
-        if (document.body) {
-            const atom = document.querySelector('.youtube-media-atom');
-
-            expect(atom).toBeDefined();
-
-            if (atom) {
-                expect(atom.getAttribute('data-unique-atom-id')).toBeDefined();
-            }
-        }
-    });
-
-    it('does not try to replace link to a video page with a player', () => {
-        const atomId = 'atomA';
-
-        const div = `<div data-media-atom-id="${atomId}" class="no-player u-responsive-ratio youtube-media-atom"><div class="vjs-big-play-button youtube-media-atom__overlay"><div class="youtube-media-atom__play-button vjs-control-text">Play Video</div></div></div>`;
-
-        if (document.body) {
-            document.body.innerHTML = div;
-        }
-
-        checkElemsForVideos();
-
-        if (document.body) {
-            expect(document.body.innerHTML).toBe(div);
-        }
-    });
-
-    describe('muting iframes to trigger autoplay', () => {
-        it('mutes an iframe by amending the src property if no other URL parameters', () => {
-            const docSrc = 'http://www.example.com/q';
-
-            const div = `<div id="outerDiv"><iframe id="iframeId" src="${docSrc}"></iframe></div>`;
-
-            if (document.body) {
-                document.body.innerHTML = div;
-            }
-
-            const iframe = ((document.getElementById(
-                'iframeId'
-            ): any): HTMLIFrameElement);
-
-            muteIFrame(iframe);
-
-            if (document.body) {
-                expect(iframe.src).toBe('http://www.example.com/q?mute=1');
-            }
-        });
-
-        it('adds a new parameter to mute iframe if parameters already exist', () => {
-            const docSrc = 'http://www.example.com/q?randomParam=abc';
-
-            const div = `<div id="outerDiv"><iframe id="iframeId" src="${docSrc}"></iframe></div>`;
-
-            if (document.body) {
-                document.body.innerHTML = div;
-            }
-
-            const iframe = ((document.getElementById(
-                'iframeId'
-            ): any): HTMLIFrameElement);
-
-            muteIFrame(iframe);
-            if (document.body) {
-                expect(iframe.src).toBe(
-                    'http://www.example.com/q?randomParam=abc&mute=1'
-                );
-            }
-        });
-
-        it("doesn't amend iframe src property if already muted", () => {
-            const docSrc = 'http://www.example.com/q?mute=1';
-
-            const div = `<div id="outerDiv"><iframe id="iframeId" src="${docSrc}"></iframe></div>`;
-
-            if (document.body) {
-                document.body.innerHTML = div;
-            }
-
-            const iframe = ((document.getElementById(
-                'iframeId'
-            ): any): HTMLIFrameElement);
-
-            muteIFrame(iframe);
-
-            if (document.body) {
-                expect(iframe.src).toBe('http://www.example.com/q?mute=1');
-            }
-        });
-    });
-
-    describe(`determining correct youtube iframe behaviour`, () => {
-        it('autoplays muted US paid content videos on Android', () => {
-            isAndroid.mockReturnValue(true);
-            const iFrameBehaviourConfig = {
-                isAutoplayBlockingPlatform: true,
-                isInternalReferrer: true,
-                isMainVideo: true,
-                flashingElementsAllowed: true,
-                isVideoArticle: true,
-                isFront: false,
-                isUSContent: true,
-                isPaidContent: true,
-            };
-            expect(getIFrameBehaviour(iFrameBehaviourConfig)).toEqual({
-                autoplay: true,
-                mutedOnStart: true,
-            });
-        });
-
-        it("doesn't mute US paid content videos on desktop", () => {
-            isAndroid.mockReturnValue(false);
-            const iFrameBehaviourConfig = {
-                isAutoplayBlockingPlatform: false,
-                isInternalReferrer: true,
-                isMainVideo: true,
-                flashingElementsAllowed: true,
-                isVideoArticle: true,
-                isFront: false,
-                isUSContent: true,
-                isPaidContent: true,
-            };
-            expect(getIFrameBehaviour(iFrameBehaviourConfig)).toEqual({
-                autoplay: true,
-                mutedOnStart: false,
-            });
-        });
-
-        it("doesn't mute autoplaying videos on desktop fronts", () => {
-            isAndroid.mockReturnValue(false);
-            const iFrameBehaviourConfig = {
-                isAutoplayBlockingPlatform: false,
-                isInternalReferrer: false,
-                isMainVideo: false,
-                flashingElementsAllowed: true,
-                isVideoArticle: false,
-                isFront: true,
-                isUSContent: false,
-                isPaidContent: false,
-            };
-            expect(getIFrameBehaviour(iFrameBehaviourConfig)).toEqual({
-                autoplay: true,
-                mutedOnStart: false,
-            });
-        });
-
-        it("doesn't autoplay videos when flashing elements are disallowed", () => {
-            isAndroid.mockReturnValue(false);
-            const iFrameBehaviourConfig = {
-                isAutoplayBlockingPlatform: false,
-                isInternalReferrer: false,
-                isMainVideo: false,
-                flashingElementsAllowed: false,
-                isVideoArticle: false,
-                isFront: true,
-                isUSContent: false,
-                isPaidContent: false,
-            };
-            expect(getIFrameBehaviour(iFrameBehaviourConfig)).toEqual({
-                autoplay: false,
-                mutedOnStart: false,
-            });
-        });
-    });
-
-    describe(`getting correct iframe behaviour config`, () => {
-        let docSrc;
-        let div;
-        let iframe;
-
-        beforeEach(() => {
-            /* eslint-disable guardian-frontend/global-config */
-            Object.assign(window.guardian.config, {
-                page: {
-                    isDev: false,
-                    host: 'https://www.theguardian.com',
-                    isFront: true,
-                    isPaidContent: true,
-                },
-            });
-
-            docSrc = 'http://www.example.com/q?mute=1';
-            div = `<div id="outerDiv"><iframe id="iframeId" src="${docSrc}"></iframe></div>`;
-            if (document.body) {
-                document.body.innerHTML = div;
-            }
-            iframe = ((document.getElementById(
-                'iframeId'
-            ): any): HTMLIFrameElement);
-        });
-
-        it('is Autoplay blocking platform if isAndroid', () => {
-            isAndroid.mockReturnValue(true);
-            isIOS.mockReturnValue(false);
-            const iFrameBehaviourConfig = getIFrameBehaviourConfig(iframe);
-            expect(iFrameBehaviourConfig.isAutoplayBlockingPlatform).toBe(true);
-        });
-
-        it('is Autoplay blocking platform if isIOS', () => {
-            isAndroid.mockReturnValue(false);
-            isIOS.mockReturnValue(true);
-            const iFrameBehaviourConfig = getIFrameBehaviourConfig(iframe);
-            expect(iFrameBehaviourConfig.isAutoplayBlockingPlatform).toBe(true);
-        });
-
-        it('correctly identifies Internal Referrer', () => {
-            // $FlowFixMe jest.spyon can take a third accesstype argument since jest 22.1.0
-            jest.spyOn(global.document, 'referrer', 'get').mockReturnValueOnce(
-                'https://www.theguardian.com'
-            );
-            expect(getIFrameBehaviourConfig(iframe).isInternalReferrer).toBe(
-                true
-            );
-            // $FlowFixMe jest.spyon can take a third accesstype argument since jest 22.1.0
-            jest.spyOn(global.document, 'referrer', 'get').mockReturnValueOnce(
-                'https://www.garbage-site.com'
-            );
-            expect(getIFrameBehaviourConfig(iframe).isInternalReferrer).toBe(
-                false
-            );
-        });
-
-        it('correctly identifies it isMainVideo', () => {
-            // Return true once to mock "'figure[data-component="main video"]'" bring present
-            jest.spyOn(iframe, 'closest').mockReturnValueOnce(true);
-            expect(getIFrameBehaviourConfig(iframe).isMainVideo).toBe(true);
-            // Expect false as we no longer have specified node in the mock.
-            expect(getIFrameBehaviourConfig(iframe).isMainVideo).toBe(false);
-        });
-
-        it('correctly configures for flashing element preferences', () => {
-            accessibilityIsOn.mockReturnValueOnce(true);
-            expect(
-                getIFrameBehaviourConfig(iframe).flashingElementsAllowed
-            ).toBe(true);
-            accessibilityIsOn.mockReturnValueOnce(false);
-            expect(
-                getIFrameBehaviourConfig(iframe).flashingElementsAllowed
-            ).toBe(false);
-        });
-
-        it('correctly identify isFront', () => {
-            expect(getIFrameBehaviourConfig(iframe).isFront).toBe(true);
-            config.set('page.isFront', false);
-            expect(getIFrameBehaviourConfig(iframe).isVideoArticle).toBe(false);
-        });
-
-        it('correctly identify isVideoArticle', () => {
-            expect(getIFrameBehaviourConfig(iframe).isVideoArticle).toBe(false);
-            config.set('page.contentType', 'video');
-            expect(getIFrameBehaviourConfig(iframe).isVideoArticle).toBe(true);
-        });
-
-        it('correctly identify isUSContent', () => {
-            expect(getIFrameBehaviourConfig(iframe).isUSContent).toBe(false);
-            config.set('page.productionOffice', 'us');
-            expect(getIFrameBehaviourConfig(iframe).isUSContent).toBe(true);
-        });
-
-        it('correctly identify isPaidContent', () => {
-            expect(getIFrameBehaviourConfig(iframe).isPaidContent).toBe(true);
-            config.set('page.isPaidContent', false);
-            expect(getIFrameBehaviourConfig(iframe).isPaidContent).toBe(false);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/AudioPlayer.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/AudioPlayer.js
deleted file mode 100644
index 88e119fe941..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/AudioPlayer.js
+++ /dev/null
@@ -1,573 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/AudioPlayer.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable no-nested-ternary */
-import React, { Component } from 'react';
-import styled from '@emotion/styled';
-import palette from '@guardian/dotcom-rendering/packages/pasteup/palette';
-import {
-    leftCol,
-    wide,
-} from '@guardian/dotcom-rendering/packages/pasteup/breakpoints';
-import { isIOS, isAndroid } from 'lib/detect';
-
-import pauseBtn from 'svgs/journalism/audio-player/pause.svg';
-import playBtn from 'svgs/journalism/audio-player/play.svg';
-import volumeOn from 'svgs/journalism/audio-player/sound-on.svg'; // eslint-disable-line
-import volumeOff from 'svgs/journalism/audio-player/sound-off.svg'; // eslint-disable-line
-import fastBackward from 'svgs/journalism/audio-player/backward.svg';
-import fastForward from 'svgs/journalism/audio-player/forward.svg';
-
-import waveW from 'svgs/journalism/audio-player/wave-wide.svg';
-import { registerOphanListeners } from './utils';
-
-import Time from './Time';
-
-// $FlowFixMe
-const AudioGrid = styled('div')({
-    display: 'grid',
-    backgroundColor: palette.neutral[1],
-    color: palette.neutral[5],
-    gridTemplateRows:
-        isIOS() || isAndroid() ? '30px 40px 120px' : '30px 40px 120px 40px',
-    gridTemplateAreas: `"currentTime duration"
-         "wave wave"
-         "controls controls"
-         ". volume"
-        `,
-
-    [leftCol]: {
-        position: 'relative',
-        gridTemplateColumns: '90px 1fr 90px',
-        gridTemplateRows: '50px 110px',
-        gridTemplateAreas: `"currentTime wave duration"
-        "controls controls controls"`,
-    },
-});
-
-const Button = styled('button')({
-    background: 'none',
-    border: 0,
-    cursor: 'pointer',
-    margin: 0,
-    ':focus': {
-        outline: 'none', // ಠ_ಠ
-    },
-    padding: 0,
-
-    ':not(:disabled):hover svg': {
-        opacity: 0.8,
-    },
-});
-
-const PlayButton = styled(Button)({
-    margin: '0 50px',
-
-    svg: {
-        width: '70px',
-        height: '70px',
-    },
-
-    [leftCol]: {
-        margin: '0 60px',
-        svg: {
-            width: '60px',
-            height: '60px',
-        },
-    },
-});
-
-const JumpButton = styled(Button)(({ playing }) => ({
-    svg: {
-        width: '31px',
-        height: '30px',
-    },
-
-    path: {
-        fill: playing ? '#ffffff' : '#767676',
-    },
-
-    '.arrow-line': {
-        fill: 'none',
-        stroke: playing ? '#ffffff' : '#767676',
-    },
-
-    [leftCol]: {
-        padding: 0,
-        svg: {
-            width: '31px',
-            height: '30px',
-        },
-    },
-
-    [wide]: {
-        padding: 0,
-        svg: {
-            width: '31px',
-            height: '30px',
-        },
-    },
-}));
-
-const VolumeButton = styled(Button)(({ isActive }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '38px',
-
-    svg: {
-        fill: isActive ? '#ffe500' : '#767676',
-        width: '23px',
-        height: '18px',
-    },
-}));
-
-const TimeContainer = styled('div')(({ area }) => ({
-    [area === 'currentTime' ? 'paddingLeft' : 'paddingRight']: '10px',
-    gridArea: area,
-    paddingTop: '4px',
-    fontFamily: 'Guardian Text Sans Web',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: area === 'duration' ? 'flex-end' : 'flex-start',
-    backgroundColor: '#333333',
-}));
-
-const Controls = styled('div')({
-    gridArea: 'controls',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '60px 0',
-});
-
-const WaveAndTrack = styled('div')({
-    gridArea: 'wave',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    cursor: 'pointer',
-    maxWidth: '100%',
-    backgroundColor: '#333333',
-    borderTop: '1px solid #767676',
-    position: 'relative',
-
-    [leftCol]: {
-        background: '#4a4a4a',
-        borderTop: '0',
-    },
-});
-
-const FakeWave = styled('div')({
-    height: '100%',
-    paddingLeft: '10px',
-    paddingRight: '10px',
-
-    '.wave-holder': {
-        height: '100%',
-    },
-
-    '.inline-wave-wide': {
-        display: 'block',
-        height: '100%',
-    },
-
-    svg: {
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-    },
-
-    '#WaveRectangleBg': {
-        fill: 'rgba(255,255,255,.2)',
-    },
-
-    '#WaveRectangleBuffered': {
-        fill: 'rgba(255,255,255, .5)',
-        width: '100px',
-    },
-
-    '#WaveRectangleActive': {
-        fill: 'rgba(255,255,255, 1)',
-        width: '100px',
-    },
-
-    [leftCol]: {
-        paddingLeft: '0',
-        paddingRight: '0',
-    },
-});
-
-const ScrubberButton = styled(Button)(({ position, hovering, grabbing }) => ({
-    position: 'absolute',
-    background: '#ffe500',
-    width: '4px',
-    height: '40px',
-    transform: `translate(${10 + position}px,0)`,
-    cursor: grabbing ? 'grabbing' : hovering ? 'grab' : 'pointer',
-
-    ':hover': {
-        transform: `translate(${10 + position}px,0) scaleX(1.6)`,
-    },
-
-    [leftCol]: {
-        height: '50px',
-        transform: `translate(${position}px,0)`,
-
-        ':hover': {
-            transform: `translate(${position}px,0) scaleX(1.6)`,
-        },
-    },
-}));
-
-const Volume = styled('div')({
-    gridArea: 'volume',
-    display: 'flex',
-    alignItems: 'stretch',
-    justifyContent: 'flex-end',
-    svg: {
-        width: '23px',
-        height: '18px',
-    },
-    span: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        paddingLeft: '5px',
-        paddingRight: '5px',
-    },
-
-    'span + span': {
-        borderLeft: '1px solid #767676',
-    },
-
-    [leftCol]: {
-        position: 'absolute',
-        bottom: '0',
-        right: '0',
-        height: '40px',
-    },
-
-    'button + button': {
-        borderLeft: '1px solid #767676',
-    },
-});
-
-type Props = {
-    sourceUrl: string,
-    mediaId: string,
-    duration: string,
-};
-
-type State = {
-    playing: boolean,
-    muted: boolean,
-    currentTime: number,
-    duration: number,
-    currentOffsetPx: number,
-    hasBeenPlayed: boolean,
-    waveX: number,
-    waveWidthPx: number,
-    hovering: boolean,
-    grabbing: boolean,
-};
-
-export class AudioPlayer extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            playing: false,
-            muted: false,
-            currentTime: 0,
-            currentOffsetPx: 0,
-            duration: parseInt(this.props.duration, 10),
-            hasBeenPlayed: false,
-            waveX: 0,
-            waveWidthPx: 0,
-            hovering: false,
-            grabbing: false,
-        };
-    }
-
-    componentDidMount() {
-        this.audio.addEventListener('timeupdate', this.onTimeUpdate);
-        // this should fire on Firefox
-        this.audio.addEventListener('ended', this.resetAudio);
-        this.audio.addEventListener('progress', this.buffer);
-
-        registerOphanListeners(this.audio);
-
-        if (Number.isNaN(this.audio.duration)) {
-            this.audio.addEventListener('durationchange', this.ready, {
-                once: true,
-            });
-        } else {
-            this.ready();
-        }
-    }
-
-    onTimeUpdate = () => {
-        const percentPlayed = this.audio.currentTime / this.state.duration;
-
-        // pause when it gets to the end
-        if (this.audio.currentTime >= this.state.duration) {
-            this.resetAudio();
-        } else if (!this.state.grabbing) {
-            const currentOffsetPx = this.state.waveWidthPx * percentPlayed;
-            this.wave.setAttribute('width', currentOffsetPx.toString());
-            this.setState({
-                currentTime: this.audio.currentTime,
-                currentOffsetPx,
-            });
-        }
-    };
-
-    setAudio = (el: ?HTMLAudioElement) => {
-        if (el) {
-            this.audio = el;
-        }
-        const wave = document.getElementById('WaveCutOff-rect');
-        const waveBuffered = document.getElementById('WaveCutOffBuffered-rect');
-        if (wave && waveBuffered) {
-            this.wave = wave;
-            this.waveBuffered = waveBuffered;
-        }
-    };
-
-    setGeometry = (el: ?HTMLElement) => {
-        if (el) {
-            const css = getComputedStyle(el);
-            const rect = el.getBoundingClientRect();
-            const waveWidthPx =
-                el.clientWidth -
-                parseInt(css.paddingLeft, 10) -
-                parseInt(css.paddingRight, 10);
-            Array.from(el.getElementsByTagName('svg'))
-                .slice(0, 1)
-                .forEach(svg => {
-                    svg.setAttribute('viewBox', `0 0 ${waveWidthPx} 84`);
-                });
-            this.setState({
-                waveX: rect.left,
-                waveWidthPx,
-            });
-        }
-    };
-
-    buffer = () => {
-        if (this.audio.buffered.length > 0) {
-            const buffered = this.audio.buffered.end(0);
-            this.waveBuffered.setAttribute(
-                'width',
-                (
-                    (buffered / this.state.duration) *
-                    this.state.waveWidthPx
-                ).toString()
-            );
-        }
-    };
-
-    resetAudio = () => {
-        this.setState({ playing: false });
-        this.audio.pause();
-    };
-
-    audio: HTMLAudioElement;
-    wave: Element;
-    waveBuffered: Element;
-
-    ready = () => {
-        this.setState({ duration: this.audio.duration });
-    };
-
-    play = () => {
-        this.setState(
-            {
-                playing: !this.state.playing,
-            },
-            () => {
-                if (this.state.playing) {
-                    this.audio.play();
-                } else {
-                    this.audio.pause();
-                }
-            }
-        );
-        if (!this.state.hasBeenPlayed) {
-            this.setState({ hasBeenPlayed: true });
-        }
-    };
-
-    seek = (e: any) => {
-        if (!this.state.grabbing) {
-            const currentOffsetPx = e.nativeEvent.offsetX;
-            const currentTime =
-                (currentOffsetPx / this.state.waveWidthPx) *
-                this.state.duration;
-            this.audio.currentTime = currentTime;
-            this.wave.setAttribute('width', currentOffsetPx.toString());
-            this.setState({ currentTime, currentOffsetPx });
-        }
-    };
-
-    updatePlayerTime = (currTime: number) => {
-        this.audio.currentTime = currTime;
-
-        const currentOffsetPx =
-            (currTime / this.state.duration) * this.state.waveWidthPx;
-        this.wave.setAttribute('width', currentOffsetPx.toString());
-        this.setState({
-            currentTime: currTime,
-            currentOffsetPx,
-        });
-    };
-
-    forward = () => {
-        const chosenTime = Math.min(
-            this.state.currentTime + 15,
-            this.state.duration
-        );
-        this.updatePlayerTime(chosenTime);
-    };
-
-    backward = () => {
-        const chosenTime = Math.max(this.state.currentTime - 15, 0);
-        this.updatePlayerTime(chosenTime);
-    };
-
-    mute = () => {
-        this.setState({ muted: true });
-        this.audio.volume = 0;
-    };
-
-    sound = () => {
-        this.setState({ muted: false });
-        this.audio.volume = 1;
-    };
-
-    hovering = (hovering: boolean) => () => {
-        this.setState({ hovering });
-    };
-
-    grabbing = (grabbing: boolean) => () => {
-        if (this.state.hovering || !grabbing) {
-            this.setState({ grabbing }, () => {
-                if (!this.state.grabbing) {
-                    this.audio.currentTime = this.state.currentTime;
-                }
-            });
-        }
-    };
-
-    scrub = (e: any) => {
-        if (this.state.grabbing) {
-            const currentOffsetPx = Math.min(
-                this.state.waveWidthPx,
-                Math.max(0, e.nativeEvent.screenX - this.state.waveX)
-            );
-
-            const currentTime =
-                (currentOffsetPx / this.state.waveWidthPx) *
-                this.state.duration;
-
-            this.setState({ currentTime, currentOffsetPx }, () => {
-                this.wave.setAttribute('width', currentOffsetPx.toString());
-            });
-        }
-    };
-
-    render() {
-        return (
-            <AudioGrid
-                onMouseDown={this.grabbing(true)}
-                onMouseUp={this.grabbing(false)}
-                onMouseMove={this.scrub}>
-                {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-                <audio
-                    ref={this.setAudio}
-                    data-media-id={this.props.mediaId}
-                    preload="none">
-                    <source src={this.props.sourceUrl} type="audio/mpeg" />
-                </audio>
-                <TimeContainer area="currentTime">
-                    <Time t={this.state.currentTime} />
-                </TimeContainer>
-                <TimeContainer area="duration">
-                    <Time t={this.state.duration} />
-                </TimeContainer>
-                <WaveAndTrack>
-                    <FakeWave ref={this.setGeometry} onClick={this.seek}>
-                        <div
-                            className="wave-holder"
-                            dangerouslySetInnerHTML={{ __html: waveW.markup }}
-                        />
-                    </FakeWave>
-                    <ScrubberButton
-                        onMouseEnter={this.hovering(true)}
-                        onMouseLeave={this.hovering(false)}
-                        hovering={this.state.hovering}
-                        grabbing={this.state.grabbing}
-                        position={this.state.currentOffsetPx}
-                    />
-                </WaveAndTrack>
-                <Controls>
-                    <JumpButton
-                        playing={this.state.playing}
-                        onClick={this.backward}
-                        disabled={!this.state.playing}
-                        dangerouslySetInnerHTML={{
-                            __html: fastBackward.markup,
-                        }}
-                    />
-                    <PlayButton
-                        onClick={this.play}
-                        dangerouslySetInnerHTML={{
-                            __html: this.state.playing
-                                ? pauseBtn.markup
-                                : playBtn.markup,
-                        }}
-                    />
-                    <JumpButton
-                        playing={this.state.playing}
-                        onClick={this.forward}
-                        disabled={!this.state.playing}>
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: fastForward.markup,
-                            }}
-                        />
-                    </JumpButton>
-                </Controls>
-                {!(isIOS() || isAndroid()) ? (
-                    <Volume>
-                        <VolumeButton
-                            isVolume
-                            isActive={!this.state.muted}
-                            onClick={this.sound}
-                            dangerouslySetInnerHTML={{
-                                __html: volumeOn.markup,
-                            }}
-                        />
-                        <VolumeButton
-                            isVolume
-                            isActive={this.state.muted}
-                            onClick={this.mute}
-                            dangerouslySetInnerHTML={{
-                                __html: volumeOff.markup,
-                            }}
-                        />
-                    </Volume>
-                ) : null}
-            </AudioGrid>
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/AuralAid.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/AuralAid.js
deleted file mode 100644
index d956d4dad79..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/AuralAid.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/AuralAid.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'react';
-import styled from '@emotion/styled';
-
-// $FlowFixMe
-const VisuallyHidden = styled('span')({
-    height: '1px',
-    overflow: 'hidden',
-    position: 'absolute',
-    top: '-10px',
-    width: '1px',
-});
-
-type Props = {
-    text: string,
-};
-
-export default function({ text }: Props) {
-    return <VisuallyHidden>{text}</VisuallyHidden>;
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/ProgressBar.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/ProgressBar.js
deleted file mode 100644
index ce969d8b7a0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/ProgressBar.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/ProgressBar.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'react';
-import styled from '@emotion/styled';
-
-import AuralAid from './AuralAid';
-import Slider from './Slider';
-
-// $FlowFixMe
-const Progress = styled('div')(
-    ({ backgroundColor, height, highlightColor, barContext }) => ({
-        alignItems: 'stretch',
-        backgroundColor,
-        backgroundClip: 'content-box',
-        display: 'flex',
-        height: `${height + 4 * 2}px`,
-        padding: barContext === 'volume' ? '4px' : '4px 0px',
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        position: 'relative',
-        '&:hover': {
-            '.track-foreground': {
-                backgroundColor: highlightColor,
-            },
-        },
-    })
-);
-
-const Track = styled('div')(({ backgroundColor, width }) => ({
-    width,
-    backgroundColor,
-}));
-
-const pct = n => `${n}%`;
-
-type Props = {
-    value: number,
-    onChange: number => void,
-    formattedValue: string,
-    barHeight: number,
-    trackColor: string,
-    backgroundColor: string,
-    barContext: string,
-    highlightColor: string,
-};
-
-type State = {
-    dragging: boolean,
-    draggingValue?: number,
-    value: number,
-    position: number,
-    width: number,
-    left: number,
-};
-
-export default class ProgressBar extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.onChange = props.onChange;
-        this.state = {
-            dragging: false,
-            value: props.value,
-            position: 0,
-            width: 0,
-            left: 0,
-        };
-    }
-
-    componentDidMount() {
-        const { width, left } = this.element.getBoundingClientRect();
-        const position = (this.state.value * width) / 100;
-        // eslint-disable-next-line react/no-did-mount-set-state
-        this.setState({ width, left, position });
-    }
-
-    componentDidUpdate(prevProps: Props) {
-        if (this.props.value !== prevProps.value) {
-            const position = (this.props.value * this.state.width) / 100;
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({ position });
-        }
-    }
-
-    onChange: number => void;
-
-    getElement = (el: ?HTMLElement) => {
-        if (el) {
-            this.element = el;
-        }
-    };
-
-    element: HTMLElement;
-
-    start = (e: MouseEvent) => {
-        const position = e.clientX - this.state.left;
-        const value = (position * 100) / this.state.width;
-        this.setState({ dragging: true, position, value });
-        window.addEventListener('mousemove', this.update);
-        window.addEventListener('mouseup', this.stop, { once: true });
-    };
-
-    stop = () => {
-        this.setState({ dragging: false });
-        this.onChange(this.state.value);
-        window.removeEventListener('mousemove', this.update);
-    };
-
-    update = (e: MouseEvent) => {
-        const rawPosition = e.clientX - this.state.left;
-        const position = this.cleanUpPosition(rawPosition);
-        const value = (position * 100) / this.state.width;
-        this.setState({ value, position });
-    };
-
-    cleanUpPosition = (num: number) => {
-        const position = Math.min(this.state.width, num);
-        return Math.max(0, position);
-    };
-
-    render() {
-        return (
-            <Progress
-                ref={this.getElement}
-                backgroundColor={this.props.backgroundColor}
-                highlightColor={this.props.highlightColor}
-                barContext={this.props.barContext}
-                height={this.props.barHeight}
-                onMouseDown={this.start}
-                role="progressbar"
-                aria-valuenow={
-                    this.state.dragging
-                        ? this.state.draggingValue
-                        : this.props.value
-                }
-                aria-valuemin="0"
-                aria-valuemax="100">
-                <Track
-                    className="track-foreground"
-                    backgroundColor={this.props.trackColor}
-                    width={pct(this.props.value)}
-                />
-                <AuralAid text={this.props.formattedValue} />
-                <Slider
-                    min={0}
-                    max={this.state.width}
-                    value={this.state.position}
-                />
-            </Progress>
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/Slider.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/Slider.js
deleted file mode 100644
index 635e7d2f719..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/Slider.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/Slider.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React from 'react';
-import styled from '@emotion/styled';
-
-// $FlowFixMe
-const Scrubber = styled('div')(({ left }) => ({
-    backgroundColor: '#ffe500',
-    height: '50px',
-    left: `${left}px`,
-    position: 'relative',
-    top: '0',
-    transform: 'translate(-50%, -76%)',
-    width: '5px',
-}));
-
-type Props = {
-    min: number,
-    max: number,
-    value: number,
-};
-
-export default function Slider({ min, max, value }: Props) {
-    return (
-        <Scrubber
-            left={value}
-            role="slider"
-            aria-valuenow={value}
-            aria-valuemin={min}
-            aria-valuemax={max}
-        />
-    );
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/Time.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/Time.js
deleted file mode 100644
index e5731d97b47..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/Time.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/Time.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'react';
-import { formatTime } from './utils';
-
-type Props = {
-    t: number,
-};
-
-export default function Time({ t }: Props) {
-    return <span>{formatTime(t)}</span>;
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/index.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/index.js
deleted file mode 100644
index 7a8e78fe190..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/index.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/index.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import {
-    onConsentChange,
-    getConsentFor,
-} from '@guardian/consent-management-platform';
-import { isAdFreeUser } from 'common/modules/commercial/user-features';
-import config from 'lib/config';
-import { AudioPlayer } from './AudioPlayer';
-import { sendToOphan, registerOphanListeners } from './utils';
-
-type Props = {
-    source: string,
-    mediaId: string,
-    duration: string,
-};
-
-type State = {
-    acastConsent: boolean,
-};
-
-class AudioContainer extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            acastConsent: false,
-        };
-    }
-
-    componentDidMount() {
-        onConsentChange(consentState => {
-            const acast = getConsentFor('acast', consentState);
-            this.setState({
-                acastConsent: acast,
-            });
-        });
-    }
-
-    render() {
-        const acastEnabled = config.get('switches.acast');
-        const isPodcast = config.get('page.isPodcast');
-        const sourceUrl =
-            acastEnabled &&
-            isPodcast &&
-            this.state.acastConsent &&
-            !isAdFreeUser()
-                ? this.props.source.replace(
-                      'https://',
-                      'https://flex.acast.com/'
-                  )
-                : this.props.source;
-
-        return (
-            <AudioPlayer
-                sourceUrl={sourceUrl}
-                mediaId={this.props.mediaId}
-                duration={this.props.duration}
-            />
-        );
-    }
-}
-
-const getPillar = pillarClass => {
-    const pillarMatches = /pillar-([a-z]+)/g.exec(pillarClass);
-    const pillar = pillarMatches ? pillarMatches[1].toLowerCase() : 'news';
-    if (pillar === 'books' || pillar === 'arts') return 'culture';
-    return pillar;
-};
-
-const supportsCSSGrid =
-    window.CSS && window.CSS.supports && window.CSS.supports('display', 'grid');
-
-const init = (): void => {
-    const placeholder: ?HTMLElement = document.getElementById(
-        'audio-component-container'
-    );
-    const article = document.getElementsByTagName('article')[0];
-
-    if (placeholder && article) {
-        const source = placeholder.dataset.source;
-        const mediaId = placeholder.dataset.mediaId;
-        const downloadUrl = placeholder.dataset.downloadUrl;
-        const duration = placeholder.dataset.duration;
-
-        sendToOphan(mediaId, 'ready');
-
-        const pillarClassName = Array.from(article.classList).filter(x =>
-            x.includes('pillar')
-        )[0];
-        const pillar = getPillar(pillarClassName);
-
-        render(
-            supportsCSSGrid ? (
-                <AudioContainer
-                    source={source}
-                    mediaId={mediaId}
-                    downloadUrl={downloadUrl}
-                    duration={duration}
-                    pillar={pillar}
-                />
-            ) : (
-                <audio
-                    src={source}
-                    controls
-                    data-media-id={mediaId}
-                    ref={el => {
-                        if (el) registerOphanListeners(el);
-                    }}>
-                    <track
-                        src={source}
-                        kind="captions"
-                        srcLang="en"
-                        label="English"
-                    />
-                    <p>
-                        Sorry your browser does not support audio, here is
-                        <a href={source}>a link to the audio</a> instead.
-                    </p>
-                </audio>
-            ),
-            placeholder
-        );
-    }
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/onward-container.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/onward-container.js
deleted file mode 100644
index 692d8052acc..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/onward-container.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/onward-container.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { Component } from 'common/modules/component';
-
-const createComponent = (
-    el: HTMLElement,
-    endpoint: string,
-    manipulationType: string
-): Promise<void> => {
-    const component = new Component();
-
-    component.manipulationType = manipulationType;
-    component.endpoint = `${endpoint}?shortUrl=${config.get('page.shortUrl')}`;
-    el.innerHTML = '';
-
-    return component.fetch(el, 'html');
-};
-
-const onwardAudio = (el: HTMLElement) => {
-    if (config.get('page.seriesId')) {
-        const manipulationType = 'append';
-        const endpoint = `/audio/series/${config.get('page.seriesId')}.json`;
-
-        createComponent(el, endpoint, manipulationType);
-    }
-};
-
-export { onwardAudio };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/audio/utils.js b/static/src/javascripts.flow.archive/projects/common/modules/audio/utils.js
deleted file mode 100644
index 43fac1bef96..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/audio/utils.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/audio/utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-// eslint disable:no-use-before-define
-
-import ophan from 'ophan/ng';
-
-const format = (t: number) => t.toFixed(0).padStart(2, '0');
-
-const formatTime = (t: number) => {
-    const second = Math.floor(t % 60);
-    const minute = Math.floor((t % 3600) / 60);
-    const hour = Math.floor(t / 3600);
-    return `${format(hour)}:${format(minute)}:${format(second)}`;
-};
-
-const range = (min: number, max: number) => {
-    const ret = [];
-    let x = min;
-    while (x < max) {
-        ret.push(x);
-        x += 1;
-    }
-    return ret;
-};
-
-const sendToOphan = (id: string, eventName: string) => {
-    ophan.record({
-        audio: {
-            id,
-            eventType: `audio:content:${eventName}`,
-        },
-    });
-};
-
-const monitorPercentPlayed = (
-    player: HTMLMediaElement,
-    marker: number,
-    id: string
-) => {
-    const eventName = marker === 99 ? 'end' : marker.toLocaleString();
-
-    player.addEventListener('timeupdate', function listener(e) {
-        const percentPlayed = Math.round(
-            (player.currentTime / player.duration) * 100
-        );
-        if (percentPlayed >= marker) {
-            sendToOphan(id, eventName);
-            player.removeEventListener(e.type, listener);
-        }
-    });
-};
-
-const registerOphanListeners = (el: HTMLMediaElement): void => {
-    const mediaId = el.getAttribute('data-media-id') || '';
-
-    el.addEventListener(
-        'play',
-        () => {
-            sendToOphan(mediaId, 'play');
-        },
-        { once: true }
-    );
-
-    monitorPercentPlayed(el, 25, mediaId);
-    monitorPercentPlayed(el, 50, mediaId);
-    monitorPercentPlayed(el, 75, mediaId);
-    monitorPercentPlayed(el, 99, mediaId);
-};
-
-export {
-    format,
-    formatTime,
-    range,
-    sendToOphan,
-    monitorPercentPlayed,
-    registerOphanListeners,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/avatar/api.js b/static/src/javascripts.flow.archive/projects/common/modules/avatar/api.js
deleted file mode 100644
index 4f755d28e66..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/avatar/api.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/avatar/api.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { ajax } from 'lib/ajax';
-import config from 'lib/config';
-
-const apiUrl = `${config.get('page.avatarApiUrl')}/v1`;
-const staticUrl = `${config.get('page.avatarImagesUrl')}/user`;
-
-type HttpVerb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-
-const request = (
-    method: HttpVerb,
-    path: string,
-    data?: string | Object
-): Object => {
-    const params = {
-        url: apiUrl + path,
-        type: 'json',
-        data,
-        processData: false,
-        method,
-        crossOrigin: true,
-        withCredentials: true,
-    };
-
-    return ajax(params);
-};
-
-// A user's 'active' avatar is only available to signed-in users as it
-// includes avatars in a pre-mod state.
-const getActive = (): Object => request('GET', '/avatars/user/me/active');
-
-const updateAvatar = (data?: Object): Object =>
-    request('POST', '/avatars', data);
-
-// The deterministic URL always returns an image. If the user has no avatar,
-// a default image is returned.
-const deterministicUrl = (userId: string): string => `${staticUrl}/${userId}`;
-
-export default {
-    request,
-    getActive,
-    updateAvatar,
-    deterministicUrl,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/business/stocks.js b/static/src/javascripts.flow.archive/projects/common/modules/business/stocks.js
deleted file mode 100644
index bfee143e950..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/business/stocks.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/business/stocks.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import reportError from 'lib/report-error';
-import template from 'lodash/template';
-import { inlineSvg } from 'common/views/svgs';
-import stockValueTemplate from 'raw-loader!common/views/business/stock-value.html';
-import stocksTemplate from 'raw-loader!common/views/business/stocks.html';
-
-const isBusinessFront = () =>
-    ['uk/business', 'us/business', 'au/business'].indexOf(
-        config.get('page.pageId')
-    ) !== -1;
-
-const getStocksData = () =>
-    fetchJson('/business-data/stocks.json', {
-        mode: 'cors',
-    }).catch(ex => {
-        reportError(ex, {
-            feature: 'stocks',
-        });
-    });
-
-const deltaString = n => (n > 0 ? `+${n}` : `${n}`);
-
-const renderData = data => {
-    const stockValues = data.stocks
-        .map(stockValue =>
-            template(stockValueTemplate)({
-                name: stockValue.name,
-                deltaClass: `stocks__stock-value--${stockValue.trend}`,
-                price: stockValue.price,
-                change: deltaString(stockValue.change),
-                closed: stockValue.closed
-                    ? '<div class="stocks__closed">closed</div>'
-                    : '',
-                closedInline: stockValue.closed
-                    ? '<div class="stocks__closed--inline">closed</div>'
-                    : '',
-                marketDownIcon: inlineSvg('marketDownIcon', [
-                    'stocks__icon',
-                    'stocks__icon--down',
-                ]),
-                marketUpIcon: inlineSvg('marketUpIcon', [
-                    'stocks__icon',
-                    'stocks__icon--up',
-                ]),
-                marketSameIcon: inlineSvg('marketSameIcon', [
-                    'stocks__icon',
-                    'stocks__icon--same',
-                ]),
-            })
-        )
-        .join('');
-
-    return template(stocksTemplate)({
-        stocks: stockValues,
-    });
-};
-
-export default () => {
-    const $container = $('.js-container--first .js-container__header');
-
-    // Pascal, 23rd March 2020
-    // Marker: 7dde429f00b1
-    // This code is being decommissioned because the end point we are currently using to retrieve the
-    // live data has ceased to be maintained and the business has decided not to move forward with trying
-    // to replace it. I keep the entire frontend and backend logic in place, and just prevent the call
-    // for data retrieval to be made. If one day we get a new data end point, then it will be easy to
-    // display the widget again (this might include updating the code to meet new data schemas).
-    if (false && isBusinessFront() && $container) {
-        getStocksData().then(data => {
-            if (data && data.stocks && data.stocks.length > 0) {
-                $container.append(renderData(data));
-            }
-        });
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/charts/doughnut.js b/static/src/javascripts.flow.archive/projects/common/modules/charts/doughnut.js
deleted file mode 100644
index aaace230a03..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/charts/doughnut.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/charts/doughnut.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- * Inspired by
- * - http://www.chartjs.org/
- * - http://codepen.io/githiro/pen/ICfFE
- * - https://github.com/d3/d3-shape/blob/master/src/arc.js
- */
-import $ from 'lib/$';
-import type { bonzo } from 'bonzo';
-
-const svgEl = (type: string): bonzo =>
-    $.create(document.createElementNS('http://www.w3.org/2000/svg', type));
-
-const translate = (v: Array<number>): string => `translate(${v.toString()})`;
-
-/**
- * @param {Object.<string, *>} data in the format { label: string, value: number, color: HEX }
- * @param {Object.<string, *>} o the options
- * @return {Bonzo} SVG Element
- */
-const Doughnut = (data: Object, o: Object): bonzo => {
-    const obj: Object = Object.assign(
-        {
-            percentCutout: 35,
-            unit: '',
-            showValues: false,
-        },
-        o || {}
-    );
-
-    const w = obj.width;
-    const h = obj.height || w;
-    const radius = Math.min(h / 2, w / 2);
-    const cutoutRadius = radius * (obj.percentCutout / 100);
-
-    const totalValue = data.reduce((a, b) => ({
-        value: a.value + b.value,
-    })).value;
-
-    const halfPI = Math.PI / 2;
-    const doublePI = Math.PI * 2;
-    const c = [w / 2, h / 2];
-
-    const center = {
-        x: w / 2,
-        y: h / 2,
-    };
-
-    const $svg = $.create(
-        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" class="chart chart--doughnut"></svg>'
-    ).attr({
-        width: w,
-        height: h,
-        viewbox: `0 0 ${[w, h].join(' ')}`,
-    });
-
-    // Segments
-    let segmentAngle;
-    let endRadius;
-    let arc;
-    let outer;
-    let inner;
-    let r;
-    let a;
-    let d;
-    let $g;
-    let $t;
-    let startRadius = -halfPI;
-
-    data.forEach(datum => {
-        segmentAngle = (datum.value / totalValue) * doublePI;
-        endRadius = startRadius + segmentAngle;
-        arc = (endRadius - startRadius) % doublePI > Math.PI ? 1 : 0;
-        // TODO (jamesgorrie): functionalise
-        outer = {
-            start: {
-                x: center.x + Math.cos(startRadius) * radius,
-                y: center.y + Math.sin(startRadius) * radius,
-            },
-            end: {
-                x: center.x + Math.cos(endRadius) * radius,
-                y: center.y + Math.sin(endRadius) * radius,
-            },
-        };
-        inner = {
-            start: {
-                x: center.x + Math.cos(endRadius) * cutoutRadius,
-                y: center.y + Math.sin(endRadius) * cutoutRadius,
-            },
-            end: {
-                x: center.x + Math.cos(startRadius) * cutoutRadius,
-                y: center.y + Math.sin(startRadius) * cutoutRadius,
-            },
-        };
-
-        r = (cutoutRadius + radius) / 2;
-        a = (startRadius + endRadius) / 2;
-        /**
-         * M: Move pointer
-         * A: Outer arc
-         * L: Connect outer and inner arc
-         * A: Inner arc
-         * Z: Close path
-         */
-        d = [
-            'M',
-            outer.start.x,
-            outer.start.y,
-            'A',
-            radius,
-            radius,
-            0,
-            arc,
-            1,
-            outer.end.x,
-            outer.end.y,
-            'L',
-            inner.start.x,
-            inner.start.y,
-            'A',
-            cutoutRadius,
-            cutoutRadius,
-            0,
-            arc,
-            0,
-            inner.end.x,
-            inner.end.y,
-            'Z',
-        ];
-        $g = svgEl('g')
-            .attr('class', 'chart__arc')
-            .append(
-                svgEl('path').attr({
-                    d: d.join(' '),
-                    fill: datum.color,
-                })
-            );
-
-        // labels
-        $t = svgEl('text').attr('class', 'chart__label');
-        if (obj.showValues) {
-            $t.append(
-                svgEl('tspan')
-                    .attr('class', 'chart__label-text')
-                    .text(datum.label)
-                    .attr({
-                        x: 0,
-                        dy: '0',
-                    })
-            ).append(
-                svgEl('tspan')
-                    .attr('class', 'chart__label-value')
-                    .text(datum.value)
-                    .attr({
-                        x: 0,
-                        dy: '.9em',
-                    })
-            );
-        } else {
-            $t.text(datum.label);
-        }
-        $t.attr({
-            transform: translate([
-                Math.cos(a) * r + center.x,
-                Math.sin(a) * r + center.y,
-            ]),
-        }).appendTo($g);
-
-        $g.appendTo($svg);
-        startRadius += (datum.value / totalValue) * doublePI;
-    });
-
-    // Unit of measurement
-    return $svg.append(
-        svgEl('text')
-            .attr('class', 'chart__unit')
-            .text(obj.unit)
-            .attr({
-                transform: translate(c),
-                dy: '0.4em',
-            })
-    );
-};
-
-export { Doughnut };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/charts/table-doughnut.js b/static/src/javascripts.flow.archive/projects/common/modules/charts/table-doughnut.js
deleted file mode 100644
index db9c335e423..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/charts/table-doughnut.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/charts/table-doughnut.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import $ from 'lib/$';
-import { Doughnut } from 'common/modules/charts/doughnut';
-
-const TableDoughnut = () => {};
-
-TableDoughnut.prototype.render = (el: Element) => {
-    const width = el.scrollWidth || el.getAttribute('data-chart-width');
-    const headings = $('th', el);
-
-    const data = $('td', el).map((td, i) => ({
-        label: headings[i].innerHTML,
-        value: parseInt(td.getAttribute('data-chart-value'), 10),
-        color: td.getAttribute('data-chart-color'),
-    }));
-
-    bonzo(el).addClass('u-h');
-    const $doughnut = new Doughnut(data, {
-        showValues: el.getAttribute('data-chart-show-values') === 'true',
-        unit: el.getAttribute('data-chart-unit'),
-        width,
-    });
-
-    // can't use bonzo's class methods, don't play well in IE
-    const currentClasses = $doughnut.attr('class');
-    return $doughnut.attr(
-        'class',
-        `${currentClasses} ${el.getAttribute('data-chart-class') || ''}`
-    )[0].outerHTML;
-};
-
-export { TableDoughnut };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/acquisitions-link-enrichment.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/acquisitions-link-enrichment.js
deleted file mode 100644
index 79e9b53236f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/acquisitions-link-enrichment.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/acquisitions-link-enrichment.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { addReferrerData } from 'common/modules/commercial/acquisitions-ophan';
-import { addCountryGroupToSupportLink } from 'common/modules/commercial/support-utilities';
-
-// Currently the only acquisition components on the site are
-// from the Mother Load campaign and the Wide Brown Land campaign.
-// Work needs to be done so we don't have to hard code what campaigns are running.
-const validIframeUrls: string[] = [
-    'https://interactive.guim.co.uk/embed/2017/12/the-mother-load/',
-    'https://interactive.guim.co.uk/embed/2018/this-wide-brown-land/',
-];
-
-const isCurrentCampaign = (iframeSrc: string): boolean =>
-    validIframeUrls.some(validIframeUrl =>
-        iframeSrc.startsWith(validIframeUrl)
-    );
-
-const addReferrerDataToAcquisitionLink = (rawUrl: string): string => {
-    const acquisitionDataField = 'acquisitionData';
-
-    let url;
-    try {
-        url = new URL(rawUrl);
-    } catch (e) {
-        return rawUrl;
-    }
-
-    let acquisitionData;
-    try {
-        const acquisitionDataJsonString = url.searchParams.get(
-            acquisitionDataField
-        );
-
-        if (!acquisitionDataJsonString) return rawUrl;
-
-        acquisitionData = JSON.parse(acquisitionDataJsonString);
-    } catch (e) {
-        return rawUrl;
-    }
-
-    if (acquisitionData) {
-        acquisitionData = addReferrerData(acquisitionData);
-        url.searchParams.set(
-            acquisitionDataField,
-            JSON.stringify(acquisitionData)
-        );
-    }
-
-    return url.toString();
-};
-
-const ACQUISITION_LINK_CLASS = 'js-acquisition-link';
-
-const enrichAcquisitionLinksOnPage = (): void => {
-    const links = Array.from(
-        document.getElementsByClassName(ACQUISITION_LINK_CLASS)
-    );
-
-    links.forEach(el => {
-        const link = el.getAttribute('href');
-        if (link) {
-            let modifiedLink = addReferrerDataToAcquisitionLink(link);
-            modifiedLink = addCountryGroupToSupportLink(modifiedLink);
-            el.setAttribute('href', modifiedLink);
-        }
-    });
-};
-
-const addReferrerDataToAcquisitionLinksInInteractiveIframes = (): void => {
-    window.addEventListener('message', event => {
-        let data;
-        try {
-            data = JSON.parse(event.data);
-        } catch (e) {
-            return;
-        }
-
-        // TODO: remove this when only https://github.com/guardian/acquisition-iframe-tracking
-        // TODO: is being used for acquisition iframe tracking
-        // Expects enrich requests to be made via iframe-messenger:
-        // https://github.com/guardian/iframe-messenger
-        if (data.type === 'enrich-acquisition-links' && data.id) {
-            data.referrerData = addReferrerData({});
-            Array.from(document.getElementsByTagName('iframe')).forEach(
-                iframe => {
-                    iframe.contentWindow.postMessage(
-                        JSON.stringify(data),
-                        'https://interactive.guim.co.uk'
-                    );
-                }
-            );
-        }
-
-        if (data.type === 'acquisition-data-request') {
-            Array.from(document.getElementsByTagName('iframe')).forEach(el => {
-                const iframeSrc = el.getAttribute('src');
-                if (iframeSrc && isCurrentCampaign(iframeSrc)) {
-                    el.contentWindow.postMessage(
-                        JSON.stringify({
-                            type: 'acquisition-data-response',
-                            acquisitionData: {
-                                ...addReferrerData({}),
-                                source: 'GUARDIAN_WEB',
-                            },
-                        }),
-                        '*'
-                    );
-                }
-            });
-        }
-    });
-};
-
-export const init = (): void => {
-    addReferrerDataToAcquisitionLinksInInteractiveIframes();
-    enrichAcquisitionLinksOnPage();
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/acquisitions-view-log.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/acquisitions-view-log.js
deleted file mode 100644
index 75cf7c6cd46..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/acquisitions-view-log.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/acquisitions-view-log.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { storage } from '@guardian/libs';
-
-const viewKey = 'gu.contributions.views';
-const viewLog = storage.local.get(viewKey) || [];
-
-const maxLogEntries = 50;
-
-/**
- * Log that the user has seen an Epic test so we can limit how many times they see it.
- * The number of entries is limited to the number in maxLogEntries.
- *
- * @param testId
- */
-const logView = (testId: string): void => {
-    viewLog.push({
-        date: new Date().getTime(),
-        testId,
-    });
-
-    storage.local.set(viewKey, viewLog.slice(-maxLogEntries));
-};
-
-const viewsInPreviousDays = (days: number, testId: ?string): number => {
-    const ms = days * 1000 * 60 * 60 * 24;
-    const now = new Date().getTime();
-
-    return viewLog.filter(
-        view => (testId ? view.testId === testId : true) && view.date > now - ms
-    ).length;
-};
-
-const clearViewLog = (): void => {
-    storage.local.remove(viewKey);
-};
-
-const overallNumberOfViews = () => viewLog.length;
-
-export { logView, viewsInPreviousDays, overallNumberOfViews, clearViewLog };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-free-banner.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-free-banner.js
deleted file mode 100644
index 210bc5e26c4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-free-banner.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/ad-free-banner.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { Message, hasUserAcknowledgedBanner } from 'common/modules/ui/message';
-import type { Banner } from 'common/modules/ui/bannerPicker';
-import checkIcon from 'svgs/icon/tick.svg';
-import bean from 'bean';
-import config from 'lib/config';
-import { isAdFreeUser } from 'common/modules/commercial/user-features';
-
-const messageCode = 'ad-free-banner';
-const image = config.get('images.acquisitions.ad-free', '');
-
-const isInExperiment = (): boolean =>
-    config.get('switches.scAdFreeBanner', false);
-
-const hideBanner = (banner: Message) => {
-    banner.acknowledge();
-};
-
-const canShow: () => Promise<boolean> = () =>
-    Promise.resolve(
-        !hasUserAcknowledgedBanner(messageCode) &&
-            isAdFreeUser() &&
-            isInExperiment()
-    );
-
-const show = (): Promise<boolean> => {
-    new Message(messageCode, {
-        siteMessageLinkName: messageCode,
-        siteMessageCloseBtn: 'hide',
-        trackDisplay: true,
-        cssModifierClass: messageCode,
-        customJs() {
-            bean.on(
-                document,
-                'click',
-                '.js-ad-free-banner-dismiss-button',
-                () => hideBanner(this)
-            );
-        },
-    }).show(`
-        <div class="site-message__copy-text">
-            <h2 class="site-message__copy-heading">No ads, no interruptions</h2>
-            <p>As a valued subscriber, you won’t see adverts while logged in to the Guardian. Thank you for your support.</p>
-            <button data-link-name="ad-free-banner : dismiss" class="button site-message__copy-button js-ad-free-banner-dismiss-button">
-                ${checkIcon.markup} Got it, thanks
-            </button>
-        </div>
-        <div class="site-message__image">
-            <img src="${image}" alt="" />
-        </div>
-    `);
-    return Promise.resolve(true);
-};
-
-const adFreeBanner: Banner = {
-    id: messageCode,
-    show,
-    canShow,
-};
-
-export { adFreeBanner };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-prefs.lib.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-prefs.lib.js
deleted file mode 100644
index 87c0c29a935..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-prefs.lib.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/ad-prefs.lib.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { addCookie, getCookie } from 'lib/cookies';
-import { onConsentSet } from 'common/modules/analytics/send-privacy-prefs';
-
-type AdConsent = {
-    label: string,
-    cookie: string,
-};
-
-type AdConsentWithState = {
-    consent: AdConsent,
-    state: ?boolean,
-};
-
-const cookieExpiryDate = 30 * 18;
-
-const thirdPartyTrackingAdConsent: AdConsent = {
-    label: 'Third party tracking',
-    cookie: 'GU_TK',
-};
-
-const allAdConsents: AdConsent[] = [thirdPartyTrackingAdConsent];
-
-const setAdConsentState = (provider: AdConsent, state: boolean): void => {
-    const cookie = [state ? '1' : '0', Date.now()].join('.');
-    addCookie(provider.cookie, cookie, cookieExpiryDate, true);
-    onConsentSet(provider, state);
-};
-
-const getAdConsentState = (provider: AdConsent): boolean | null => {
-    const cookieRaw = getCookie(provider.cookie);
-    if (!cookieRaw) return null;
-    const cookieParsed = cookieRaw.split('.')[0];
-    if (cookieParsed === '1') return true;
-    if (cookieParsed === '0') return false;
-    return null;
-};
-
-const getAllAdConsentsWithState = (): AdConsentWithState[] =>
-    allAdConsents.map((consent: AdConsent) => ({
-        consent,
-        state: getAdConsentState(consent),
-    }));
-
-export type { AdConsent, AdConsentWithState };
-export {
-    setAdConsentState,
-    getAdConsentState,
-    getAllAdConsentsWithState,
-    allAdConsents,
-    thirdPartyTrackingAdConsent,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-prefs.lib.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-prefs.lib.spec.js
deleted file mode 100644
index 042cd5e74c5..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ad-prefs.lib.spec.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/ad-prefs.lib.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { getCookie as getCookie_, addCookie as addCookie_ } from 'lib/cookies';
-import { setAdConsentState, getAdConsentState } from './ad-prefs.lib';
-import type { AdConsent } from './ad-prefs.lib';
-
-const getCookie: any = getCookie_;
-const addCookie: any = addCookie_;
-
-const testConsent: AdConsent = {
-    label: 'Test consent',
-    cookie: 'GU_AD_CONSENT_TEST',
-};
-
-jest.mock('lib/cookies', () => ({
-    getCookie: jest.fn(() => null),
-    addCookie: jest.fn(() => null),
-}));
-
-jest.mock('common/modules/analytics/send-privacy-prefs', () => ({
-    onConsentSet: jest.fn(() => null),
-}));
-
-beforeEach(() => {
-    addCookie.mockReset();
-    getCookie.mockReset();
-});
-
-describe('getAdConsentState', () => {
-    it('should convert false & true cookies properly', () => {
-        getCookie.mockImplementation(() => '0');
-        expect(getAdConsentState(testConsent)).toBe(false);
-        getCookie.mockImplementation(() => '1');
-        expect(getAdConsentState(testConsent)).toBe(true);
-    });
-    it('should convert null & inconsistent cookies properly', () => {
-        getCookie.mockImplementation(() => null);
-        expect(getAdConsentState(testConsent)).toBe(null);
-        getCookie.mockImplementation(() => 'verdadero');
-        expect(getAdConsentState(testConsent)).toBe(null);
-    });
-});
-
-describe('setAdConsentState', () => {
-    it('should set a full proper cookie', () => {
-        setAdConsentState(testConsent, true);
-        expect(addCookie.mock.calls[0][0]).toBe('GU_AD_CONSENT_TEST');
-        expect(addCookie.mock.calls[0][1]).toMatch('1.');
-        expect(addCookie.mock.calls[0][2]).toBe(30 * 18);
-        expect(addCookie.mock.calls[0][3]).toBe(true);
-    });
-    it('should set a false cookie', () => {
-        setAdConsentState(testConsent, false);
-        expect(addCookie.mock.calls[0][1]).toMatch('0.');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/articles-read-tooltip-markup.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/articles-read-tooltip-markup.js
deleted file mode 100644
index 246b599c109..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/articles-read-tooltip-markup.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/articles-read-tooltip-markup.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export const articlesReadTooltipMarkup = (count: number): string => `
-    <span class="engagement-banner__articles-read-tooltip-wrapper">
-        <span class="engagement-banner__articles-read">
-            ${count.toString()} ${(count === 1) ? 'article' : 'articles'}
-        </span>
-
-        <span class="engagement-banner__articles-read-tooltip">
-            <span class="engagement-banner__articles-read-tooltip-close is-hidden">
-                <button tabindex="4" class="engagement-banner__articles-read-tooltip-close-button" data-link-name="hide release message">
-                    <span class="u-h">Close the articles viewed opt out message</span>
-                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.32497 10.025L15.5499 16.6499L16.6249 15.5749L10.025 8.32497L16.6249 1.075L15.5499 0L8.32497 6.62498L1.075 0.0249999L0 1.1L6.62498 8.32497L0 15.5499L1.075 16.6249L8.32497 10.025Z"/>
-                    </svg>
-                </button>
-            </span>
-            <span class="engagement-banner__articles-read-tooltip-header">What's this?</span>
-            <span class="engagement-banner__articles-read-tooltip-body">We would like to remind you how many Guardian articles you've enjoyed on this device. Can we continue showing you this?</span>
-            <span class="engagement-banner__articles-read-tooltip-buttons">
-                <a class="component-button contributions__contribute--epic-member engagement_banner__articles-read-tooltip-button-opt-in" target="_blank">
-                    Yes, that's OK
-                </a>
-
-                <a class="component-button contributions__contribute--epic-member engagement_banner__articles-read-tooltip-button-opt-out" target="_blank">
-                    No, opt me out
-                </a>
-            </span>
-            <span class="engagement-banner__articles-read-tooltip-note">Please note you cannot undo this action or opt back in</span>
-        </span>
-    </span>
-`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/articles-read-tooltip.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/articles-read-tooltip.js
deleted file mode 100644
index 562e0a3c013..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/articles-read-tooltip.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/articles-read-tooltip.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { submitClickEvent } from "common/modules/commercial/acquisitions-ophan";
-import { ARTICLES_VIEWED_OPT_OUT_COOKIE } from "common/modules/commercial/user-features";
-import { storageKeyWeeklyArticleCount, storageKeyDailyArticleCount } from "common/modules/onward/history";
-import { addCookie } from "lib/cookies";
-import { storage } from '@guardian/libs';
-import reportError from "lib/report-error";
-
-type ArticlesViewedTooltipElements = {
-    articlesRead: HTMLElement,
-    wrapper: HTMLElement,
-    optOutButton: HTMLElement,
-    optInButton: HTMLElement,
-    header: HTMLElement,
-    body: HTMLElement,
-    buttons: HTMLElement,
-    note: HTMLElement,
-    closeButton: HTMLElement
-}
-
-const getElements = (container: HTMLElement): ?ArticlesViewedTooltipElements => {
-    const articlesRead = container.querySelector('.engagement-banner__articles-read');
-    const wrapper = container.querySelector('.engagement-banner__articles-read-tooltip');
-    const buttons = container.querySelector('.engagement-banner__articles-read-tooltip-buttons');
-    const optOutButton = container.querySelector('.engagement_banner__articles-read-tooltip-button-opt-out');
-    const optInButton = container.querySelector('.engagement_banner__articles-read-tooltip-button-opt-in');
-    const header = container.querySelector('.engagement-banner__articles-read-tooltip-header');
-    const body = container.querySelector('.engagement-banner__articles-read-tooltip-body');
-    const note = container.querySelector('.engagement-banner__articles-read-tooltip-note');
-    const closeButton = container.querySelector('.engagement-banner__articles-read-tooltip-close');
-
-    if (
-        articlesRead &&
-        wrapper &&
-        buttons &&
-        optOutButton &&
-        optInButton &&
-        header &&
-        body &&
-        note &&
-        closeButton
-    ) {
-        return {
-            articlesRead,
-            wrapper,
-            buttons,
-            optOutButton,
-            optInButton,
-            header,
-            body,
-            note,
-            closeButton
-        }
-    }
-};
-
-const setupHandlers = (elements: ArticlesViewedTooltipElements) => {
-
-    const showTooltip = () => {
-        elements.articlesRead.classList.add('active')
-        elements.wrapper.classList.add('active')
-    }
-
-    const hideTooltip = () => {
-        elements.articlesRead.classList.remove('active')
-        elements.wrapper.classList.remove('active')
-    };
-
-    const isActive = () => (elements.wrapper.classList.contains('active'))
-
-    const toggleTooltip = () => isActive() ? hideTooltip() : showTooltip()
-
-    const onArticlesReadClick = () => {
-        toggleTooltip()
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'banner-articles-viewed-opt-out_open',
-            },
-        });
-    };
-
-    const onOptOutClick = () => {
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'banner-articles-viewed-opt-out_out',
-            },
-        });
-
-        // Stop counting and clear the user's history
-        addCookie(ARTICLES_VIEWED_OPT_OUT_COOKIE.name, new Date().getTime().toString(), ARTICLES_VIEWED_OPT_OUT_COOKIE.daysToLive);
-        storage.local.remove(storageKeyWeeklyArticleCount);
-        storage.local.remove(storageKeyDailyArticleCount);
-
-        // Update the dialog message
-        elements.buttons.remove();
-        elements.header.innerHTML = `You've opted out`;
-        elements.body.innerHTML = `Starting from your next page view, we won't count the articles you read or show you this message for three months.`;
-        elements.note.innerHTML = `If you have any questions, please <a target="_blank" href="https://www.theguardian.com/help/contact-us">contact us</a>.`;
-        elements.closeButton.classList.remove('is-hidden');
-        elements.closeButton.addEventListener('click', () => {
-            hideTooltip();
-        });
-    };
-
-    const onOptInClick = () => {
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'banner-articles-viewed-opt-out_in',
-            },
-        });
-
-        hideTooltip();
-    };
-
-    elements.articlesRead.addEventListener('click', () => {
-        onArticlesReadClick();
-    });
-
-    elements.optOutButton.addEventListener('click', (event: Event) => {
-        event.preventDefault();
-        onOptOutClick();
-    });
-
-    elements.optInButton.addEventListener('click', (event: Event) => {
-        event.preventDefault();
-        onOptInClick();
-    });
-};
-
-const bannerSetupArticlesViewedOptOut = () => {
-    // If this element exists then they're in the variant
-    const articlesReadTooltipWrapper = document.querySelector('.engagement-banner__articles-read-tooltip-wrapper');
-
-    if (articlesReadTooltipWrapper) {
-        const elements: ?ArticlesViewedTooltipElements = getElements(articlesReadTooltipWrapper);
-
-        if (elements) {
-            setupHandlers(elements);
-        } else {
-            reportError(
-                new Error(
-                    `Error setting up articles viewed opt-out in banner: unable to find all elements.`
-                ),
-                {
-                    feature: 'banner',
-                },
-                false
-            );
-        }
-    }
-};
-
-export { bannerSetupArticlesViewedOptOut }
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-epic-test-data.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-epic-test-data.js
deleted file mode 100644
index d88680c7e11..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-epic-test-data.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/contributions-epic-test-data.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fetchJSON from 'lib/fetch-json';
-import config from 'lib/config';
-
-const prodLiveblogEpicTestsFile = 'https://support.theguardian.com/liveblog-epic-tests.json';
-const codeLiveblogEpicTestsFile = 'https://support.code.dev-theguardian.com/liveblog-epic-tests.json';
-
-export const getLiveblogEpicTestData = (): Promise<any> => {
-    const url = config.get('page.isDev')
-        ? codeLiveblogEpicTestsFile
-        : prodLiveblogEpicTestsFile;
-    return fetchJSON(url, { mode: 'cors' });
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-google-docs.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-google-docs.js
deleted file mode 100644
index aef30c14df3..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-google-docs.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/contributions-google-docs.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fetchJSON from 'lib/fetch-json';
-import config from 'lib/config';
-
-export const epicControlGoogleDocUrl: string =
-    'https://interactive.guim.co.uk/docsdata/1fy0JolB1bf1IEFLHGHfUYWx-niad7vR9K954OpTOvjE.json';
-export const bannerControlGoogleDocUrl: string =
-    'https://interactive.guim.co.uk/docsdata/1CIHCoe87hyPHosXx1pYeVUoohvmIqh9cC_kNlV-CMHQ.json';
-export const bannerMultipleTestsGoogleDocUrl: string = config.get('page.isDev')
-    ? 'https://interactive.guim.co.uk/docsdata-test/19AGJYaPL8XpchykYlzqdKqNHxrHBILFktzM8vc5iShc.json'
-    : 'https://interactive.guim.co.uk/docsdata/1IEVVHU5ZObCzyPV-BLQczaSzxe7pawLcH8_lvFD0Csk.json';
-
-export const getGoogleDoc = (url: string): Promise<any> =>
-    fetchJSON(url, { mode: 'cors' });
-
-export const getSheetFromGoogleDoc = (
-    url: string,
-    sheet: string
-): Promise<any> => getGoogleDoc(url).then(json => json.sheets[sheet]);
-
-// It is the responsibility of any calling code to .catch() when using these promises.
-export const getEpicControlFromGoogleDoc = (): Promise<any> =>
-    getSheetFromGoogleDoc(epicControlGoogleDocUrl, 'control');
-
-export const getEngagementBannerControlFromGoogleDoc = (): Promise<any> =>
-    getSheetFromGoogleDoc(bannerControlGoogleDocUrl, 'control');
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-liveblog-utilities.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-liveblog-utilities.js
deleted file mode 100644
index fa4f94c6596..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-liveblog-utilities.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/contributions-liveblog-utilities.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { logView } from 'common/modules/commercial/acquisitions-view-log';
-import $ from 'lib/$';
-import mediator from 'lib/mediator';
-import { elementInView } from 'lib/element-inview';
-import fastdom from 'lib/fastdom-promise';
-import {submitInsertEvent, submitViewEvent} from "common/modules/commercial/acquisitions-ophan";
-import type {ComponentEventWithoutAction} from "common/modules/commercial/acquisitions-ophan";
-
-let isAutoUpdateHandlerBound = false;
-const INSERT_EPIC_AFTER_CLASS = 'js-insert-epic-after';
-
-type TimeData = {
-    blockHref: string,
-    datetime: string,
-    title: string,
-    date: string,
-    time: string,
-};
-
-const buildComponentEventWithoutAction = (variant: EpicVariant, parentTest: EpicABTest): ComponentEventWithoutAction => ({
-    component: {
-        componentType: parentTest.componentType,
-        campaignCode: variant.campaignCode,
-        id: variant.campaignCode,
-    },
-    abTest: {
-        name: parentTest.id,
-        variant: variant.id,
-    },
-});
-
-const getLiveblogEntryTimeData = (el: Element): ?TimeData => {
-    const timeEl = el.querySelector('time');
-    const absoluteTimeEl = el.querySelector('.block-time__absolute');
-
-    if (timeEl && absoluteTimeEl) {
-        const link = timeEl.parentNode;
-        const blockHref = link instanceof HTMLAnchorElement ? link.href : '';
-
-        return {
-            datetime: timeEl.getAttribute('datetime') || '',
-            title: timeEl.getAttribute('title') || '',
-            date: timeEl.innerHTML,
-            time: absoluteTimeEl.innerHTML,
-            blockHref,
-        };
-    }
-};
-
-const getBlocksToInsertEpicAfter = (): Array<HTMLElement> => {
-    const blocks = document.getElementsByClassName('block');
-    const blocksToInsertManualEpicAfter = document.getElementsByClassName(
-        INSERT_EPIC_AFTER_CLASS
-    );
-    const epicsAlreadyOnPage = document.getElementsByClassName('is-epic');
-
-    const isLiveblogLongEnoughYet = blocks.length > 4;
-
-    if (
-        blocksToInsertManualEpicAfter.length ||
-        epicsAlreadyOnPage.length ||
-        !isLiveblogLongEnoughYet
-    ) {
-        return Array.from(blocksToInsertManualEpicAfter);
-    }
-
-    const autoBlockNum = Math.floor(Math.random() * 3);
-    const blockToInsertAutoEpicAfter = blocks[autoBlockNum];
-
-    return Array.from(blocksToInsertManualEpicAfter).concat(
-        blockToInsertAutoEpicAfter
-    );
-};
-
-const setEpicLiveblogEntryTimeData = (
-    el: Element,
-    timeData: TimeData
-): void => {
-    const epicTimeEl = el.querySelector('time');
-    const epicAbsoluteTimeEl = el.querySelector('.block-time__absolute');
-
-    if (epicTimeEl && epicAbsoluteTimeEl) {
-        const epicTimeLink = epicTimeEl.parentNode;
-        if (epicTimeLink instanceof HTMLAnchorElement) {
-            epicTimeLink.href = timeData.blockHref;
-        }
-
-        epicTimeEl.setAttribute('datetime', timeData.datetime);
-        epicTimeEl.setAttribute('title', timeData.title);
-        epicTimeEl.innerHTML = timeData.date;
-        epicAbsoluteTimeEl.innerHTML = timeData.time;
-    }
-};
-
-const setupViewTracking = (
-    el: HTMLElement,
-    variant: EpicVariant,
-    parentTest: EpicABTest
-): void => {
-    // top offset of 18 ensures view only counts when half of element is on screen
-    const inView = elementInView(el, window, {
-        top: 18,
-    });
-
-    inView.on('firstview', () => {
-        logView(variant.id);
-        submitViewEvent(buildComponentEventWithoutAction(variant, parentTest));
-    });
-};
-
-const addEpicToBlocks = (
-    epicHtml: string,
-    variant: EpicVariant,
-    parentTest: EpicABTest
-): Promise<void> => {
-    const elementsWithTimeData = getBlocksToInsertEpicAfter().map(el => [
-        el,
-        getLiveblogEntryTimeData(el),
-    ]);
-
-    return fastdom.mutate(() => {
-        elementsWithTimeData.forEach(([el, timeData]) => {
-            if (!timeData) {
-                return;
-            }
-
-            const $epic = $.create(epicHtml);
-            $epic.insertAfter(el);
-
-            submitInsertEvent(buildComponentEventWithoutAction(variant, parentTest));
-
-            $(el).removeClass(INSERT_EPIC_AFTER_CLASS);
-            setEpicLiveblogEntryTimeData($epic[0], timeData);
-            setupViewTracking(el, variant, parentTest);
-        });
-    });
-};
-
-export const setupEpicInLiveblog = (
-    epicHtml: string,
-    variant: EpicVariant,
-    parentTest: EpicABTest
-): void => {
-    addEpicToBlocks(epicHtml, variant, parentTest);
-
-    if (!isAutoUpdateHandlerBound) {
-        mediator.on('modules:autoupdate:updates', () => {
-            addEpicToBlocks(epicHtml, variant, parentTest);
-        });
-        isAutoUpdateHandlerBound = true;
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-service.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-service.js
deleted file mode 100644
index f819dc568f4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-service.js
+++ /dev/null
@@ -1,418 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/contributions-service.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { getEpicMeta, getViewLog, getWeeklyArticleHistory } from '@guardian/automat-contributions';
-import { onConsentChange } from '@guardian/consent-management-platform'
-import { getSync as geolocationGetSync } from 'lib/geolocation';
-import {
-    setupOphanView,
-    emitBeginEvent,
-    setupClickHandling,
-    submitOphanInsert,
-    getVisitCount,
-} from 'common/modules/commercial/contributions-utilities';
-import reportError from 'lib/report-error';
-import fastdom from 'lib/fastdom-promise';
-import config from 'lib/config';
-import { getMvtValue } from 'common/modules/analytics/mvt-cookie';
-import {submitViewEvent, submitComponentEvent} from 'common/modules/commercial/acquisitions-ophan';
-import { trackNonClickInteraction } from 'common/modules/analytics/google';
-import fetchJson from 'lib/fetch-json';
-import { mountDynamic } from "@guardian/automat-modules";
-import { getCookie } from 'lib/cookies';
-
-import {
-    getLastOneOffContributionDate,
-    isRecurringContributor,
-    shouldHideSupportMessaging,
-    ARTICLES_VIEWED_OPT_OUT_COOKIE,
-} from 'common/modules/commercial/user-features';
-import userPrefs from "common/modules/user-prefs";
-
-type ServiceModule = {
-    url: string,
-    name: string,
-    props: {}
-};
-
-type Meta = {
-    abTestName: string,
-    abTestVariant: string,
-    campaignCode: string,
-    componentType: OphanComponentType,
-    products?: OphanProduct[]
-}
-
-export type BannerDataResponse = {
-    data: {
-        module: ServiceModule,
-        meta: Meta
-    }
-}
-
-const buildKeywordTags = page => {
-    const keywordIds = page.keywordIds.split(',');
-    const keywords = page.keywords.split(',');
-    return keywordIds.map((id, idx) => ({
-        id,
-        type: 'Keyword',
-        title: keywords[idx],
-    }));
-};
-
-const epicEl = () => {
-    const target = document.querySelector(
-        '.submeta'
-    );
-    if (!target) {
-        throw new Error(
-            'Could not find target element for Epic'
-        );
-    }
-
-    const parent = target.parentNode;
-    if (!parent) {
-        throw new Error(
-            'Could not find parent element for Epic'
-        );
-    }
-
-    const container = document.createElement('div');
-    parent.insertBefore(container, target);
-
-    return container;
-}
-
-const hasOptedOutOfArticleCount = () =>
-    !!getCookie(ARTICLES_VIEWED_OPT_OUT_COOKIE.name)
-
-const DAILY_ARTICLE_COUNT_KEY = 'gu.history.dailyArticleCount';
-const WEEKLY_ARTICLE_COUNT_KEY = 'gu.history.weeklyArticleCount';
-
-const removeArticleCountsFromLocalStorage = () => {
-    window.localStorage.removeItem(DAILY_ARTICLE_COUNT_KEY);
-    window.localStorage.removeItem(WEEKLY_ARTICLE_COUNT_KEY);
-}
-
-const REQUIRED_CONSENTS_FOR_ARTICLE_COUNT = [1, 3, 7];
-
-/* eslint-disable guardian-frontend/exports-last */
-export const getArticleCountConsent = (): Promise<boolean> => {
-    if (hasOptedOutOfArticleCount()) {
-        return Promise.resolve(false);
-    }
-    return new Promise((resolve) => {
-        onConsentChange(({ ccpa, tcfv2 , aus}) => {
-            if (ccpa || aus) {
-                resolve(true);
-            } else if (tcfv2) {
-                const hasRequiredConsents = REQUIRED_CONSENTS_FOR_ARTICLE_COUNT.every(
-                    (consent) => tcfv2.consents[consent],
-                );
-
-                if (!hasRequiredConsents) {
-                    removeArticleCountsFromLocalStorage();
-                }
-
-                resolve(hasRequiredConsents);
-            }
-        });
-    });
-};
-
-const buildEpicPayload = async () => {
-    const ophan = config.get('ophan');
-    const page = config.get('page');
-
-    // note, there is a race condition so we want to fetch this as late as possible to give a change for the geo local storage value to be set
-    const countryCode = geolocationGetSync();
-
-    const tracking = {
-        ophanPageId: ophan.pageViewId,
-        platformId: 'GUARDIAN_WEB',
-        clientName: 'frontend',
-        referrerUrl:
-            window.location.origin + window.location.pathname,
-    };
-
-    const targeting = {
-        contentType: page.contentType,
-        sectionName: page.section,
-        shouldHideReaderRevenue: page.shouldHideReaderRevenue,
-        isMinuteArticle: config.hasTone('Minute'),
-        isPaidContent: page.isPaidContent,
-        isSensitive: page.isSensitive,
-        tags: buildKeywordTags(page),
-        showSupportMessaging: !shouldHideSupportMessaging(),
-        isRecurringContributor: isRecurringContributor(),
-        lastOneOffContributionDate:
-            getLastOneOffContributionDate() || undefined,
-        mvtId: getMvtValue(),
-        countryCode,
-        epicViewLog: getViewLog(),
-        weeklyArticleHistory: getWeeklyArticleHistory(),
-        hasOptedOutOfArticleCount: !(await getArticleCountConsent())
-    };
-
-    return {
-        tracking,
-        targeting,
-    };
-};
-
-export const NO_RR_BANNER_TIMESTAMP_KEY = 'gu.noRRBannerTimestamp';   // timestamp of when we were last told not to show a RR banner
-const twentyMins = 20*60000;
-
-export const withinLocalNoBannerCachePeriod = (): boolean => {
-    const item = window.localStorage.getItem(NO_RR_BANNER_TIMESTAMP_KEY);
-    if (item && !Number.isNaN(parseInt(item, 10))) {
-        const withinCachePeriod = (parseInt(item, 10) + twentyMins) > Date.now();
-        if (!withinCachePeriod) {
-            // Expired
-            window.localStorage.removeItem(NO_RR_BANNER_TIMESTAMP_KEY);
-        }
-        return withinCachePeriod;
-    }
-    return false;
-};
-
-export const setLocalNoBannerCachePeriod = (): void =>
-    window.localStorage.setItem(NO_RR_BANNER_TIMESTAMP_KEY, `${Date.now()}`);
-
-const buildBannerPayload = async () => {
-    const page = config.get('page');
-
-    // TODO: Review whether we need to send all of this in the payload to the server
-    const tracking = {
-        ophanPageId: config.get('ophan.pageViewId'),
-        platformId: 'GUARDIAN_WEB',
-        clientName: 'frontend',
-        referrerUrl: window.location.origin + window.location.pathname,
-    };
-
-    const targeting = {
-        alreadyVisitedCount: getVisitCount(),
-        shouldHideReaderRevenue: page.shouldHideReaderRevenue,
-        isPaidContent: page.isPaidContent,
-        showSupportMessaging: !shouldHideSupportMessaging(),
-        engagementBannerLastClosedAt: userPrefs.get('engagementBannerLastClosedAt') || undefined,
-        subscriptionBannerLastClosedAt: userPrefs.get('subscriptionBannerLastClosedAt') || undefined,
-        mvtId: getMvtValue(),
-        countryCode: geolocationGetSync(),
-        weeklyArticleHistory: getWeeklyArticleHistory(),
-        hasOptedOutOfArticleCount: !(await getArticleCountConsent())
-    };
-
-    return {
-        tracking,
-        targeting,
-    };
-};
-
-const checkResponseOk = response => {
-    if (response.ok) {
-        return response;
-    }
-
-    throw new Error(
-        `Contributions fetch failed with response code: ${response.status}`
-    );
-};
-
-const getForcedVariant = (type: 'epic' | 'banner'): string | null => {
-    if (URLSearchParams) {
-        const params = new URLSearchParams(window.location.search);
-        const value = params.get(`force-${type}`);
-        if (value) {
-            return value;
-        }
-    }
-
-    return null;
-};
-
-// TODO: add this to the client library
-const getStickyBottomBanner = (payload: {}) => {
-    const isProd = config.get('page.isProd');
-    const URL = isProd ? 'https://contributions.guardianapis.com/banner' : 'https://contributions.code.dev-guardianapis.com/banner';
-    const json = JSON.stringify(payload);
-
-    const forcedVariant = getForcedVariant('banner');
-    const queryString = forcedVariant ? `?force=${forcedVariant}` : '';
-
-    return fetchJson(`${URL}${queryString}`, {
-        method: 'post',
-        headers: { 'Content-Type': 'application/json' },
-        body: json,
-    });
-};
-
-const getEpicUrl = (contentType: string): string => {
-    const path = contentType === 'LiveBlog' ? 'liveblog-epic' : 'epic';
-    return config.get('page.isDev') ?
-        `https://contributions.code.dev-guardianapis.com/${path}` :
-        `https://contributions.guardianapis.com/${path}`
-};
-
-const renderEpic = async (module, meta): Promise<void> => {
-    const component = await window.guardianPolyfilledImport(module.url);
-
-    const {
-        abTestName,
-        abTestVariant,
-        componentType,
-        products = [],
-        campaignCode,
-        campaignId
-    } = meta;
-
-    emitBeginEvent(campaignId);
-    setupClickHandling(abTestName, abTestVariant, componentType, campaignCode, products);
-
-    const el = epicEl();
-    mountDynamic(el, component.ContributionsEpic, module.props, true);
-
-    submitOphanInsert(abTestName, abTestVariant, componentType, products, campaignCode);
-    setupOphanView(
-        el,
-        abTestName,
-        abTestVariant,
-        campaignCode,
-        campaignId,
-        componentType,
-        products,
-        abTestVariant.showTicker,
-        abTestVariant.tickerSettings,
-    );
-};
-
-export const fetchBannerData: () => Promise<?BannerDataResponse> = async () => {
-    const payload = await buildBannerPayload();
-
-    if (payload.targeting.shouldHideReaderRevenue || payload.targeting.isPaidContent) {
-        return Promise.resolve(null);
-    }
-
-    if (payload.targeting.engagementBannerLastClosedAt &&
-        payload.targeting.subscriptionBannerLastClosedAt &&
-        withinLocalNoBannerCachePeriod()
-    ) {
-        return Promise.resolve(null);
-    }
-
-    return getStickyBottomBanner(payload).then(json => {
-        if (!json.data) {
-            if (payload.targeting.engagementBannerLastClosedAt && payload.targeting.subscriptionBannerLastClosedAt) {
-                setLocalNoBannerCachePeriod();
-            }
-            return null;
-        }
-
-        return (json: BannerDataResponse);
-    });
-};
-
-export const renderBanner: (BannerDataResponse) => Promise<boolean> = (response) => {
-    const { module, meta } : {
-        module: ServiceModule,
-        meta: Meta
-    } = response.data;
-    if (!module) {
-        return Promise.resolve(false);
-    }
-
-    // $FlowFixMe
-    return window.guardianPolyfilledImport(module.url)
-        .then(bannerModule => {
-            const Banner = bannerModule[module.name];
-
-            return fastdom.mutate(() => {
-                const container = document.createElement('div');
-                container.classList.add('site-message--banner');
-                container.classList.add('remote-banner');
-
-                if (document.body) {
-                    document.body.insertAdjacentElement('beforeend', container);
-                }
-
-                return mountDynamic(
-                    container,
-                    Banner,
-                    { submitComponentEvent, ...module.props},
-                    true
-                );
-            }).then(() => {
-                const {
-                    abTestName,
-                    abTestVariant,
-                    componentType,
-                    products = [],
-                    campaignCode
-                } = meta;
-
-                submitOphanInsert(abTestName, abTestVariant, componentType, products, campaignCode);
-
-                // Submit view event now, as the standard view tracking is unreliable if the component is instantly in view
-                submitViewEvent({
-                    component: {
-                        componentType,
-                        products,
-                        campaignCode,
-                        id: campaignCode,
-                    },
-                    abTest: {
-                        name: abTestName,
-                        variant: abTestVariant,
-                    }
-                });
-
-                // track banner view event in Google Analytics for subscriptions banner
-                if (componentType === 'ACQUISITIONS_SUBSCRIPTIONS_BANNER') {
-                    trackNonClickInteraction('subscription-banner : display')
-                }
-
-                return true
-            });
-        })
-        .catch(error => {
-            console.log(`Error importing remote banner: ${error}`);
-            reportError(new Error(`Error importing remote banner: ${error}`), {}, false);
-            return false;
-        });
-};
-
-export const fetchAndRenderEpic = async (): Promise<void> => {
-    const page = config.get('page');
-
-    // Liveblog epics are still selected and rendered natively
-    if (page.contentType === 'Article') {
-        try {
-            const payload = await buildEpicPayload();
-
-            const url = getEpicUrl(page.contentType);
-            const response = await getEpicMeta(payload, url);
-            checkResponseOk(response);
-            const json = await response.json();
-
-            if (json && json.data) {
-                const {module, meta} = json.data;
-                await renderEpic(module, meta);
-            }
-
-        } catch (error) {
-            console.log(`Error importing remote epic: ${error}`);
-            reportError(new Error(`Error importing remote epic: ${error}`), {}, false);
-        }
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-utilities.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-utilities.js
deleted file mode 100644
index 3f8cc9d32cf..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-utilities.js
+++ /dev/null
@@ -1,999 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/contributions-utilities.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { isAbTestTargeted } from 'common/modules/commercial/targeting-tool';
-import {
-    logView,
-    viewsInPreviousDays,
-} from 'common/modules/commercial/acquisitions-view-log';
-import {
-    addTrackingCodesToUrl,
-    submitClickEvent,
-    submitInsertEvent,
-    submitViewEvent,
-} from 'common/modules/commercial/acquisitions-ophan';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { storage } from '@guardian/libs';
-import { elementInView } from 'lib/element-inview';
-import fastdom from 'lib/fastdom-promise';
-import reportError from 'lib/report-error';
-import mediator from 'lib/mediator';
-import {
-    getLocalCurrencySymbol,
-    getSync as geolocationGetSync,
-    countryCodeToCountryGroupId,
-    getCountryName,
-} from 'lib/geolocation';
-import {
-    optionalSplitAndTrim,
-    optionalStringToBoolean,
-    filterEmptyString,
-} from 'lib/string-utils';
-import { throwIfEmptyArray } from 'lib/array-utils';
-import { epicButtonsTemplate } from 'common/modules/commercial/templates/acquisitions-epic-buttons';
-import { acquisitionsEpicControlTemplate } from 'common/modules/commercial/templates/acquisitions-epic-control';
-import { epicLiveBlogTemplate } from 'common/modules/commercial/templates/acquisitions-epic-liveblog';
-import { epicArticlesViewedOptOutTemplate } from 'common/modules/commercial/templates/epic-articles-viewed-opt-out-template';
-import { setupArticlesViewedOptOut, onEpicViewed } from 'common/modules/commercial/epic-articles-viewed-opt-out';
-import {
-    shouldHideSupportMessaging,
-    isPostAskPauseOneOffContributor,
-    ARTICLES_VIEWED_OPT_OUT_COOKIE
-} from 'common/modules/commercial/user-features';
-import {
-    supportContributeURL,
-    addCountryGroupToSupportLink,
-} from 'common/modules/commercial/support-utilities';
-import { awaitEpicButtonClicked } from 'common/modules/commercial/epic/epic-utils';
-import { setupEpicInLiveblog } from 'common/modules/commercial/contributions-liveblog-utilities';
-import {
-    bannerMultipleTestsGoogleDocUrl,
-    getGoogleDoc,
-} from 'common/modules/commercial/contributions-google-docs';
-import { getLiveblogEpicTestData } from 'common/modules/commercial/contributions-epic-test-data';
-import {
-    defaultExclusionRules,
-    isArticleWorthAnEpicImpression,
-} from 'common/modules/commercial/epic/epic-exclusion-rules';
-import { initTicker, parseTickerSettings } from 'common/modules/commercial/ticker';
-import { getArticleViewCountForWeeks } from 'common/modules/onward/history';
-import {
-    epicReminderEmailSignup,
-    getFields,
-} from 'common/modules/commercial/epic-reminder-email-signup';
-import {getCookie} from 'lib/cookies';
-
-export type ReaderRevenueRegion =
-    | 'united-kingdom'
-    | 'united-states'
-    | 'australia'
-    | 'european-union'
-    | 'rest-of-world';
-
-const getReaderRevenueRegion = (geolocation: string): ReaderRevenueRegion => {
-    switch (true) {
-        case geolocation === 'GB':
-            return 'united-kingdom';
-        case geolocation === 'US':
-            return 'united-states';
-        case geolocation === 'AU':
-            return 'australia';
-        case  countryCodeToCountryGroupId(geolocation) === 'EURCountries':
-            return 'european-union';
-        default:
-            return 'rest-of-world';
-    }
-};
-
-const getVisitCount = (): number => parseInt(storage.local.getRaw('gu.alreadyVisited'), 10) || 0;
-
-const replaceCountryName = (text: string, countryName: ?string): string =>
-    countryName ? text.replace(/%%COUNTRY_NAME%%/g, countryName) : text;
-
-const replaceArticlesViewed = (text: string, count: ?number): string => {
-    if (count) {
-        const countValue = count;   // Flow gets confused about the value in count if we don't reassign to another const
-        return text.replace(/%%ARTICLE_COUNT%%( \w+)?/g, (match, nextWord) =>
-            epicArticlesViewedOptOutTemplate(countValue, nextWord)
-        );
-    }
-    return text;
-};
-
-// How many times the user can see the Epic,
-// e.g. 6 times within 7 days with minimum of 1 day in between views.
-const defaultMaxViews: MaxViews = {
-    days: 30,
-    count: 4,
-    minDaysBetweenViews: 0,
-};
-
-const controlTemplate: EpicTemplate = (
-    variant: EpicVariant,
-    copy: AcquisitionsEpicTemplateCopy
-) =>
-    acquisitionsEpicControlTemplate({
-        copy,
-        componentName: variant.componentName,
-        buttonTemplate: variant.buttonTemplate
-            ? variant.buttonTemplate(
-                  {
-                      url: variant.supportURL,
-                      ctaText: variant.ctaText || 'Support The Guardian',
-                  },
-                  variant.secondaryCta,
-                  variant.showReminderFields
-              )
-            : undefined,
-        epicClassNames: variant.classNames,
-        showTicker: variant.showTicker || !!variant.tickerSettings,
-        showReminderFields: variant.showReminderFields,
-        backgroundImageUrl: variant.backgroundImageUrl,
-    });
-
-const liveBlogTemplate: (cssClass?: string) => EpicTemplate = cssClass => (
-    variant: EpicVariant,
-    copy: AcquisitionsEpicTemplateCopy,
-) =>
-    epicLiveBlogTemplate({
-        copy,
-        componentName: variant.componentName,
-        supportURL: variant.supportURL,
-        ctaText: variant.ctaText,
-        cssClass,
-    });
-
-const doTagsMatch = (test: EpicABTest): boolean =>
-    test.useTargetingTool ? isAbTestTargeted(test) : true;
-
-// Returns an array containing:
-// - the first element matching insertAtSelector
-// - or an empty array if the selector doesn't match anything on the page
-const getTargets = (insertAtSelector: string): Array<HTMLElement> => {
-    const els = Array.from(document.querySelectorAll(insertAtSelector));
-
-    if (els.length) {
-        return [els[0]];
-    }
-
-    return [];
-};
-
-const isCompatibleWithArticleEpic = (page: Object): boolean =>
-    page.contentType === 'Article' &&
-    !page.isMinuteArticle &&
-    isArticleWorthAnEpicImpression(page, defaultExclusionRules);
-
-const isCompatibleWithLiveBlogEpic = (page: Object): boolean =>
-    page.contentType === 'LiveBlog' &&
-    isArticleWorthAnEpicImpression(page, defaultExclusionRules);
-
-const pageShouldHideReaderRevenue = () =>
-    config.get('page.shouldHideReaderRevenue') ||
-    config.get('page.sponsorshipType') === 'paid-content';
-
-const userIsInCorrectCohort = (
-    userCohort: AcquisitionsComponentUserCohort
-): boolean => {
-    switch (userCohort) {
-        case 'PostAskPauseSingleContributors':
-            return (
-                isPostAskPauseOneOffContributor() &&
-                !shouldHideSupportMessaging()
-            );
-        case 'AllExistingSupporters':
-            return shouldHideSupportMessaging();
-        case 'AllNonSupporters':
-            return !shouldHideSupportMessaging();
-        case 'Everyone':
-        default:
-            return true;
-    }
-};
-
-const isValidCohort = (cohort: string): boolean =>
-    [
-        'AllExistingSupporters',
-        'AllNonSupporters',
-        'Everyone',
-        'PostAskPauseSingleContributors',
-    ].includes(cohort);
-
-const shouldShowEpic = (test: EpicABTest): boolean => {
-    const onCompatiblePage = test.pageCheck(config.get('page'));
-
-    const tagsMatch = doTagsMatch(test);
-
-    return (
-        !pageShouldHideReaderRevenue() &&
-        onCompatiblePage &&
-        userIsInCorrectCohort(test.userCohort) &&
-        tagsMatch
-    );
-};
-
-const createTestAndVariantId = (campaignCodePrefix, campaignID, id) =>
-    `${campaignCodePrefix}_${campaignID}_${id}`;
-
-const makeEvent = (id: string, event: string): string => `${id}:${event}`;
-
-const pageMatchesTags = (tagIds: string[]): boolean =>
-    tagIds.some(tagId =>
-        `${config.get('page.keywordIds')},${config.get(
-            'page.nonKeywordTagIds'
-        )}`.includes(tagId)
-    );
-
-const userMatchesCountryGroups = (
-    countryGroups: string[],
-    geolocation: ?string
-) => {
-    const userCountryGroupId = geolocation
-        ? countryCodeToCountryGroupId(geolocation).toUpperCase()
-        : undefined;
-    return countryGroups.some(
-        countryGroup => userCountryGroupId === countryGroup.toUpperCase()
-    );
-};
-
-const pageMatchesSections = (sectionIds: string[]): boolean =>
-    sectionIds.some(section => config.get('page.section') === section);
-
-const copyHasVariables = (text: ?string): boolean =>
-    !!text && text.includes('%%');
-
-const countryNameIsOk = (
-    testHasCountryName: boolean,
-    geolocation: ?string
-): boolean => (testHasCountryName ? !!getCountryName(geolocation) : true);
-
-const articleViewCountIsOk = (
-    articlesViewedSettings?: ArticlesViewedSettings
-): boolean => {
-    if (articlesViewedSettings && getCookie(ARTICLES_VIEWED_OPT_OUT_COOKIE.name)) {
-        // User has opted out of articles viewed counting
-        return false;
-    } else if (articlesViewedSettings) {
-        const upperOk = articlesViewedSettings.maxViews
-            ? articlesViewedSettings.count <= articlesViewedSettings.maxViews
-            : true;
-        const lowerOk = articlesViewedSettings.minViews
-            ? articlesViewedSettings.count >= articlesViewedSettings.minViews
-            : true;
-        return upperOk && lowerOk;
-    }
-    return true;
-};
-
-const emitBeginEvent = (trackingCampaignId: string) => {
-    mediator.emit('register:begin', trackingCampaignId);
-};
-
-const submitOphanInsert = (
-    testId: string,
-    variantId: string,
-    componentType: OphanComponentType,
-    products: $ReadOnlyArray<OphanProduct>,
-    campaignCode: string
-) => {
-    submitInsertEvent({
-        component: {
-            componentType,
-            products,
-            campaignCode,
-            id: campaignCode,
-        },
-        abTest: {
-            name: testId,
-            variant: variantId,
-        },
-    });
-};
-
-const setupOphanView = (
-    element: HTMLElement,
-    testId: string,
-    variantId: string,
-    campaignCode: string,
-    trackingCampaignId: string,
-    componentType: OphanComponentType,
-    products: $ReadOnlyArray<OphanProduct>,
-    showTicker: boolean = false,
-    tickerSettings: ?TickerSettings,
-) => {
-    const inView = elementInView(element, window, {
-        top: 18,
-    });
-
-    inView.on('firstview', () => {
-        logView(testId);
-
-        submitViewEvent({
-                component: {
-                    componentType,
-                    products,
-                    campaignCode,
-                    id: campaignCode,
-                },
-                abTest: {
-                    name: testId,
-                    variant: variantId,
-                }
-            }
-        );
-
-        mediator.emit('register:end', trackingCampaignId);
-
-        if (showTicker || !!tickerSettings) {
-            initTicker('.js-epic-ticker', tickerSettings);
-        }
-
-        if (config.get('switches.showContributionReminder')) {
-            const htmlElements = getFields();
-            if (htmlElements) {
-                epicReminderEmailSignup(htmlElements);
-            }
-        }
-
-        onEpicViewed();
-    });
-};
-
-const setupClickHandling = (
-    testId: string,
-    variantId: string,
-    componentType: OphanComponentType,
-    campaignCode: ?string,
-    products: $ReadOnlyArray<OphanProduct>,
-) => {
-    awaitEpicButtonClicked().then(() =>
-        submitClickEvent({
-            component: {
-                componentType,
-                products,
-                campaignCode: campaignCode || '',
-                id: campaignCode || '',
-            },
-            abTest: {
-                name: testId,
-                variant: variantId,
-            },
-        })
-    );
-};
-
-const makeEpicABTestVariant = (
-    initVariant: InitEpicABTestVariant,
-    parentTemplate: EpicTemplate,
-    parentTest: EpicABTest
-): EpicVariant => {
-    const trackingCampaignId = `epic_${parentTest.campaignId}`;
-    const componentId = createTestAndVariantId(
-        parentTest.campaignPrefix,
-        parentTest.campaignId,
-        initVariant.id
-    );
-    const campaignCode = createTestAndVariantId(
-        parentTest.campaignPrefix,
-        parentTest.campaignId,
-        initVariant.id
-    );
-
-    const addTrackingAndCountryGroupToCta = (cta: EpicCta): EpicCta => ({
-        url: addTrackingCodesToUrl({
-            base: addCountryGroupToSupportLink(cta.url),
-            componentType: parentTest.componentType,
-            componentId,
-            campaignCode,
-            abTest: {
-                name: parentTest.id,
-                variant: initVariant.id,
-            },
-        }),
-        ctaText: cta.ctaText,
-    });
-
-    return {
-        id: initVariant.id,
-        componentName: `mem_acquisition_${trackingCampaignId}_${
-            initVariant.id
-        }`,
-        campaignCode,
-        supportURL: addTrackingCodesToUrl({
-            base: initVariant.supportBaseURL
-                ? addCountryGroupToSupportLink(initVariant.supportBaseURL)
-                : supportContributeURL(),
-            componentType: parentTest.componentType,
-            componentId,
-            campaignCode,
-            abTest: {
-                name: parentTest.id,
-                variant: initVariant.id,
-            },
-        }),
-        template: initVariant.template || parentTemplate,
-        buttonTemplate: initVariant.buttonTemplate,
-        ctaText: initVariant.ctaText,
-        secondaryCta: initVariant.secondaryCta && addTrackingAndCountryGroupToCta(initVariant.secondaryCta),
-        copy: initVariant.copy,
-        classNames: initVariant.classNames || [],
-        showTicker: initVariant.showTicker || false,
-        tickerSettings: initVariant.tickerSettings,
-        showReminderFields: initVariant.showReminderFields || false,
-        backgroundImageUrl: initVariant.backgroundImageUrl,
-
-        countryGroups: initVariant.countryGroups || [],
-        tagIds: initVariant.tagIds || [],
-        sections: initVariant.sections || [],
-        excludedTagIds: initVariant.excludedTagIds || [],
-        excludedSections: initVariant.excludedSections || [],
-
-        canRun() {
-            const copyIsValid = () =>
-                !this.copy ||
-                (!copyHasVariables(this.copy.heading) &&
-                    !this.copy.paragraphs.some(copyHasVariables) &&
-                    !copyHasVariables(this.copy.highlightedText));
-
-            const checkMaxViews = (maxViews: MaxViews) => {
-                const {
-                    count: maxViewCount,
-                    days: maxViewDays,
-                    minDaysBetweenViews: minViewDays,
-                } = maxViews;
-
-                const testId = parentTest.useLocalViewLog
-                    ? parentTest.id
-                    : undefined;
-
-                const withinViewLimit =
-                    viewsInPreviousDays(maxViewDays, testId) < maxViewCount;
-                const enoughDaysBetweenViews =
-                    viewsInPreviousDays(minViewDays, testId) === 0;
-
-                return withinViewLimit && enoughDaysBetweenViews;
-            };
-
-            const meetsMaxViewsConditions =
-                parentTest.deploymentRules === 'AlwaysAsk' ||
-                checkMaxViews(parentTest.deploymentRules);
-
-            const matchesCountryGroups =
-                this.countryGroups.length === 0 ||
-                userMatchesCountryGroups(
-                    this.countryGroups,
-                    parentTest.geolocation
-                );
-
-            const matchesTagsOrSections =
-                (this.tagIds.length === 0 && this.sections.length === 0) ||
-                (pageMatchesTags(this.tagIds) ||
-                    pageMatchesSections(this.sections));
-
-            const noExcludedTags = !pageMatchesTags(this.excludedTagIds);
-            const notExcludedSection = !pageMatchesSections(
-                this.excludedSections
-            );
-
-            return (
-                (!initVariant.canRun || initVariant.canRun()) &&
-                meetsMaxViewsConditions &&
-                matchesCountryGroups &&
-                matchesTagsOrSections &&
-                noExcludedTags &&
-                notExcludedSection &&
-                copyIsValid()
-            );
-        },
-
-        test() {
-            Promise.resolve(this.copy)
-                .then((copy: AcquisitionsEpicTemplateCopy) =>
-                    this.template(this, copy)
-                )
-                .then(renderedTemplate => {
-                    if (initVariant.test) {
-                        const parent = parentTest;
-                        initVariant.test(renderedTemplate, this, parent);
-                    } else {
-                        // Standard epic insertion. TODO - this could do with a refactor
-                        const component = $.create(renderedTemplate);
-
-                        emitBeginEvent(trackingCampaignId);
-
-                        return fastdom.mutate(() => {
-                            const targets = getTargets('.submeta');
-
-                            setupClickHandling(
-                                parentTest.id,
-                                initVariant.id,
-                                parentTest.componentType,
-                                campaignCode,
-                                initVariant.products,
-                            );
-
-                            if (targets.length > 0) {
-                                component.insertBefore(targets);
-
-                                submitOphanInsert(
-                                    parentTest.id,
-                                    initVariant.id,
-                                    parentTest.componentType,
-                                    initVariant.products,
-                                    campaignCode,
-                                );
-
-                                component.each(element => {
-                                    setupArticlesViewedOptOut();
-
-                                    setupOphanView(
-                                        element,
-                                        parentTest.id,
-                                        initVariant.id,
-                                        campaignCode,
-                                        trackingCampaignId,
-                                        parentTest.componentType,
-                                        initVariant.products,
-                                        initVariant.showTicker,
-                                        initVariant.tickerSettings,
-                                    );
-                                });
-                            }
-
-                            return component[0];
-                        });
-                    }
-                });
-        },
-    };
-};
-
-const makeEpicABTest = ({
-    id,
-    start,
-    expiry,
-    author,
-    idealOutcome,
-    campaignId,
-    description,
-    audience,
-    audienceOffset,
-    successMeasure,
-    audienceCriteria,
-    variants,
-    geolocation,
-    highPriority,
-
-    // optional params
-    campaignPrefix = 'gdnwb_copts_memco',
-    useLocalViewLog = false,
-    useTargetingTool = false,
-    userCohort = 'AllNonSupporters',
-    testHasCountryName = false,
-    pageCheck = isCompatibleWithArticleEpic,
-    template = controlTemplate,
-    canRun = () => true,
-    articlesViewedSettings,
-    deploymentRules,
-}: InitEpicABTest): EpicABTest => {
-    const test = {
-        // this is true because we use the reader revenue flag rather than sensitive
-        // to disable contributions asks for a particular piece of content
-        showForSensitive: true,
-        geolocation,
-        highPriority,
-        canRun() {
-            return (
-                canRun() &&
-                countryNameIsOk(testHasCountryName, geolocation) &&
-                articleViewCountIsOk(articlesViewedSettings) &&
-                shouldShowEpic(this)
-            );
-        },
-        componentType: 'ACQUISITIONS_EPIC',
-        insertEvent: makeEvent(id, 'insert'),
-        viewEvent: makeEvent(id, 'view'),
-
-        variants: [],
-
-        id,
-        start,
-        expiry,
-        author,
-        description,
-        audience,
-        audienceOffset,
-        successMeasure,
-        audienceCriteria,
-        idealOutcome,
-        campaignId,
-        campaignPrefix,
-        useLocalViewLog,
-        userCohort,
-        pageCheck,
-        useTargetingTool,
-        deploymentRules: deploymentRules || defaultMaxViews,
-    };
-
-    test.variants = variants.map(variant =>
-        makeEpicABTestVariant(variant, template, test)
-    );
-
-    return test;
-};
-
-const buildEpicCopy = (
-    row: any,
-    testHasCountryName: boolean,
-    geolocation: ?string,
-    articlesViewedCount?: number
-) => {
-    const heading = row.heading;
-
-    const paragraphs: string[] = throwIfEmptyArray(
-        'paragraphs',
-        row.paragraphs
-    );
-
-    const countryName: ?string = testHasCountryName
-        ? getCountryName(geolocation)
-        : undefined;
-
-    const localCurrencySymbol = getLocalCurrencySymbol(geolocation);
-    const replaceCurrencySymbol = (s: string): string => s.replace(
-        /%%CURRENCY_SYMBOL%%/g,
-        localCurrencySymbol,
-    );
-
-    const replaceTemplates = (s: string): string =>
-        replaceCurrencySymbol(
-            replaceArticlesViewed(
-                replaceCountryName(s, countryName),
-                articlesViewedCount
-            )
-        );
-
-
-    return {
-        heading: heading
-            ? replaceTemplates(heading)
-            : heading,
-        paragraphs: paragraphs.map<string>(replaceTemplates),
-        highlightedText: row.highlightedText
-            ? replaceCurrencySymbol(row.highlightedText)
-            : undefined,
-        footer: optionalSplitAndTrim(row.footer, '\n'),
-    };
-};
-
-const buildBannerCopy = (
-    text: string,
-    testHasCountryName: boolean,
-    geolocation: ?string
-): string => {
-    const countryName: ?string = testHasCountryName
-        ? getCountryName(geolocation)
-        : undefined;
-
-    return countryName ? replaceCountryName(text, countryName) : text;
-};
-
-export const buildConfiguredEpicTestFromJson = (
-    test: Object
-): InitEpicABTest => {
-    const geolocation = geolocationGetSync();
-
-    const countryGroups = test.locations;
-    const tagIds = test.tagIds;
-    const sections = test.sections;
-    const excludedTagIds = test.excludedTagIds;
-    const excludedSections = test.excludedSections;
-
-    const parseMaxViews = (): MaxViews =>
-        test.maxViews
-            ? ({
-                  days: test.maxViews.maxViewsDays,
-                  count: test.maxViews.maxViewsCount,
-                  minDaysBetweenViews: test.maxViews.minDaysBetweenViews,
-              }: MaxViews)
-            : defaultMaxViews;
-
-    const deploymentRules = test.alwaysAsk ? 'AlwaysAsk' : parseMaxViews();
-
-    const articlesViewedSettings =
-        test.articlesViewedSettings && test.articlesViewedSettings.periodInWeeks
-            ? {
-                  minViews: test.articlesViewedSettings.minViews,
-                  maxViews: test.articlesViewedSettings.maxViews,
-                  count: getArticleViewCountForWeeks(
-                      test.articlesViewedSettings.periodInWeeks
-                  ),
-              }
-            : undefined;
-
-    return {
-        id: test.name,
-        campaignId: test.name,
-        geolocation,
-        highPriority: test.highPriority,
-
-        start: '2018-01-01',
-        expiry: '2025-01-01',
-
-        author: 'Epic test tool',
-        description: 'Epic test tool',
-        successMeasure: 'AV2.0',
-        idealOutcome: 'Epic test tool',
-        audienceCriteria: 'All',
-        audience: parseFloat(test.audience) ? test.audience : 1,
-        audienceOffset: parseFloat(test.audienceOffset)
-            ? test.audienceOffset
-            : 0,
-        useLocalViewLog: test.useLocalViewLog,
-        userCohort:
-            test.userCohort && isValidCohort(test.userCohort)
-                ? test.userCohort
-                : 'AllNonSupporters',
-        ...(test.isLiveBlog
-            ? {
-                  template: liveBlogTemplate(),
-                  pageCheck: isCompatibleWithLiveBlogEpic,
-              }
-            : {
-                  template: controlTemplate,
-                  pageCheck: isCompatibleWithArticleEpic,
-              }),
-        // If testHasCountryName is true but a country name is not available for this user then
-        // they will be excluded from this test
-        testHasCountryName: test.hasCountryName,
-        articlesViewedSettings,
-        deploymentRules,
-
-        variants: test.variants.map(variant => ({
-            id: variant.name,
-            ...(test.isLiveBlog ? { test: setupEpicInLiveblog } : {}),
-            ...(variant.cta
-                ? {
-                      buttonTemplate: epicButtonsTemplate,
-                      ctaText: variant.cta.text,
-                      supportBaseURL: variant.cta.baseUrl,
-                  }
-                : {}),
-            secondaryCta:
-                variant.secondaryCta &&
-                variant.secondaryCta.baseUrl &&
-                variant.secondaryCta.text
-                    ? {
-                          url: variant.secondaryCta.baseUrl,
-                          ctaText: variant.secondaryCta.text,
-                      }
-                    : undefined,
-            copy: buildEpicCopy(
-                variant,
-                test.hasCountryName,
-                geolocation,
-                articlesViewedSettings
-                    ? articlesViewedSettings.count
-                    : undefined
-            ),
-            classNames: [
-                `contributions__epic--${test.name}`,
-                `contributions__epic--${test.name}-${variant.name}`,
-            ],
-            showTicker: variant.showTicker,
-            tickerSettings: variant.tickerSettings ? parseTickerSettings(variant.tickerSettings) : null,
-            showReminderFields: variant.showReminderFields,
-            backgroundImageUrl: filterEmptyString(variant.backgroundImageUrl),
-            // TODO - why are these fields at the variant level?
-            countryGroups,
-            tagIds,
-            sections,
-            excludedTagIds,
-            excludedSections,
-        })),
-    };
-};
-
-export const getConfiguredLiveblogEpicTests = (): Promise<$ReadOnlyArray<EpicABTest>> =>
-    getLiveblogEpicTestData()
-        .then(epicTestData => {
-            if (epicTestData.tests) {
-                const showDrafts = window.location.hash === '#show-draft-epics';
-                return epicTestData.tests
-                    .filter(test => test.isOn || showDrafts)
-                    .map(json =>
-                        makeEpicABTest(buildConfiguredEpicTestFromJson(json))
-                    );
-            }
-            return [];
-        })
-        .catch((err: Error) => {
-            reportError(
-                new Error(
-                    `Error getting multiple configured liveblog epic tests. ${
-                        err.message
-                        }. Stack: ${err.stack}`
-                ),
-                {
-                    feature: 'epic',
-                },
-                false
-            );
-            return [];
-        });
-
-// This is called by individual banner AbTests in their canRun functions
-// TODO - banner testing needs a refactor, as currently both canRun and canShow need to call this
-export const canShowBannerSync = (
-    minArticlesBeforeShowingBanner: number = 3,
-    userCohort: AcquisitionsComponentUserCohort = 'AllNonSupporters'
-): boolean => {
-    const userHasSeenEnoughArticles: boolean =
-        getVisitCount() >= minArticlesBeforeShowingBanner;
-    const bannerIsBlockedForEditorialReasons = pageShouldHideReaderRevenue();
-
-    return (
-        userHasSeenEnoughArticles &&
-        !bannerIsBlockedForEditorialReasons &&
-        userIsInCorrectCohort(userCohort)
-    );
-};
-
-export const getEngagementBannerTestsFromGoogleDoc = (): Promise<
-    $ReadOnlyArray<AcquisitionsABTest>
-> =>
-    getGoogleDoc(bannerMultipleTestsGoogleDocUrl)
-        .then(googleDocJson => {
-            const sheets = googleDocJson && googleDocJson.sheets;
-
-            if (!sheets) {
-                return [];
-            }
-
-            return Object.keys(sheets)
-                .filter(testName => testName.endsWith('__ON'))
-                .map(name => {
-                    const rows = sheets[name];
-                    const testName = name.split('__ON')[0];
-
-                    // If testHasCountryName is true but a country name is not available for this user then
-                    // they will be excluded from this test
-                    const testHasCountryName = rows.some(row =>
-                        optionalStringToBoolean(row.hasCountryName)
-                    );
-
-                    const rowWithLocations = rows.find(
-                        row =>
-                            row.locations !== undefined && row.locations !== ''
-                    );
-                    const countryGroups = rowWithLocations
-                        ? optionalSplitAndTrim(rowWithLocations.locations, ',')
-                        : [];
-
-                    const geolocation = geolocationGetSync();
-
-                    return {
-                        id: testName,
-                        campaignId: testName,
-                        componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER',
-
-                        start: '2018-01-01',
-                        expiry: '2025-01-01',
-
-                        author: 'Google Docs',
-                        description: 'Google Docs',
-                        successMeasure: 'AV2.0',
-                        idealOutcome: 'Google Docs',
-                        audienceCriteria: 'All',
-                        audience: 1,
-                        audienceOffset: 0,
-
-                        geolocation,
-                        showForSensitive: false,
-                        canRun: () => {
-                            const matchesCountryGroups =
-                                countryGroups.length === 0 ||
-                                userMatchesCountryGroups(
-                                    countryGroups,
-                                    geolocation
-                                );
-
-                            return (
-                                countryNameIsOk(
-                                    testHasCountryName,
-                                    geolocation
-                                ) && matchesCountryGroups
-                            );
-                        },
-
-                        variants: rows.map(row => {
-                            const leadSentence = row.leadSentence
-                                ? buildBannerCopy(
-                                      row.leadSentence.trim(),
-                                      testHasCountryName,
-                                      geolocation
-                                  )
-                                : undefined;
-
-                            const messageText = buildBannerCopy(
-                                row.messageText.trim(),
-                                testHasCountryName,
-                                geolocation
-                            );
-
-                            const ctaText = `<span class="engagement-banner__highlight"> ${row.ctaText.replace(
-                                /%%CURRENCY_SYMBOL%%/g,
-                                getLocalCurrencySymbol(geolocation)
-                            )}</span>`;
-
-                            return {
-                                id: row.name.trim().toLowerCase(),
-                                products: [],
-                                test: () => {},
-
-                                engagementBannerParams: {
-                                    leadSentence,
-                                    messageText,
-                                    ctaText,
-                                    buttonCaption: row.buttonCaption.trim(),
-                                    linkUrl: row.linkUrl.trim(),
-                                    hasTicker: false,
-                                },
-                                canRun: () => {
-                                    const copyIsValid = () =>
-                                        !copyHasVariables(leadSentence) &&
-                                        !copyHasVariables(messageText) &&
-                                        !copyHasVariables(ctaText);
-
-                                    return canShowBannerSync() && copyIsValid();
-                                },
-                            };
-                        }),
-                    };
-                });
-        })
-        .catch((err: Error) => {
-            reportError(
-                new Error(
-                    `Error getting multiple engagement banner tests from Google Docs. ${
-                        err.message
-                    }. Stack: ${err.stack}`
-                ),
-                {
-                    feature: 'engagement-banner',
-                },
-                false
-            );
-            return [];
-        });
-
-export {
-    pageShouldHideReaderRevenue,
-    shouldShowEpic,
-    makeEpicABTest,
-    defaultMaxViews,
-    getReaderRevenueRegion,
-    userIsInCorrectCohort,
-    getVisitCount,
-    buildEpicCopy,
-    buildBannerCopy,
-    emitBeginEvent,
-    submitOphanInsert,
-    setupOphanView,
-    setupClickHandling,
-    isCompatibleWithLiveBlogEpic,
-    replaceArticlesViewed,
-    makeEvent,
-    liveBlogTemplate,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-utilities.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-utilities.spec.js
deleted file mode 100644
index 7e16b8e4e68..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/contributions-utilities.spec.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/contributions-utilities.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { getCookie as getCookie_ } from 'lib/cookies';
-import config from 'lib/config';
-import { buildConfiguredEpicTestFromJson, replaceArticlesViewed } from './contributions-utilities';
-
-jest.mock('lib/raven');
-jest.mock('ophan/ng', () => null);
-
-const getCookie: any = getCookie_;
-
-jest.mock('lib/cookies', () => ({
-    getCookie: jest.fn(),
-}));
-
-const rawTest = {
-    name: 'my_test',
-    isOn: true,
-    locations: ['UnitedStates', 'Australia'],
-    tagIds: ['football/football'],
-    sections: [],
-    excludedTagIds: [],
-    excludedSections: [],
-    alwaysAsk: false,
-    isLiveBlog: false,
-    hasCountryName: false,
-    variants: [
-        {
-            name: 'Control',
-            heading: 'This was made using the new tool!',
-            paragraphs: ['testing testing', 'this is a test'],
-            highlightedText: 'Some highlighted text',
-            footer: '',
-            showTicker: false,
-            showReminderFields: null,
-            backgroundImageUrl: '',
-        },
-    ],
-    highPriority: false,
-    useLocalViewLog: false,
-    articlesViewedSettings: {
-        minViews: 5,
-        maxViews: 10,
-        periodInWeeks: 4,
-    },
-    maxViews: {
-        maxViewsDays: 30,
-        maxViewsCount: 4,
-        minDaysBetweenViews: 0,
-    },
-};
-
-describe('buildConfiguredEpicTestFromJson', () => {
-    it('Parses and constructs an epic test', () => {
-        const test: InitEpicABTest = buildConfiguredEpicTestFromJson(rawTest);
-        expect(test.id).toBe('my_test');
-        expect(test.useLocalViewLog).toBe(false);
-        expect(test.userCohort).toBe('AllNonSupporters');
-
-        expect(test.articlesViewedSettings).toEqual({
-            minViews: 5,
-            maxViews: 10,
-            count: 0,
-        });
-
-        const variant: InitEpicABTestVariant = test.variants[0];
-        expect(variant.id).toBe('Control');
-        expect(variant.countryGroups).toEqual(['UnitedStates', 'Australia']);
-        expect(variant.tagIds).toEqual(['football/football']);
-        expect(variant.classNames).toEqual([
-            'contributions__epic--my_test',
-            'contributions__epic--my_test-Control',
-        ]);
-        expect(variant.copy).toEqual({
-            heading: 'This was made using the new tool!',
-            paragraphs: ['testing testing', 'this is a test'],
-            footer: [],
-            highlightedText: 'Some highlighted text',
-        });
-
-        expect(test.deploymentRules).toEqual({
-            days: 30,
-            count: 4,
-            minDaysBetweenViews: 0,
-        });
-    });
-});
-
-describe('replaceArticlesViewed', () => {
-    it('should do nothing if no template', () => {
-        const text = 'This has no template.';
-        expect(replaceArticlesViewed(text, 5)).toBe(text)
-    });
-
-    it('should replace the template with opt-out feature html', () => {
-        config.set('switches.showArticlesViewedOptOut', true);
-        getCookie.mockReturnValue(1);   // mvt values in the lower half of the range are in the variant
-
-        const text = 'You have read %%ARTICLE_COUNT%% articles.';
-        const expected = 'You have read \n' +
-            '    <span class="epic-article-count">\n' +
-            '        <input type="checkbox" id="epic-article-count__dialog-checkbox" class="epic-article-count__dialog-checkbox" />\n' +
-            '        <label for="epic-article-count__dialog-checkbox" class="epic-article-count__prompt-label">\n' +
-            '            <a>5  articles</a>\n' +
-            '        </label>\n' +
-            '        <span class="epic-article-count__dialog">\n' +
-            '            <span class="epic-article-count__dialog-close is-hidden">\n' +
-            '                <button tabindex="4" class="epic-article-count__dialog-close-button js-site-message-close" data-link-name="hide release message">\n' +
-            '                    <span class="u-h">Close the articles viewed opt out message</span>\n' +
-            '                    <svg></svg>\n' +
-            '                </button>\n' +
-            '            </span>\n' +
-            '        \n' +
-            '            <span class="epic-article-count__dialog-header">What\'s this?</span>\n' +
-            '            <span class="epic-article-count__dialog-body">We would like to remind you how many Guardian articles you\'ve enjoyed on this device. Can we continue showing you this?</span>\n' +
-            '            \n' +
-            '            <span class="epic-article-count__buttons">\n' +
-            '                <a class="component-button component-button--hasicon-right contributions__contribute--epic-member epic-article-count__button-opt-in"\n' +
-            '                  target="_blank">\n' +
-            '                  Yes, that\'s OK\n' +
-            '                </a>\n' +
-            '\n' +
-            '                <a class="component-button component-button--hasicon-right contributions__contribute--epic-member epic-article-count__button-opt-out"\n' +
-            '                  target="_blank">\n' +
-            '                  No, opt me out\n' +
-            '                </a>\n' +
-            '            </span>\n' +
-            '            \n' +
-            '            <span class="epic-article-count__dialog-note">Please note you cannot undo this action or opt back in</span>\n' +
-            '        </span>\n' +
-            '    </span>\n' +
-            '.';
-
-        expect(replaceArticlesViewed(text, 5)).toBe(expected)
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic-articles-viewed-opt-out.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic-articles-viewed-opt-out.js
deleted file mode 100644
index d71e6f47e25..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic-articles-viewed-opt-out.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic-articles-viewed-opt-out.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {submitClickEvent, submitViewEvent} from "common/modules/commercial/acquisitions-ophan";
-import { ARTICLES_VIEWED_OPT_OUT_COOKIE } from "common/modules/commercial/user-features";
-import { storageKeyWeeklyArticleCount, storageKeyDailyArticleCount } from "common/modules/onward/history";
-import {addCookie} from "lib/cookies";
-import { storage } from '@guardian/libs';
-import reportError from "lib/report-error";
-
-type ArticlesViewedOptOutElements = {
-    checkbox: HTMLInputElement,
-    labelElement: HTMLElement,
-    optOutButton: HTMLElement,
-    optInButton: HTMLElement,
-    closeButton: HTMLElement,
-    buttons: HTMLElement,
-    header: HTMLElement,
-    body: HTMLElement,
-    note: HTMLElement,
-}
-
-const getElements = (container: HTMLElement): ?ArticlesViewedOptOutElements => {
-    const checkbox = container.querySelector('#epic-article-count__dialog-checkbox');
-
-    const labelElement = container.querySelector('.epic-article-count__prompt-label');
-    const optOutButton = container.querySelector('.epic-article-count__button-opt-out');
-    const optInButton = container.querySelector('.epic-article-count__button-opt-in');
-
-    const closeButton = container.querySelector('.epic-article-count__dialog-close');
-    const buttons = container.querySelector('.epic-article-count__buttons');
-    const header = container.querySelector('.epic-article-count__dialog-header');
-    const body = container.querySelector('.epic-article-count__dialog-body');
-    const note = container.querySelector('.epic-article-count__dialog-note');
-
-    if (
-        checkbox instanceof HTMLInputElement &&
-        labelElement &&
-        optOutButton &&
-        optInButton &&
-        closeButton &&
-        buttons &&
-        header &&
-        body &&
-        note
-    ) {
-        return {
-            checkbox,
-            labelElement,
-            optOutButton,
-            optInButton,
-            closeButton,
-            buttons,
-            header,
-            body,
-            note
-        }
-    }
-};
-
-const setupHandlers = (elements: ArticlesViewedOptOutElements) => {
-
-    const hideDialog = () => {
-        // This is the hidden checkbox that we use to hide/unhide the dialog using css only
-        elements.checkbox.checked = false;
-    };
-
-    const onArticlesViewedClick = () => {
-        // Only need to send the tracking event here, as the dialog is displayed using only css
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'articles-viewed-opt-out_open',
-            },
-        });
-    };
-
-    const onOptOutClick = () => {
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'articles-viewed-opt-out_out',
-            },
-        });
-
-        // Stop counting and clear the user's history
-        addCookie(ARTICLES_VIEWED_OPT_OUT_COOKIE.name, new Date().getTime().toString(), ARTICLES_VIEWED_OPT_OUT_COOKIE.daysToLive);
-        storage.local.remove(storageKeyWeeklyArticleCount);
-        storage.local.remove(storageKeyDailyArticleCount);
-
-        // Update the dialog message
-        elements.closeButton.classList.remove('is-hidden');
-        elements.closeButton.addEventListener('click', () => {
-            hideDialog();
-        });
-
-        elements.buttons.remove();
-        elements.header.innerHTML = `You've opted out`;
-        elements.body.innerHTML = `Starting from your next page view, we won't count the articles you read or show you this message for three months.`;
-        elements.note.innerHTML = `If you have any questions, please <a target="_blank" href="https://www.theguardian.com/help/contact-us">contact us</a>.`;
-    };
-
-    const onOptInClick = () => {
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'articles-viewed-opt-out_in',
-            },
-        });
-
-        hideDialog();
-    };
-
-    elements.labelElement.addEventListener('click', () => {
-        onArticlesViewedClick();
-    });
-
-    elements.optOutButton.addEventListener('click', (event: Event) => {
-        event.preventDefault();
-        onOptOutClick();
-    });
-
-    elements.optInButton.addEventListener('click', (event: Event) => {
-        event.preventDefault();
-        onOptInClick();
-    });
-};
-
-const onEpicViewed = () => {
-    // Send the view event if this is an epic with an articles-viewed count.
-    // Send for both the control and the variant, so that we can measure impact on conversions.
-    const getArticleCountViewEventId = (): ?string => {
-        if (document.querySelector('.epic-article-count')) {
-            return 'articles-viewed-opt-out_view-variant';
-        } else if (document.querySelector('.epic-article-count__normal')) {
-            return 'articles-viewed-opt-out_view-control';
-        }
-            return null;    // no articles-viewed count
-
-    };
-
-    const viewEventId = getArticleCountViewEventId();
-    if (viewEventId) {
-        submitViewEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: viewEventId,
-            },
-        });
-    }
-};
-
-const setupArticlesViewedOptOut = () => {
-    // If this element exists then they're in the variant
-    const articleCountElement = document.querySelector('.epic-article-count');
-
-    if (articleCountElement) {
-        const elements: ?ArticlesViewedOptOutElements = getElements(articleCountElement);
-
-        if (elements) {
-            setupHandlers(elements);
-        } else {
-            reportError(
-                new Error(
-                    `Error setting up articles viewed opt-out in epic: unable to find all elements.`
-                ),
-                {
-                    feature: 'epic',
-                },
-                false
-            );
-        }
-    }
-};
-
-export {
-    setupArticlesViewedOptOut,
-    onEpicViewed,
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic-reminder-email-signup.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic-reminder-email-signup.js
deleted file mode 100644
index 8bb03f15ba3..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic-reminder-email-signup.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic-reminder-email-signup.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import errorTriangle from 'svgs/icon/error-triangle.svg';
-import {submitClickEvent, submitViewEvent} from 'common/modules/commercial/acquisitions-ophan';
-import {addCookie} from "lib/cookies";
-import {CONTRIBUTIONS_REMINDER_SIGNED_UP} from "common/modules/commercial/user-features";
-
-type ReminderState = 'invalid' | 'pending' | 'success' | 'failure';
-
-type Fields = {
-    submitButton: HTMLButtonElement,
-    helpText: HTMLElement,
-    emailInput: HTMLInputElement,
-    formWrapper: HTMLElement,
-    titleField: HTMLElement,
-    thankYouText: HTMLElement,
-    closeButton: HTMLElement,
-    reminderPrompt: HTMLElement,
-    reminderToggle: HTMLInputElement,
-};
-
-const isValidEmail = (email: string) => {
-    const re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
-    return (email.replace(/\s+/g, '') === email) ? re.test(email) : false
-};
-
-const getFields = (): ?Fields => {
-    const helpText = document.querySelector('.epic-reminder__email-help-text');
-    const submitButton = document.querySelector(
-        '.epic-reminder__submit-button'
-    );
-    const emailInput = document.querySelector('.epic-reminder__email-input');
-    const formWrapper = document.querySelector('.epic-reminder__form-wrapper');
-    const titleField = document.querySelector('.epic-reminder__form-title');
-    const thankYouText = document.querySelector('.epic-reminder__thank-you');
-    const closeButton = document.querySelector('.epic-reminder__close-button');
-    const reminderPrompt = document.querySelector(
-        '.component-button--reminder-prompt'
-    );
-    const reminderToggle = document.querySelector(
-        '.epic-reminder__reveal-reminder'
-    );
-
-    if (
-        helpText &&
-        submitButton &&
-        emailInput &&
-        titleField &&
-        thankYouText &&
-        formWrapper &&
-        closeButton &&
-        reminderPrompt &&
-        reminderToggle &&
-        submitButton instanceof HTMLButtonElement &&
-        emailInput instanceof HTMLInputElement &&
-        reminderToggle instanceof HTMLInputElement
-    ) {
-        // when the js html template string is interpreted,
-        // this field gets initialised with a string of whitespace
-        // in order for css ':empty' selector to work properly,
-        // the whitespace string needs to be deleted
-        helpText.innerHTML = '';
-
-        return {
-            submitButton,
-            helpText,
-            emailInput,
-            formWrapper,
-            titleField,
-            thankYouText,
-            closeButton,
-            reminderPrompt,
-            reminderToggle,
-        };
-    }
-};
-
-const epicReminderEmailSignup = (fields: Fields) => {
-    const warningRed = '#c70000';
-
-    submitViewEvent({
-        component: {
-            componentType: 'ACQUISITIONS_OTHER',
-            id: `precontribution-reminder-view`,
-        },
-    });
-
-    const setState = (state: ReminderState) => {
-        switch (state) {
-            case 'invalid':
-                fields.helpText.style.color = warningRed;
-                fields.emailInput.style.outline = `4px solid ${warningRed}`;
-                fields.helpText.innerHTML = `${
-                    errorTriangle.markup
-                } Invalid email address`;
-                break;
-            case 'pending':
-                fields.emailInput.disabled = true;
-                fields.submitButton.disabled = true;
-                fields.emailInput.style.outline = 'initial';
-                fields.submitButton.innerHTML = 'Pending';
-                fields.helpText.innerHTML = '';
-                break;
-            case 'success':
-                fields.thankYouText.style.display = 'block';
-                fields.formWrapper.style.display = 'none';
-                fields.closeButton.style.display = 'none';
-                fields.titleField.innerHTML =
-                    'Thank you! Your reminder is set.';
-
-                addCookie(
-                    CONTRIBUTIONS_REMINDER_SIGNED_UP.name,
-                    new Date().getTime().toString(),
-                    CONTRIBUTIONS_REMINDER_SIGNED_UP.daysToLive
-                );
-
-                break;
-            case 'failure':
-                fields.submitButton.innerHTML = 'Something went wrong';
-                fields.helpText.innerHTML =
-                    "Sorry we weren't able to sign you up for a reminder, please try again later";
-                break;
-            default:
-                break;
-        }
-    };
-
-    const sendReminderEvent = (): Promise<Response> => {
-        const isProd = config.get('page.isProd');
-
-        const email = fields.emailInput.value.trim() || '';
-
-        if (!isValidEmail(email)) {
-            setState('invalid');
-            return Promise.reject(new Error('Email is invalid'));
-        }
-
-        setState('pending');
-
-        const reminderDate = fields.submitButton.getAttribute(
-            'data-reminder-date'
-        );
-
-        const createReminderEndpoint = isProd
-            ? 'https://contribution-reminders.support.guardianapis.com/remind-me'
-            : 'https://contribution-reminders-code.support.guardianapis.com/remind-me';
-
-        return fetch(createReminderEndpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                email,
-                reminderDate,
-                isPreContribution: true,
-            }),
-        });
-    };
-
-    fields.submitButton.addEventListener('click', (event: Event) => {
-        event.preventDefault();
-        sendReminderEvent()
-            .then(response => {
-                if (response.ok) {
-                    setState('success');
-                } else {
-                    setState('failure');
-                }
-            })
-            .catch(error => console.error(error));
-    });
-
-    // This bit of logic to send an analytics event when a user
-    // engages with the precontribution reminder is abstracted so it
-    // can be used either in the case that a user clicks or a user
-    // hits enter on their keyboard
-    const sendPromptClickEvent = () => {
-        const ctaAttribute = fields.reminderPrompt.getAttribute(
-            'data-cta-copy'
-        );
-        const ctaForAnalytics = ctaAttribute
-            ? ctaAttribute.toLowerCase().replace(/\s/g, '-')
-            : '';
-
-        // For second round of testing, the events will be
-        // precontribution-reminder-prompt-copy-remind-me-in-september
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: `precontribution-reminder-prompt-copy-${ctaForAnalytics}`,
-            },
-        });
-    };
-
-    // The reminder's visibility is dependent on a hidden checkbox field
-    // being checked or unchecked (a simple CSS solution), however the checking
-    // and unchecking also needs to happen for users who are just using a
-    // keyboard. This is a light JS solution for toggling the checkbox when a user
-    // hits enter, as they would for a link
-    const toggleReminderVisibility = () => {
-        submitClickEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'precontribution-reminder-reveal-clicked',
-            },
-        });
-        fields.reminderToggle.checked = !fields.reminderToggle.checked;
-    };
-
-    // These are the three event listeners relevant for the above
-    // event handlers
-    fields.reminderPrompt.addEventListener('click', sendPromptClickEvent);
-
-    fields.reminderPrompt.addEventListener(
-        'keypress',
-        (event: KeyboardEvent) => {
-            if (event.key === 'Enter') {
-                sendPromptClickEvent();
-                toggleReminderVisibility();
-            }
-        }
-    );
-
-    fields.closeButton.addEventListener('keypress', (event: KeyboardEvent) => {
-        if (event.key === 'Enter') {
-            toggleReminderVisibility();
-        }
-    });
-};
-
-export { getFields, epicReminderEmailSignup };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-exclusion-rules.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-exclusion-rules.js
deleted file mode 100644
index 92465a163fd..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-exclusion-rules.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic/epic-exclusion-rules.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-type pagePropertiesRelevantToEpic = {|
-    section?: string,
-    toneIds?: string[],
-    keywordIds?: string[],
-|};
-
-// Data has shown that pages with these properties generate significantly
-// less money than others, so we don't want to waste an epic impression on them.
-// Especially since that epic impression deprives us of Outbrain money.
-export const defaultExclusionRules: pagePropertiesRelevantToEpic[] = [
-    // e.g. https://www.theguardian.com/football/2019/mar/27/gordon-taylor-departure-pfa-chief-executive
-    { section: 'football' },
-
-    // e.g. https://www.theguardian.com/money/2018/dec/13/slime-toys-tested-fail-meet-eu-safety-standards-hamleys-christmas
-    { section: 'money' },
-
-    // e.g. https://www.theguardian.com/education/2018/dec/12/female-scholars-are-marginalised-on-wikipedia-because-its-written-by-men
-    { section: 'education' },
-
-    // e.g. https://www.theguardian.com/games/2018/dec/13/cat-condo-is-the-stupidest-most-cynical-game-in-the-app-store-so-why-cant-i-stop-playing
-    { section: 'games' },
-
-    // e.g. https://www.theguardian.com/teacher-network/2018/jun/02/secret-teacher-teaching-children-without-play-soul-destroying-sats-assessment
-    { section: 'teacher-network' },
-
-    // e.g. https://www.theguardian.com/careers/2018/dec/06/dont-expect-a-survivor-to-tell-you-her-experience-of-undergoing-fgm
-    { section: 'careers' },
-
-    // e.g. https://www.theguardian.com/guardian-masterclasses/2018/oct/25/get-healthy-and-live-your-best-life-with-dr-rangan-chatterjee-health-wellness-course
-    { keywordIds: ['guardian-masterclasses/guardian-masterclasses'] },
-];
-
-export const isArticleWorthAnEpicImpression = (
-    page: Object,
-    exclusionRules: pagePropertiesRelevantToEpic[]
-) =>
-    !exclusionRules.some(propertiesToExclude => {
-        const sectionsMatch = propertiesToExclude.section
-            ? propertiesToExclude.section === page.section
-            : true;
-        const toneIdsMatch = propertiesToExclude.toneIds
-            ? propertiesToExclude.toneIds.every(toneId =>
-                  page.toneIds.includes(toneId)
-              )
-            : true;
-        const keywordIdsMatch = propertiesToExclude.keywordIds
-            ? propertiesToExclude.keywordIds.every(keywordId =>
-                  page.keywordIds.includes(keywordId)
-              )
-            : true;
-        return sectionsMatch && toneIdsMatch && keywordIdsMatch;
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-exclusion-rules.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-exclusion-rules.spec.js
deleted file mode 100644
index 89cdbef641d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-exclusion-rules.spec.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic/epic-exclusion-rules.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { isArticleWorthAnEpicImpression } from './epic-exclusion-rules.js';
-
-describe('isArticleWorthAnEpicImpression', () => {
-    describe('when an article matches section but not toneIds of an exclusion rule', () => {
-        it('is worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                { section: 'a', toneIds: 'tone/news', keywordIds: 'us-news' },
-                [{ section: 'a', toneIds: ['tone/blah'] }]
-            );
-            expect(isItWorthIt).toBe(true);
-        });
-    });
-
-    describe('when an article matches section but not keywordIds of an exclusion rule', () => {
-        it('is worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                { section: 'a', toneIds: 'tone/news', keywordIds: 'us-news' },
-                [{ section: 'a', keywordIds: ['us-news', 'something-else'] }]
-            );
-            expect(isItWorthIt).toBe(true);
-        });
-    });
-
-    describe('when an article matches toneIds but not section of an exclusion rule', () => {
-        it('is worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                { section: 'a', toneIds: 'tone/news', keywordIds: 'us-news' },
-                [{ section: 'b', toneIds: ['tone/news'] }]
-            );
-            expect(isItWorthIt).toBe(true);
-        });
-    });
-
-    describe('when an article matches section, all toneIds, but just some of the keywordIds of an exclusion rule', () => {
-        it('is worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                {
-                    section: 'a',
-                    toneIds: 'tone/whatevs,tone/blah,tone/something',
-                    keywordIds: 'trump,us-news',
-                },
-                [
-                    {
-                        section: 'a',
-                        toneIds: ['tone/something', 'tone/whatevs'],
-                        keywordIds: ['us-news', 'clinton'],
-                    },
-                ]
-            );
-            expect(isItWorthIt).toBe(true);
-        });
-    });
-
-    describe('when an article matches toneIds of an exclusion rule which has no section or keywordIds', () => {
-        it('is not worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                {
-                    section: 'a',
-                    toneIds: 'tone/whatevs,tone/blah,tone/something',
-                    keywordIds: 'us-news',
-                },
-                [{ toneIds: ['tone/blah'] }]
-            );
-            expect(isItWorthIt).toBe(false);
-        });
-    });
-
-    describe('when an article matches keywordIds of an exclusion rule which has no section or keywordIds', () => {
-        it('is not worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                {
-                    section: 'a',
-                    toneIds: 'tone/whatevs,tone/blah,tone/something',
-                    keywordIds: 'us-news',
-                },
-                [{ keywordIds: ['us-news'] }]
-            );
-            expect(isItWorthIt).toBe(false);
-        });
-    });
-
-    describe('when an article matches keywordIds and toneIds of an exclusion rule which has no section', () => {
-        it('is not worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                {
-                    section: 'a',
-                    toneIds: 'tone/whatevs,tone/blah,tone/something',
-                    keywordIds: 'trump,us-news',
-                },
-                [
-                    {
-                        toneIds: ['tone/something', 'tone/whatevs'],
-                        keywordIds: ['us-news', 'trump'],
-                    },
-                ]
-            );
-            expect(isItWorthIt).toBe(false);
-        });
-    });
-    describe('when an article matches keywordIds, toneIds and section of an exclusion rule', () => {
-        it('is not worth an epic impression', () => {
-            const isItWorthIt = isArticleWorthAnEpicImpression(
-                {
-                    section: 'a',
-                    toneIds: 'tone/whatevs,tone/blah,tone/something',
-                    keywordIds: 'trump,us-news,blah',
-                },
-                [
-                    {
-                        section: 'a',
-                        toneIds: ['tone/blah', 'tone/whatevs'],
-                        keywordIds: ['blah', 'trump'],
-                    },
-                ]
-            );
-            expect(isItWorthIt).toBe(false);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-utils.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-utils.js
deleted file mode 100644
index 997d72365ea..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/epic-utils.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic/epic-utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-import reportError from 'lib/report-error';
-import mediator from 'lib/mediator';
-
-import type { ReportedError } from 'lib/report-error';
-import type { Spec } from 'common/modules/ui/clickstream';
-import type {
-    ComponentEventWithoutAction,
-} from 'common/modules/commercial/acquisitions-ophan';
-
-export type EpicComponent = {
-    html: HTMLDivElement,
-    componentEvent?: ComponentEventWithoutAction,
-};
-
-const reportEpicError = (error: ReportedError): void => {
-    reportError(error, { feature: 'epic' }, false);
-};
-
-const insertAtSubmeta = (epic: EpicComponent): Promise<EpicComponent> =>
-    fastdom
-        .measure(() => document.querySelector('.submeta'))
-        .then(element => {
-            if (element && element.parentElement) {
-                element.parentElement.insertBefore(epic.html, element);
-                return Promise.resolve(epic);
-            }
-            const error = new Error('unable to insert Epic');
-            reportEpicError(error);
-            return Promise.reject(error);
-        });
-
-const awaitEpicButtonClicked = (): Promise<void> =>
-    new Promise(resolve => {
-        mediator.on('module:clickstream:click', (clickSpec: Spec | boolean) => {
-            if (clickSpec === true || clickSpec === false) {
-                return;
-            }
-            const isEpicClick = clickSpec.tags.find(tag => tag === 'epic');
-            if (isEpicClick) {
-                resolve();
-            }
-        });
-    });
-
-
-export {
-    reportEpicError,
-    insertAtSubmeta,
-    awaitEpicButtonClicked,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/iframe-epic-utils.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/iframe-epic-utils.js
deleted file mode 100644
index b9c04f3928c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/iframe-epic-utils.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic/iframe-epic-utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { getLocalCurrencySymbolSync } from 'lib/geolocation';
-import { constructQuery as constructURLQuery } from 'lib/url';
-
-import {
-    insertAtSubmeta,
-    reportEpicError,
-} from 'common/modules/commercial/epic/epic-utils';
-
-import type { EpicComponent } from 'common/modules/commercial/epic/epic-utils';
-import { submitComponentEvent } from 'common/modules/commercial/acquisitions-ophan';
-
-// origin field useful for determining that messages are being sent / received from the expected iframe.
-export type IframeEpicComponent = EpicComponent & {
-    iframe: HTMLIFrameElement,
-    origin: string,
-};
-
-// channel for messages between Optimize Epic and Guardian frontend
-const OPTIMIZE_EPIC_CHANNEL = 'OPTIMIZE_EPIC';
-
-// messages in this channel (incoming / outgoing) should have the following schema:
-// { channel: 'OPTIMIZE_EPIC', messageType: string, data: ?any }
-
-// incoming event types
-const EPIC_INITIALIZED = 'EPIC_INITIALIZED';
-const EPIC_HEIGHT = 'EPIC_HEIGHT';
-
-const createEpicIframe = (url: string): Error | IframeEpicComponent => {
-    let origin;
-    try {
-        origin = new URL(url).origin;
-    } catch (error) {
-        const iframeError = new Error(
-            `unable to get origin of iframe Epic - ${error}`
-        );
-        reportEpicError(iframeError);
-        return iframeError;
-    }
-
-    const container = document.createElement('div');
-    const iframe = document.createElement('iframe');
-    iframe.src = url;
-    iframe.style.width = '100%';
-    iframe.style.height = '525px';
-    iframe.frameBorder = '0';
-    container.appendChild(iframe);
-    // hard coded for test purposes
-    return {
-        html: container,
-        iframe,
-        origin,
-        componentEvent: {
-            component: {
-                componentType: 'ACQUISITIONS_EPIC',
-                id: 'iframe_control_epic_v2',
-            },
-            abTest: {
-                name: 'iframe_or_not_v2',
-                variant: 'iframe',
-            },
-        },
-    };
-};
-
-const setIframeHeight = (epic: IframeEpicComponent, height: number) => {
-    epic.iframe.style.height = `${height}px`;
-};
-
-const setupListener = (epic: IframeEpicComponent) => {
-    window.addEventListener('message', (event: MessageEvent) => {
-        if (event.origin !== epic.origin) {
-            return;
-        }
-
-        let message = null;
-        try {
-            if (typeof event.data === 'string') {
-                message = JSON.parse(event.data);
-            }
-        } catch (err) {
-            return;
-        }
-
-        if (!message || message.channel !== OPTIMIZE_EPIC_CHANNEL) {
-            return;
-        }
-
-        const data = message.data;
-
-        if (message.messageType === EPIC_INITIALIZED) {
-            if (data.height) {
-                setIframeHeight(epic, data.height);
-            }
-
-            // Track that we got a message out of the iframe
-            submitComponentEvent({
-                action: 'ANSWER',
-                component: {
-                    componentType: 'ACQUISITIONS_EPIC',
-                },
-                value: JSON.stringify(message),
-            });
-
-            return;
-        }
-
-        if (message.messageType === EPIC_HEIGHT && data.height) {
-            setIframeHeight(epic, data.height);
-        }
-    });
-};
-
-const addEpicDataToUrl = (url: string): string => {
-    const params = constructURLQuery({
-        // used in acquisition tracking link
-        pvid: config.get('ophan.pageViewId'),
-        url: window.location.href.split('?')[0],
-        // use to display pricing in local currency
-        lcs: getLocalCurrencySymbolSync(),
-    });
-    return `${url}?${params}`;
-};
-
-const displayIframeEpic = (url: string): Promise<IframeEpicComponent> => {
-    const iframeEpicComponent = createEpicIframe(addEpicDataToUrl(url));
-
-    if (iframeEpicComponent instanceof Error) {
-        reportEpicError(iframeEpicComponent);
-        return Promise.reject(iframeEpicComponent);
-    }
-
-    setupListener(iframeEpicComponent);
-
-    return insertAtSubmeta(iframeEpicComponent)
-        .then(() => iframeEpicComponent)
-        .catch(error => {
-            const iframeError = new Error(
-                `unable to display iframe epic with url ${url} - ${error}`
-            );
-            reportEpicError(iframeError);
-            return Promise.reject(iframeError);
-        });
-};
-
-export { displayIframeEpic };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/optimize-epic-utils.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/optimize-epic-utils.js
deleted file mode 100644
index 926c808a971..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/epic/optimize-epic-utils.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/epic/optimize-epic-utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-
-import { reportEpicError } from 'common/modules/commercial/epic/epic-utils';
-import { displayIframeEpic } from 'common/modules/commercial/epic/iframe-epic-utils';
-
-import type { IframeEpicComponent } from 'common/modules/commercial/epic/iframe-epic-utils';
-
-const displayOptimizeEpic = (): Promise<IframeEpicComponent> => {
-    const url = config.get('page.optimizeEpicUrl');
-    if (url) {
-        // TODO: allow fallback ab test to be set via function argument?
-        return displayIframeEpic(url);
-    }
-    const urlError = new Error('config page.optimizeEpicUrl not found');
-    reportEpicError(urlError);
-    return Promise.reject(urlError);
-};
-
-export { displayOptimizeEpic };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/geo-utils.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/geo-utils.spec.js
deleted file mode 100644
index c2d92da1180..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/geo-utils.spec.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/geo-utils.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {isInUk,
-    isInUsa,
-    isInCanada,
-    isInAustralia,
-    isInNewZealand,
-    isInUsOrCa,
-    isInAuOrNz,
-    isInRow,
-    _} from "common/modules/commercial/geo-utils";
-
-let mockCountryCode;
-jest.mock('lib/geolocation', () => ({
-    getSync: jest.fn(() => mockCountryCode),
-}));
-
-describe('Geolocation Utils', () => {
-    beforeEach(() => {
-        _.resetModule();
-    })
-
-    const testCases = [
-        {
-            fnName: 'isInUk()',
-            mockCountryCode: 'GB',
-            expectedUKValue: true,
-            expectedUsaValue: false,
-            expectedCaValue: false,
-            expectedAuValue: false,
-            expectedNzValue: false,
-            expectedUsOrCaValue: false,
-            expectedAuOrNzValue: false,
-            expectedRowValue: false,
-        },
-        {
-            fnName: 'isInUsa() and isInUsOrCa()',
-            mockCountryCode: 'US',
-            expectedUKValue: false,
-            expectedUsaValue: true,
-            expectedCaValue: false,
-            expectedAuValue: false,
-            expectedNzValue: false,
-            expectedUsOrCaValue: true,
-            expectedAuOrNzValue: false,
-            expectedRowValue: false,
-        },
-        {
-            fnName: 'isInCanada() and isInUsOrCa()',
-            mockCountryCode: 'CA',
-            expectedUKValue: false,
-            expectedUsaValue: false,
-            expectedCaValue: true,
-            expectedAuValue: false,
-            expectedNzValue: false,
-            expectedUsOrCaValue: true,
-            expectedAuOrNzValue: false,
-            expectedRowValue: false,
-        },
-        {
-            fnName: 'isInAustralia() and isInAuOrNz()',
-            mockCountryCode: 'AU',
-            expectedUKValue: false,
-            expectedUsaValue: false,
-            expectedCaValue: false,
-            expectedAuValue: true,
-            expectedNzValue: false,
-            expectedUsOrCaValue: false,
-            expectedAuOrNzValue: true,
-            expectedRowValue: false,
-        },
-        {
-            fnName: 'isInNewZealand() and isInAuOrNz()',
-            mockCountryCode: 'NZ',
-            expectedUKValue: false,
-            expectedUsaValue: false,
-            expectedCaValue: false,
-            expectedAuValue: false,
-            expectedNzValue: true,
-            expectedUsOrCaValue: false,
-            expectedAuOrNzValue: true,
-            expectedRowValue: false,
-        },
-        {
-            fnName: 'isInRow()',
-            mockCountryCode: 'NONE_OF_THE_ABOVE',
-            expectedUKValue: false,
-            expectedUsaValue: false,
-            expectedCaValue: false,
-            expectedAuValue: false,
-            expectedNzValue: false,
-            expectedUsOrCaValue: false,
-            expectedAuOrNzValue: false,
-            expectedRowValue: true,
-        }
-    ]
-
-    testCases.forEach( testCase => {
-        it(`Only ${testCase.fnName} return true for geolocation '${testCase.mockCountryCode}'`, () => {
-            mockCountryCode = testCase.mockCountryCode;
-            expect(isInUk()).toBe(testCase.expectedUKValue);
-            expect(isInUsa()).toBe(testCase.expectedUsaValue);
-            expect(isInCanada()).toBe(testCase.expectedCaValue);
-            expect(isInAustralia()).toBe(testCase.expectedAuValue);
-            expect(isInNewZealand()).toBe(testCase.expectedNzValue);
-            expect(isInUsOrCa()).toBe(testCase.expectedUsOrCaValue);
-            expect(isInAuOrNz()).toBe(testCase.expectedAuOrNzValue);
-            expect(isInRow()).toBe(testCase.expectedRowValue);
-        })
-    })
-})
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-block.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-block.js
deleted file mode 100644
index 9d73f213b98..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-block.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/membership-engagement-banner-block.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { getSync } from 'lib/geolocation';
-import flattenDeep from 'lodash/flattenDeep';
-
-/**
- * A set of front URLs associated with a given region
- * that the engagement banner won't show up against
- * if the appropriate block switch is turned on.
- */
-type RegionalFrontURLs = Array<string>;
-
-/**
- * Blocking incorporates URLs and the user's geolocation
- */
-type BlockConfig = {
-    urls: RegionalFrontURLs,
-    geolocation: string,
-};
-
-/**
- * Associate switch names with blocking configurations
- */
-type SwitchBlockConfig = {
-    [switchName: string]: BlockConfig,
-};
-
-const defaultSwitchConfig: SwitchBlockConfig = {
-    membershipEngagementBannerBlockUk: {
-        urls: ['/uk', '/uk-news'],
-        geolocation: 'GB',
-    },
-
-    membershipEngagementBannerBlockUs: {
-        urls: ['/us', '/us-news'],
-        geolocation: 'US',
-    },
-
-    membershipEngagementBannerBlockAu: {
-        urls: ['/au', '/australia-news'],
-        geolocation: 'AU',
-    },
-};
-
-const allSwitches: Array<string> = ['Uk', 'Us', 'Au'].map(
-    region => `membershipEngagementBannerBlock${region}`
-);
-
-export const isBlocked = (
-    switches: Array<string> = allSwitches,
-    switchBlockConfig: SwitchBlockConfig = defaultSwitchConfig,
-    pathname: string = document.location.pathname,
-    geolocation: string = getSync()
-): boolean => {
-    // the enabled block configurations that apply to the provided geolocation
-    const activeBlockConfigs: Array<BlockConfig> = switches
-        .filter(switchName => !!config.get(`switches.${switchName}`))
-        .map(switchName => switchBlockConfig[switchName])
-        .filter(conf => conf.geolocation === geolocation);
-
-    const blockedUrls: Array<string> = flattenDeep(
-        activeBlockConfigs.map(conf => conf.urls)
-    );
-
-    return blockedUrls.includes(pathname);
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-block.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-block.spec.js
deleted file mode 100644
index d035ea6ce4a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-block.spec.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/membership-engagement-banner-block.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { isBlocked } from './membership-engagement-banner-block';
-
-const switches = ['ukBlock', 'usBlock'];
-
-const switchConfigs = {
-    ukBlock: {
-        urls: ['/uk1', '/uk2'],
-        geolocation: 'GB',
-    },
-    usBlock: {
-        urls: ['/us1', '/us2'],
-        geolocation: 'US',
-    },
-};
-
-describe('Engagement Banner blocking', () => {
-    beforeEach(() => {
-        // disable all blocks
-        config.switches.ukBlock = false;
-        config.switches.usBlock = false;
-    });
-
-    it('should block correct paths when user is in a blocked geolocation', () => {
-        config.switches.ukBlock = true;
-
-        expect(isBlocked(switches, switchConfigs, '/uk1', 'GB')).toBe(true);
-        expect(isBlocked(switches, switchConfigs, '/uk2', 'GB')).toBe(true);
-        expect(isBlocked(switches, switchConfigs, '/us1', 'GB')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/us2', 'GB')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/e', 'GB')).toBe(false);
-
-        config.switches.ukBlock = false;
-        config.switches.usBlock = true;
-
-        expect(isBlocked(switches, switchConfigs, '/uk1', 'US')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/uk2', 'US')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/us1', 'US')).toBe(true);
-        expect(isBlocked(switches, switchConfigs, '/us2', 'US')).toBe(true);
-        expect(isBlocked(switches, switchConfigs, '/e', 'US')).toBe(false);
-    });
-
-    it('should never block paths when user is not in a blocked geolocation', () => {
-        config.switches.ukBlock = true;
-        config.switches.usBlock = true;
-
-        expect(isBlocked(switches, switchConfigs, '/uk1', 'US')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/uk2', 'AU')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/us1', 'AU')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/us2', 'AU')).toBe(false);
-        expect(isBlocked(switches, switchConfigs, '/e', 'AU')).toBe(false);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-parameters.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-parameters.js
deleted file mode 100644
index 772492f1090..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner-parameters.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/membership-engagement-banner-parameters.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { acquisitionsBannerControlTemplate } from 'common/modules/commercial/templates/acquisitions-banner-control';
-import { getEngagementBannerControlFromGoogleDoc } from 'common/modules/commercial/contributions-google-docs';
-import config from 'lib/config';
-import reportError from 'lib/report-error';
-import { getLocalCurrencySymbolSync } from 'lib/geolocation';
-import {
-    supportContributeURL,
-    addCountryGroupToSupportLink,
-} from './support-utilities';
-
-const fallbackCopy: string = `<strong>The Guardian is editorially independent &ndash;
-    our journalism is free from the influence of billionaire owners or politicians.
-    No one edits our editor. No one steers our opinion.</strong> And unlike many others, we haven’t put
-    up a paywall as we want to keep our journalism open and accessible. But the revenue we get from
-    advertising is falling, so we increasingly need our readers to fund our independent, investigative reporting.`;
-
-const getAcquisitionsBannerParams = (
-    rowsFromGoogleDoc: any
-): EngagementBannerParams => {
-    const firstRow = rowsFromGoogleDoc && rowsFromGoogleDoc[0];
-
-    if (
-        !(
-            firstRow &&
-            firstRow.messageText &&
-            firstRow.ctaText &&
-            firstRow.buttonCaption &&
-            firstRow.linkUrl
-        )
-    ) {
-        throw new Error(
-            `Required data from the Google Doc was missing. Got row: ${firstRow}`
-        );
-    }
-
-    const ctaText = `<span class="engagement-banner__highlight"> ${firstRow.ctaText.replace(
-        /%%CURRENCY_SYMBOL%%/g,
-        getLocalCurrencySymbolSync()
-    )}</span>`;
-
-    return {
-        messageText: firstRow.messageText,
-        ctaText,
-        buttonCaption: firstRow.buttonCaption,
-        linkUrl: addCountryGroupToSupportLink(firstRow.linkUrl),
-        hasTicker: false,
-        campaignCode: 'control_banner_from_google_doc',
-        pageviewId: config.get('ophan.pageViewId', 'not_found'),
-        products: ['CONTRIBUTION', 'RECURRING_CONTRIBUTION'],
-        isHardcodedFallback: false,
-        template: acquisitionsBannerControlTemplate,
-        minArticlesBeforeShowingBanner: 2,
-        userCohort: 'AllNonSupporters',
-    };
-};
-
-export const getControlEngagementBannerParams = (): Promise<EngagementBannerParams> =>
-    getEngagementBannerControlFromGoogleDoc()
-        .then(rows => getAcquisitionsBannerParams(rows))
-        .catch(err => {
-            reportError(
-                new Error(
-                    `Could not fetch control banner copy from Google Doc. ${
-                        err.message
-                    }. Stack: ${err.stack}`
-                ),
-                {
-                    feature: 'engagement-banner',
-                },
-                false
-            );
-
-            return {
-                messageText: fallbackCopy,
-                ctaText: `<span class="engagement-banner__highlight"> Support The Guardian from as little as ${getLocalCurrencySymbolSync()}1</span>`,
-                buttonCaption: 'Support The Guardian',
-                linkUrl: supportContributeURL(),
-                hasTicker: false,
-                campaignCode: 'fallback_hardcoded_banner',
-                pageviewId: config.get('ophan.pageViewId', 'not_found'),
-                products: ['CONTRIBUTION', 'RECURRING_CONTRIBUTION'],
-                isHardcodedFallback: true,
-                template: acquisitionsBannerControlTemplate,
-                minArticlesBeforeShowingBanner: 2,
-                userCohort: 'AllNonSupporters',
-            };
-        });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner.js
deleted file mode 100644
index dd6da2d94fe..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/membership-engagement-banner.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { Message } from 'common/modules/ui/message';
-import { getSync as geolocationGetSync } from 'lib/geolocation';
-import { getControlEngagementBannerParams } from 'common/modules/commercial/membership-engagement-banner-parameters';
-import { isBlocked } from 'common/modules/commercial/membership-engagement-banner-block';
-import {
-    type ReaderRevenueRegion,
-    getReaderRevenueRegion,
-    canShowBannerSync,
-    getVisitCount,
-} from 'common/modules/commercial/contributions-utilities';
-import type { Banner } from 'common/modules/ui/bannerPicker';
-import bean from 'bean';
-import fetchJson from 'lib/fetch-json';
-import reportError from 'lib/report-error';
-
-import {
-    submitComponentEvent,
-    addTrackingCodesToUrl,
-} from 'common/modules/commercial/acquisitions-ophan';
-import { acquisitionsBannerControlTemplate } from 'common/modules/commercial/templates/acquisitions-banner-control';
-import userPrefs from 'common/modules/user-prefs';
-import { initTicker } from 'common/modules/commercial/ticker';
-import { getEngagementBannerTestToRun } from 'common/modules/experiments/ab';
-import memoize from 'lodash/memoize';
-import {bannerSetupArticlesViewedOptOut} from "common/modules/commercial/articles-read-tooltip";
-
-type BannerDeployLog = {
-    time: string,
-};
-
-const messageCode = 'engagement-banner';
-
-/**
- * minArticlesBeforeShowingBanner is used by the
- * showMeTheBanner function in reader-rev-dev-utils,
- * it is not used in Prod. In Prod minArticlesBeforeShowingBanner
- * value comes from getControlEngagementBannerParams()
- */
-const minArticlesBeforeShowingBanner = 2;
-
-const lastClosedAtKey = 'engagementBannerLastClosedAt';
-
-/**
- * We're temporarily using the "/rest-of-world" route
- * for users in the "european-union" region.
- */
-const getTimestampOfLastBannerDeployForLocation = (
-    region: ReaderRevenueRegion
-): Promise<string> =>
-    fetchJson(`/reader-revenue/contributions-banner-deploy-log/${region === 'european-union' ? 'rest-of-world' : region}`, {
-        mode: 'cors',
-    }).then((resp: BannerDeployLog) => resp && resp.time);
-
-const hasBannerBeenRedeployedSinceClosed = (
-    userLastClosedBannerAt: string,
-    region: ReaderRevenueRegion
-): Promise<boolean> =>
-    getTimestampOfLastBannerDeployForLocation(region)
-        .then(timestamp => {
-            // In order to migrate between ISO string and millisecond format support both temporarily
-            const stringOrNumberTimestamp = Number(timestamp) || timestamp;
-            const bannerLastDeployedAt = new Date(stringOrNumberTimestamp);
-            return bannerLastDeployedAt > new Date(userLastClosedBannerAt);
-        })
-        .catch(err => {
-            // Capture in sentry
-            reportError(
-                new Error(`Unable to get engagement banner deploy log: ${err}`),
-                { feature: 'engagement-banner' },
-                false
-            );
-            return false;
-        });
-
-const deriveBannerParams = (
-    testToRun: ?Runnable<AcquisitionsABTest>
-): Promise<EngagementBannerParams> =>
-    getControlEngagementBannerParams().then(defaultParams => {
-        // If something goes wrong with fetching the control params, we don't
-        // want to register a test participation since they could be seeing
-        // a different control, which would screw up the test.
-        if (testToRun && !defaultParams.isHardcodedFallback) {
-            return {
-                ...defaultParams,
-                ...testToRun.variantToRun.engagementBannerParams,
-                abTest: {
-                    name: testToRun.id,
-                    variant: testToRun.variantToRun.id,
-                },
-                campaignCode: `${testToRun.id}_${testToRun.variantToRun.id}`,
-            };
-        }
-        return defaultParams;
-    });
-
-const selectSequentiallyFrom = (array: Array<string>): string =>
-    array[getVisitCount() % array.length];
-
-const hideBanner = (banner: Message) => {
-    banner.hide();
-
-    // Store timestamp in localStorage
-    userPrefs.set(lastClosedAtKey, new Date().toISOString());
-};
-
-const clearBannerHistory = (): void => {
-    userPrefs.remove(lastClosedAtKey);
-};
-
-const pageIsIdentity = (): boolean => {
-    const isIdentityPage =
-        config.get('page.contentType') === 'Identity' ||
-        config.get('page.section') === 'identity';
-    return isIdentityPage;
-};
-
-const bannerParamsToHtml = (params: EngagementBannerParams): string => {
-    const messageText = Array.isArray(params.messageText)
-        ? selectSequentiallyFrom(params.messageText)
-        : params.messageText;
-    const ctaText = params.ctaText;
-    const leadSentence = params.leadSentence;
-    const tickerHeader = params.tickerHeader;
-
-    const linkUrl = addTrackingCodesToUrl({
-        base: params.linkUrl,
-        componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER',
-        componentId: params.campaignCode,
-        campaignCode: params.campaignCode,
-        ...(params.abTest ? { abTest: params.abTest } : {}),
-    });
-
-    const subsLinkUrl = addTrackingCodesToUrl({
-        base: `${config.get('page.supportUrl')}/subscribe`,
-        componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER',
-        componentId: params.campaignCode,
-        campaignCode: params.campaignCode,
-        ...(params.abTest ? { abTest: params.abTest } : {}),
-    });
-
-    const buttonCaption = params.buttonCaption;
-    const templateParams = {
-        titles: params.titles,
-        leadSentence,
-        messageText,
-        mobileMessageText: params.mobileMessageText,
-        closingSentence: params.closingSentence,
-        ctaText,
-        linkUrl,
-        buttonCaption,
-        hasTicker: params.hasTicker,
-        tickerHeader,
-        signInUrl: params.signInUrl,
-        secondaryLinkUrl: params.secondaryLinkUrl,
-        secondaryLinkLabel: params.secondaryLinkLabel,
-        subsLinkUrl,
-    };
-
-    return params.template
-        ? params.template(templateParams)
-        : acquisitionsBannerControlTemplate(templateParams);
-};
-
-const showBannerAsMessage = (
-    code: string,
-    params: EngagementBannerParams,
-    html: string
-): boolean =>
-    new Message(code, {
-        siteMessageLinkName: 'membership message',
-        siteMessageCloseBtn: 'hide',
-        siteMessageComponentName: params.campaignCode,
-        trackDisplay: true,
-        cssModifierClass: params.bannerModifierClass || 'engagement-banner',
-        customJs() {
-            bean.on(
-                document,
-                'click',
-                '.js-engagement-banner-close-button',
-                () => hideBanner(this)
-            );
-        },
-    }).show(html);
-
-const trackBanner = (params: EngagementBannerParams): void => {
-    ['INSERT', 'VIEW'].forEach(action => {
-        submitComponentEvent({
-            component: {
-                componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER',
-                products: params.products,
-                campaignCode: params.campaignCode,
-                id: params.campaignCode,
-            },
-            action,
-            ...(params.abTest ? { abTest: params.abTest } : {}),
-        });
-    });
-};
-
-const showBanner = (params: EngagementBannerParams): boolean => {
-    const html = bannerParamsToHtml(params);
-    const messageShown = showBannerAsMessage(messageCode, params, html);
-
-    if (messageShown) {
-        if (params.bannerShownCallback) {
-            params.bannerShownCallback();
-        }
-
-        bannerSetupArticlesViewedOptOut();
-        trackBanner(params);
-
-        if (params.hasTicker) {
-            initTicker('.js-engagement-banner-ticker');
-        }
-
-        return true;
-    }
-
-    return false;
-};
-
-const getBannerParams = memoize(
-    (): Promise<EngagementBannerParams> =>
-        getEngagementBannerTestToRun().then(deriveBannerParams)
-);
-
-const show = (): Promise<boolean> =>
-    getBannerParams()
-        .then(showBanner)
-        .catch(err => {
-            reportError(
-                new Error(
-                    `Could not show banner. ${err.message}. Stack: ${err.stack}`
-                ),
-                { feature: 'engagement-banner' },
-                false
-            );
-            return false;
-        });
-
-const canShow = (): Promise<boolean> => {
-    if (
-        !config.get('switches.membershipEngagementBanner') ||
-        isBlocked() ||
-        pageIsIdentity()
-    ) {
-        return Promise.resolve(false);
-    }
-    return getBannerParams().then(params => {
-        if (
-            canShowBannerSync(
-                params.minArticlesBeforeShowingBanner,
-                params.userCohort
-            )
-        ) {
-            const userLastClosedBannerAt = userPrefs.get(lastClosedAtKey);
-
-            if (!userLastClosedBannerAt) {
-                // show the banner if we can't get a value for this
-                return Promise.resolve(true);
-            }
-
-            return hasBannerBeenRedeployedSinceClosed(
-                userLastClosedBannerAt,
-                getReaderRevenueRegion(geolocationGetSync())
-            );
-        }
-        return Promise.resolve(false);
-    });
-};
-
-const membershipEngagementBanner: Banner = {
-    id: messageCode,
-    show,
-    canShow,
-};
-
-export {
-    membershipEngagementBanner,
-    canShow,
-    messageCode,
-    hideBanner,
-    clearBannerHistory,
-    minArticlesBeforeShowingBanner,
-    deriveBannerParams,
-    bannerParamsToHtml,
-    trackBanner,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner.spec.js
deleted file mode 100644
index 4a7be2efa78..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/membership-engagement-banner.spec.js
+++ /dev/null
@@ -1,344 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/membership-engagement-banner.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fakeMediator from 'lib/mediator';
-import fakeConfig from 'lib/config';
-import fakeOphan from 'ophan/ng';
-import fetchJson from 'lib/fetch-json';
-import userPrefs from 'common/modules/user-prefs';
-import { getControlEngagementBannerParams as getControlEngagementBannerParams_ } from 'common/modules/commercial/membership-engagement-banner-parameters';
-import { membershipEngagementBanner } from 'common/modules/commercial/membership-engagement-banner';
-import { pageShouldHideReaderRevenue } from 'common/modules/commercial/contributions-utilities';
-
-const getControlEngagementBannerParams: any = getControlEngagementBannerParams_;
-
-jest.mock('lib/raven');
-jest.mock('lib/mediator');
-jest.mock('@guardian/libs', () => ({
-    storage: {
-        local: {
-            get: jest.fn(() => 10), // gu.alreadyVisited
-            set: jest.fn(),
-            isAvailable: jest.fn(),
-        },
-    }
-}));
-jest.mock('lib/url', () => ({
-    constructQuery: jest.fn(() => ''),
-}));
-jest.mock('lib/geolocation', () => ({
-    getSync: jest.fn(() => 'GB'),
-    getLocalCurrencySymbolSync: () => '£',
-}));
-jest.mock('common/modules/experiments/ab', () => ({
-    getEngagementBannerTestToRun: jest.fn(() => {
-        const variant = {
-            id: 'fake-variant-id',
-            engagementBannerParams: {},
-        };
-        return Promise.resolve({
-            campaignId: 'fake-campaign-id',
-            id: 'fake-test-id',
-            start: '2017-01-01',
-            expiry: '2027-01-01',
-            author: 'fake-author',
-            description: 'fake-description',
-            audience: 1,
-            audienceOffset: 0,
-            successMeasure: 'fake success measure',
-            audienceCriteria: 'fake audience criteria',
-            variants: [variant],
-            variantToRun: variant,
-            canRun: () => true,
-            componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER',
-        });
-    }),
-}));
-jest.mock(
-    'common/modules/commercial/membership-engagement-banner-parameters',
-    () => ({
-        getControlEngagementBannerParams: jest.fn(() =>
-            Promise.resolve({
-                products: ['CONTRIBUTION'],
-                linkUrl: 'https://support.theguardian.com/contribute',
-            })
-        ),
-    })
-);
-
-jest.mock('lodash/memoize', () => f => f);
-
-jest.mock(
-    'common/modules/commercial/membership-engagement-banner-block',
-    () => ({
-        isBlocked: jest.fn(() => false),
-    })
-);
-jest.mock('common/modules/ui/message', () => ({
-    Message: jest.fn(),
-    hasUserAcknowledgedBanner: jest.fn(() => false),
-}));
-jest.mock('ophan/ng', () => ({
-    record: jest.fn(),
-}));
-jest.mock('lib/config', () => ({
-    get: jest.fn(() => true),
-}));
-jest.mock('common/modules/commercial/contributions-utilities', () => ({
-    pageShouldHideReaderRevenue: jest.fn(() => false),
-    getReaderRevenueRegion: jest.fn(() => 'united-kingdom'),
-    canShowBannerSync: jest.fn(() => false),
-}));
-jest.mock('common/modules/commercial/user-features', () => ({
-    shouldHideSupportMessaging: jest.fn(() => false),
-}));
-jest.mock('lib/fetch-json', () => jest.fn());
-jest.mock('common/modules/user-prefs', () => ({
-    get: jest.fn(() => ({ 'united-kingdom': '2018-07-24T17:05:46+0000' })),
-}));
-
-const FakeMessage: any = require('common/modules/ui/message').Message;
-
-const fakeConstructQuery: any = require('lib/url').constructQuery;
-const fakeIsBlocked: any = require('common/modules/commercial/membership-engagement-banner-block')
-    .isBlocked;
-const fakeGet: any = require('@guardian/libs').storage.local.get;
-const fakeShouldHideReaderRevenue: any = require('common/modules/commercial/contributions-utilities')
-    .pageShouldHideReaderRevenue;
-const fakeCanShowBannerSync: any = require('common/modules/commercial/contributions-utilities')
-    .canShowBannerSync;
-
-const fetchJsonMock: JestMockFn<*, *> = (fetchJson: any);
-const fakeUserPrefs: JestMockFn<*, *> = (userPrefs.get: any);
-
-beforeEach(() => {
-    FakeMessage.mockReset();
-    FakeMessage.prototype.show = jest.fn(() => true);
-    fakeIsBlocked.mockClear();
-    fakeGet.mockClear();
-    fakeShouldHideReaderRevenue.mockClear();
-    fakeConfig.get.mockClear();
-    fetchJsonMock.mockImplementation(() =>
-        Promise.resolve({ time: '2018-07-25T17:05:46+0000' })
-    );
-});
-
-afterEach(() => {
-    FakeMessage.prototype.show.mockRestore();
-    fakeMediator.removeAllListeners();
-    fakeOphan.record.mockReset();
-    fetchJsonMock.mockReset();
-});
-
-describe('Membership engagement banner', () => {
-    describe('canShow returns false', () => {
-        it('should return false if membershipEngagementBanner switch off', () => {
-            fakeConfig.get.mockImplementationOnce(() => false);
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-
-        it('should return false if the engagement banner is blocked', () => {
-            fakeIsBlocked.mockReturnValueOnce(true);
-
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-
-        it('should return false user variant is blocked for test', () => {
-            fakeCanShowBannerSync.mockReturnValueOnce(false);
-
-            membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-
-        it('should return false user visit count less than minArticles for banner', () => {
-            fakeGet.mockReturnValueOnce(0); // gu.alreadyVisited
-
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-
-        it('should return false if pageShouldHideReaderRevenue true', () => {
-            fakeShouldHideReaderRevenue.mockReturnValueOnce(true);
-
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-
-        it('should return false if new redeploy before last closed', () => {
-            // mock fetching old timestamp
-            fakeUserPrefs.mockReturnValueOnce('2018-07-26T17:05:46+0000');
-            // mock fetching new timestamp
-            fakeUserPrefs.mockReturnValueOnce({
-                'united-kingdom': '2018-07-26T17:05:46+0000',
-            });
-
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-
-        it('should return false if old redeploy before last closed', () => {
-            // mock fetching old timestamp
-            fakeUserPrefs.mockReturnValueOnce('2018-07-26T17:05:46+0000');
-            // mock fetching new timestamp
-            fakeUserPrefs.mockReturnValueOnce(null);
-
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-    });
-
-    describe('canShow returns true', () => {
-        let emitSpy;
-
-        beforeEach(() => {
-            getControlEngagementBannerParams.mockImplementationOnce(() =>
-                Promise.resolve({
-                    products: ['CONTRIBUTION'],
-                    campaignCode: 'fake-campaign-code',
-                    linkUrl: 'https://support.theguardian.com/contribute',
-                })
-            );
-            emitSpy = jest.spyOn(fakeMediator, 'emit');
-        });
-
-        afterEach(() => {
-            emitSpy.mockRestore();
-        });
-
-        it('should show the membership engagement banner', () =>
-            membershipEngagementBanner.show().then(shown => {
-                expect(shown).toBe(true);
-                expect(FakeMessage.prototype.show).toHaveBeenCalledTimes(1);
-            }));
-
-        it('should record the component event in ophan with a/b test info', () =>
-            membershipEngagementBanner.show().then(() =>
-                expect(fakeOphan.record).toHaveBeenCalledWith({
-                    componentEvent: {
-                        component: {
-                            componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER',
-                            products: ['CONTRIBUTION'],
-                            id: 'fake-test-id_fake-variant-id',
-                            campaignCode: 'fake-test-id_fake-variant-id',
-                        },
-                        action: 'INSERT',
-                        abTest: {
-                            name: 'fake-test-id',
-                            variant: 'fake-variant-id',
-                        },
-                    },
-                })
-            ));
-    });
-
-    describe('If user already member', () => {
-        it('should not show any messages even to engaged readers', () => {
-            (pageShouldHideReaderRevenue: any).mockImplementationOnce(
-                () => true
-            );
-
-            return membershipEngagementBanner.canShow().then(canShow => {
-                expect(canShow).toBe(false);
-            });
-        });
-    });
-
-    describe('creates message with', () => {
-        beforeEach(() => {
-            getControlEngagementBannerParams.mockImplementationOnce(() =>
-                Promise.resolve({
-                    linkUrl: 'https://support.theguardian.com/contribute',
-                })
-            );
-        });
-
-        it('correct campaign code', () =>
-            membershipEngagementBanner
-                .show()
-                .then(() =>
-                    expect(
-                        FakeMessage.mock.calls[0][1].siteMessageComponentName
-                    ).toBe('fake-test-id_fake-variant-id')
-                ));
-
-        it('correct CSS modifier class', () =>
-            membershipEngagementBanner
-                .show()
-                .then(() =>
-                    expect(FakeMessage.mock.calls[0][1].cssModifierClass).toBe(
-                        'engagement-banner'
-                    )
-                ));
-    });
-
-    describe('renders message with', () => {
-        beforeEach(() => {
-            getControlEngagementBannerParams.mockImplementationOnce(() =>
-                Promise.resolve({
-                    messageText: 'fake-message-text',
-                    linkUrl: 'https://support.theguardian.com/contribute',
-                    buttonCaption: 'fake-button-caption',
-                })
-            );
-            fakeConfig.get.mockImplementationOnce(() => true);
-            fakeConstructQuery.mockImplementationOnce(
-                () => 'fake-query-parameters'
-            );
-        });
-
-        it('message text', () =>
-            membershipEngagementBanner
-                .show()
-                .then(() =>
-                    expect(FakeMessage.prototype.show.mock.calls[0][0]).toMatch(
-                        /fake-message-text/
-                    )
-                ));
-
-        it('colour class', () =>
-            membershipEngagementBanner
-                .show()
-                .then(() =>
-                    expect(FakeMessage.prototype.show.mock.calls[0][0]).toMatch(
-                        /engagement-banner/
-                    )
-                ));
-
-        it('link URL', () =>
-            membershipEngagementBanner
-                .show()
-                .then(() =>
-                    expect(FakeMessage.prototype.show.mock.calls[0][0]).toMatch(
-                        /https:\/\/support\.theguardian\.com\/contribute\?fake-query-parameters/
-                    )
-                ));
-
-        it('button caption', () =>
-            membershipEngagementBanner
-                .show()
-                .then(() =>
-                    expect(FakeMessage.prototype.show.mock.calls[0][0]).toMatch(
-                        /fake-button-caption/
-                    )
-                ));
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/reader-revenue-banner.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/reader-revenue-banner.js
deleted file mode 100644
index 88a68927fc2..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/reader-revenue-banner.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/reader-revenue-banner.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import type { Banner } from 'common/modules/ui/bannerPicker';
-import { fetchBannerData, renderBanner, type BannerDataResponse } from 'common/modules/commercial/contributions-service';
-import config from "lib/config";
-import reportError from "lib/report-error";
-
-
-const messageCode = 'reader-revenue-banner';
-
-let data: ?BannerDataResponse = null;
-
-const show = () => data ? renderBanner(data) : Promise.resolve(false);
-
-const canShow = (): Promise<boolean> => {
-    const forceBanner = window.location.search.includes('force-remote-banner=true');
-    const enabled = config.get('switches.remoteBanner') || forceBanner;
-
-    if (!enabled) {
-        return Promise.resolve(false);
-    }
-
-    return fetchBannerData()
-        .then((response: ?BannerDataResponse)  => {
-            if (response) {
-                data = response;
-                return true;
-            }
-            return false;
-        }).catch(error => {
-            console.log(`Error fetching remote banner data: ${error}`);
-            reportError(new Error(`Error fetching remote banner data: ${error}`), {}, false);
-            return false;
-        });
-};
-
-
-export const readerRevenueBanner: Banner = {
-    id: messageCode,
-    show,
-    canShow,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/reader-revenue-dev-utils.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/reader-revenue-dev-utils.js
deleted file mode 100644
index ce036784be0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/reader-revenue-dev-utils.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/reader-revenue-dev-utils.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { addCookie, removeCookie } from 'lib/cookies';
-import { isUserLoggedIn } from 'common/modules/identity/api';
-import {
-    fakeOneOffContributor,
-    readerRevenueRelevantCookies,
-} from 'common/modules/commercial/user-features';
-import { clearViewLog as clearEpicViewLog } from 'common/modules/commercial/acquisitions-view-log';
-import {
-    clearBannerHistory,
-    minArticlesBeforeShowingBanner,
-} from 'common/modules/commercial/membership-engagement-banner';
-import { storage } from '@guardian/libs';
-import {
-    initMvtCookie,
-    decrementMvtCookie,
-    incrementMvtCookie,
-} from 'common/modules/analytics/mvt-cookie';
-import { setGeolocation, getSync as geolocationGetSync } from 'lib/geolocation';
-import config from 'lib/config';
-import { clearParticipations } from 'common/modules/experiments/ab-local-storage';
-import { isBlocked } from 'common/modules/commercial/membership-engagement-banner-block';
-import { pageShouldHideReaderRevenue } from 'common/modules/commercial/contributions-utilities';
-
-const clearCommonReaderRevenueStateAndReload = (
-    asExistingSupporter: boolean
-): void => {
-    if (pageShouldHideReaderRevenue()) {
-        alert(
-            'This page has "Prevent membership/contribution appeals" ticked in Composer. Please try a different page'
-        );
-        return;
-    }
-
-    readerRevenueRelevantCookies.forEach(cookie => removeCookie(cookie));
-
-    initMvtCookie();
-    clearParticipations();
-
-    // Most versions of the epic only display for a certain number of pageviews in
-    // a given time window (typically, 4 per 30 days).
-    // We always want to clear out this view log, since otherwise this
-    // reload might mean the epic no longer appears on the next page view.
-    clearEpicViewLog();
-
-    if (asExistingSupporter) {
-        // We use the one-off contributions cookie since the others
-        // get updated based on AJAX calls.
-        // This mechanism will break when start sending data on one-off contributions
-        // from the members-data-api and updating cookies based on that.
-        fakeOneOffContributor();
-    }
-
-    if (isUserLoggedIn() && !asExistingSupporter) {
-        if (window.location.origin.includes('localhost')) {
-            // Assume they don't have identity running locally
-            // So try and remove the identity cookie manually
-            removeCookie('GU_U');
-        } else {
-            const profileUrl = window.location.origin.replace(
-                /(www\.|m\.)/,
-                'profile.'
-            );
-            window.location.assign(`${profileUrl}/signout`);
-        }
-    } else {
-        window.location.reload();
-    }
-};
-
-const showMeTheEpic = (asExistingSupporter: boolean = false): void => {
-    // Clearing out the epic view log happens before all reloads
-    clearCommonReaderRevenueStateAndReload(asExistingSupporter);
-};
-
-const showMeTheBanner = (asExistingSupporter: boolean = false): void => {
-    if (!config.get('switches.membershipEngagementBanner')) {
-        alert(
-            'Membership engagement banner switch is turned off on the dotcom switchboard'
-        );
-        return;
-    }
-
-    if (isBlocked()) {
-        alert('Banner is blocked by a switch in the dotcom switchboard');
-        return;
-    }
-
-    clearBannerHistory();
-
-    // The banner only displays after a certain number of pageviews. So let's get there quick!
-    storage.local.setRaw('gu.alreadyVisited', minArticlesBeforeShowingBanner + 1);
-
-
-    clearCommonReaderRevenueStateAndReload(asExistingSupporter);
-};
-
-const showMeTheDoubleBanner = (asExistingSupporter: boolean = false): void => {
-    showMeTheBanner(asExistingSupporter);
-};
-
-// For the below functions, assume the user can currently see the thing
-// they want to display. So we don't clear out the banner history since
-// we don't necessarily want the banner popping up if someone's working
-// with the epic.
-const showNextVariant = (asExistingSupporter: boolean = false): void => {
-    incrementMvtCookie();
-    clearCommonReaderRevenueStateAndReload(asExistingSupporter);
-};
-
-const showPreviousVariant = (asExistingSupporter: boolean = false): void => {
-    decrementMvtCookie();
-    clearCommonReaderRevenueStateAndReload(asExistingSupporter);
-};
-
-const changeGeolocation = (asExistingSupporter: boolean = false): void => {
-    const geo = window.prompt(
-        `Enter two-letter geolocation code (e.g. GB, US, AU). Current is ${geolocationGetSync()}.`
-    );
-    if (geo === 'UK') {
-        alert(`'UK' is not a valid geolocation - please use 'GB' instead!`);
-    } else if (geo) {
-        setGeolocation(geo);
-        clearCommonReaderRevenueStateAndReload(asExistingSupporter);
-    }
-};
-
-export const init = (): void => {
-    // Expose functions so they can be called on the console and within bookmarklets
-    window.guardian.readerRevenue = {
-        showMeTheEpic,
-        showMeTheBanner,
-        showMeTheDoubleBanner,
-        showNextVariant,
-        showPreviousVariant,
-        changeGeolocation,
-    };
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/targeting-tool.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/targeting-tool.js
deleted file mode 100644
index 4f320219201..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/targeting-tool.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/targeting-tool.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-
-const clean = (str: string): string => str.trim().toLowerCase();
-
-export const campaignsFor = (id: string): Array<Object> => {
-    try {
-        return config
-            .get('page.campaigns', [])
-            .filter(
-                campaign =>
-                    campaign.fields &&
-                    clean(campaign.fields.campaignId) === clean(id)
-            );
-    } catch (e) {
-        return [];
-    }
-};
-
-export const isAbTestTargeted = (test: AcquisitionsABTest): boolean =>
-    campaignsFor(test.campaignId).length > 0;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-control.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-control.js
deleted file mode 100644
index 5d16b5225f1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-control.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-banner-control.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import marque36icon from 'svgs/icon/marque-36.svg';
-import closeCentralIcon from 'svgs/icon/close-central.svg';
-import arrowWhiteRight from 'svgs/icon/arrow-white-right.svg';
-import { acquisitionsBannerTickerTemplate } from 'common/modules/commercial/templates/acquisitions-banner-ticker';
-import { paymentMethodLogosTemplate } from 'common/modules/commercial/templates/payment-method-logos-template';
-
-export const acquisitionsBannerControlTemplate = (
-    params: EngagementBannerTemplateParams
-): string =>
-    `
-        <div class="engagement-banner__close">
-            <div class="engagement-banner__roundel hide-until-phablet">
-                ${marque36icon.markup}
-            </div>
-            <button tabindex="4" class="button engagement-banner__close-button js-site-message-close js-engagement-banner-close-button" data-link-name="hide release message">
-                <span class="u-h">Close the support banner</span>
-                ${closeCentralIcon.markup}
-            </button>
-        </div>
-        <div class="engagement-banner__container">
-            <div class="engagement-banner__text">
-                ${
-                    params.leadSentence
-                        ? `<div class="engagement-banner__header">
-                        ${params.leadSentence}
-                    </div>`
-                        : ''
-                }
-                ${params.messageText}${params.ctaText}
-                ${params.hasTicker ? acquisitionsBannerTickerTemplate : ''}
-            </div>
-            <div class="engagement-banner__cta">
-                <a tabindex="3" class="button engagement-banner__button" href="${
-                    params.linkUrl
-                }">
-                    ${params.buttonCaption}${arrowWhiteRight.markup}
-                </a>
-                ${paymentMethodLogosTemplate(
-                    'engagement-banner__payment-logos'
-                )}
-            </div>
-        </div>
-
-    `;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-covid.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-covid.js
deleted file mode 100644
index 1b514fce8d8..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-covid.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-banner-covid.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import marque36icon from 'svgs/icon/marque-36.svg';
-import closeCentralIcon from 'svgs/icon/close-central.svg';
-
-export const acquisitionsBannerCovidTemplate = (
-    params: EngagementBannerTemplateParams
-): string => `
-        <div class="engagement-banner__close">
-            <div class="engagement-banner__roundel">
-                ${marque36icon.markup}
-            </div>
-            <button tabindex="4" class="button engagement-banner__close-button js-site-message-close js-engagement-banner-close-button" data-link-name="hide release message">
-                <span class="u-h">Close the support banner</span>
-                ${closeCentralIcon.markup}
-            </button>
-        </div>
-
-        <div class="engagement-banner__container engagement-banner__container--covid-banner">
-            <div class="engagement-banner__header-container">
-                <div class="engagement-banner__header">
-                    <h2 class="engagement-banner__header-text">
-                    <span>${
-                        params.titles && params.titles[0]
-                            ? params.titles[0]
-                            : ''
-                    }</span>
-                    <span>${
-                        params.titles && params.titles[1]
-                            ? params.titles[1]
-                            : ''
-                    }</span>
-                    </h2>
-                </div>
-            </div>
-
-            <div class="engagement-banner__text-container">
-                <div class="engagement-banner__body">
-                    <p><span class="engagement-banner__lead-sentence">${
-                        params.leadSentence ? params.leadSentence : ''
-                    }</span>${params.messageText}</p>
-                </div>
-
-                <div class="engagement-banner__cta-container">
-                    <div class="engagement-banner__cta">
-                        <a tabIndex="3" class="component-button component-button--hasicon-right component-button--secondary" href="${
-                            params.linkUrl
-                        }">
-                            ${params.ctaText}
-                            <svg
-                                class="svg-arrow-right-straight"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 17.89"
-                                preserveAspectRatio="xMinYMid"
-                                aria-hidden="true"
-                                focusable="false"
-                            >
-                                <path d="M20 9.35l-9.08 8.54-.86-.81 6.54-7.31H0V8.12h16.6L10.06.81l.86-.81L20 8.51v.84z" />
-                            </svg>
-                        </a>
-                    </div>
-
-
-                    ${
-                        params.secondaryLinkLabel && params.subsLinkUrl
-                            ? `
-                        <div class="engagement-banner__cta engagement-banner__cta--subscribe">
-                            <a tabIndex="3" class="component-button component-button--hasicon-right component-button--primary component-button--primary--covid-banner" href="${
-                                params.subsLinkUrl
-                            }">
-                                    ${params.secondaryLinkLabel}
-                                    <svg
-                                        class="svg-arrow-right-straight"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 20 17.89"
-                                        preserveAspectRatio="xMinYMid"
-                                        aria-hidden="true"
-                                        focusable="false"
-                                    >
-                                        <path d="M20 9.35l-9.08 8.54-.86-.81 6.54-7.31H0V8.12h16.6L10.06.81l.86-.81L20 8.51v.84z" />
-                                    </svg>
-                                </a>
-                            </div>`
-                            : ''
-                    }
-
-                </div>
-            </div>
-    `;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-ticker.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-ticker.js
deleted file mode 100644
index 9fb39ab7328..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-banner-ticker.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-banner-ticker.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { getLocalCurrencySymbolSync } from 'lib/geolocation';
-
-export const acquisitionsBannerTickerTemplate = `
-    <div id="banner-ticker" class="js-engagement-banner-ticker engagement-banner-ticker is-hidden">
-        
-        <div class="js-ticker-amounts">
-            <div class="js-ticker-so-far engagement-banner-ticker__so-far">
-                <div class="js-ticker-count engagement-banner-ticker__count"></div>
-                <div class="js-ticker-label engagement-banner-ticker__count-label is-hidden">contributed</div>
-            </div>
-            
-            <div class="js-ticker-goal engagement-banner-ticker__goal">
-                <div class="js-ticker-count engagement-banner-ticker__count">${getLocalCurrencySymbolSync()}0</div>
-                <div class="js-ticker-label engagement-banner-ticker__count-label">our goal</div>
-            </div>
-        </div>
-        
-        <div class="engagement-banner-ticker__progress-container">
-            <div class="engagement-banner-ticker__progress">
-                <div class="js-ticker-filled-progress engagement-banner-ticker__filled-progress"></div>
-            </div>
-            <div class="js-ticker-goal-marker engagement-banner-ticker__goal-marker is-hidden"></div>
-        </div>
-        
-    </div>
-`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-buttons.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-buttons.js
deleted file mode 100644
index 9357def7c56..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-buttons.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-epic-buttons.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { paymentMethodLogosTemplate } from 'common/modules/commercial/templates/payment-method-logos-template';
-import type { ReminderFields } from 'common/modules/commercial/templates/acquisitions-epic-reminder';
-import { getDefaultReminderFields } from 'common/modules/commercial/templates/acquisitions-epic-control';
-import { canShowContributionsReminderFeature } from 'common/modules/commercial/user-features';
-
-
-export const epicButtonsTemplate = (
-    primaryCta: EpicCta,
-    secondaryCta?: EpicCta,
-    reminderFields?: ReminderFields
-) => {
-    const supportButtonSupport = `
-        <div>
-            <a class="component-button component-button--primary component-button--hasicon-right contributions__contribute--epic-member"
-              href="${primaryCta.url}"
-              target="_blank">
-                ${primaryCta.ctaText}
-                <svg
-                class="svg-arrow-right-straight"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 17.89"
-                preserveAspectRatio="xMinYMid"
-                aria-hidden="true"
-                focusable="false"
-                >
-                    <path d="M20 9.35l-9.08 8.54-.86-.81 6.54-7.31H0V8.12h16.6L10.06.81l.86-.81L20 8.51v.84z" />
-                </svg>
-            </a>
-        </div>`;
-
-    const secondaryButton = secondaryCta
-        ? `
-            <a class="component-button component-button--greyHollow component-button--greyHollow--for-epic component-button--hasicon-right contributions__contribute--epic-member contributions__secondary-button contributions__secondary-button--epic"
-              href=${secondaryCta.url}
-              target="_blank">
-              ${secondaryCta.ctaText}
-              <svg
-                class="svg-arrow-right-straight"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 17.89"
-                preserveAspectRatio="xMinYMid"
-                aria-hidden="true"
-                focusable="false"
-                >
-                    <path d="M20 9.35l-9.08 8.54-.86-.81 6.54-7.31H0V8.12h16.6L10.06.81l.86-.81L20 8.51v.84z" />
-                </svg>
-                </a>`
-        : '';
-
-    const getReminderCta = (): ?string => {
-      const fields = reminderFields || getDefaultReminderFields();
-      return fields && fields.reminderCTA;
-    };
-
-    const reminderCta = canShowContributionsReminderFeature() && getReminderCta();
-
-    const reminderButton = reminderCta
-        ? `<label for="epic-reminder__reveal-reminder" class="epic-reminder__prompt-label">
-            <div data-cta-copy="${
-                reminderCta
-            }" tabindex="0" class="component-button component-button--greyHollow component-button--greyHollow--for-epic component-button--reminder-prompt contributions__secondary-button contributions__secondary-button--epic" role="checkbox">
-                    ${reminderCta}
-            </div>
-        </label>`
-        : '';
-
-    const reminderInput = reminderCta
-        ? `<input type="checkbox" id="epic-reminder__reveal-reminder" class="epic-reminder__reveal-reminder" />`
-        : '';
-
-    return `
-        ${reminderInput}
-        <div class="contributions__buttons">
-            ${supportButtonSupport}
-            ${secondaryButton || reminderButton || ''}
-            ${paymentMethodLogosTemplate(
-                'contributions__payment-logos contributions__contribute--epic-member'
-            )}
-        </div>`;
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-control.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-control.js
deleted file mode 100644
index 854f0277aef..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-control.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-epic-control.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { appendToLastElement } from 'lib/array-utils';
-import { acquisitionsEpicTickerTemplate } from 'common/modules/commercial/templates/acquisitions-epic-ticker';
-import { acquisitionsEpicReminderTemplate } from 'common/modules/commercial/templates/acquisitions-epic-reminder';
-import type { ReminderFields } from 'common/modules/commercial/templates/acquisitions-epic-reminder';
-import { canShowContributionsReminderFeature } from 'common/modules/commercial/user-features';
-
-const buildFooter = (footer: string[]): string =>
-    `<div class="contributions__epic-footer">
-        ${footer.map(line => `<h2>${line}</h2>`).join('')}
-    </div>`;
-
-const buildImage = (url: string): string =>
-    `<div class="contributions__epic-image">
-        <img src="${url}" alt="Image for Guardian contributions message"/>
-    </div>`;
-
-// Temporarily hard-coded while we decide on requirement
-const defaultReminderFields: ReminderFields = {
-    reminderCTA: 'Remind me in October',
-    reminderDate: '2020-10-14 00:00:00',
-    reminderDateAsString: 'October 2020',
-};
-const defaultReminderCutoff = new Date('2020-09-14');
-
-export const getDefaultReminderFields = (): ReminderFields | null => {
-    const now = new Date();
-    return now <= defaultReminderCutoff ? defaultReminderFields : null;
-};
-
-export const acquisitionsEpicControlTemplate = ({
-    copy: { heading = '', paragraphs, highlightedText, footer },
-    componentName,
-    epicClassNames = [],
-    buttonTemplate,
-    wrapperClass = '',
-    showTicker = false,
-    backgroundImageUrl,
-    showReminderFields,
-}: {
-    copy: AcquisitionsEpicTemplateCopy,
-    componentName: string,
-    epicClassNames: string[],
-    buttonTemplate?: string,
-    wrapperClass?: string,
-    showTicker: boolean,
-    showReminderFields?: ReminderFields | null,
-    backgroundImageUrl?: string,
-}) => {
-    const extraClasses = (backgroundImageUrl
-        ? epicClassNames.concat(['contributions__epic--with-image'])
-        : epicClassNames
-    ).join(' ');
-
-
-    const reminderFields = showReminderFields || getDefaultReminderFields();
-
-    return `<div class="contributions__epic ${extraClasses}" data-component="${componentName}" data-link-name="epic">
-        <div class="${wrapperClass}">
-            <div>
-                ${showTicker ? acquisitionsEpicTickerTemplate : ''}
-
-                ${backgroundImageUrl ? buildImage(backgroundImageUrl) : ''}
-
-
-
-                <h2 class="contributions__title">
-                    ${heading}
-                </h2>
-                ${appendToLastElement(
-                    paragraphs,
-                    highlightedText
-                        ? ` <strong><span class="contributions__highlight">${highlightedText}</span></strong>`
-                        : ''
-                )
-                    .map(paragraph => `<p>${paragraph}</p>`)
-                    .join('')}
-            </div>
-
-            ${buttonTemplate || ''}
-
-            ${footer ? buildFooter(footer) : ''}
-
-            ${canShowContributionsReminderFeature() && reminderFields ? acquisitionsEpicReminderTemplate(reminderFields) : ''}
-        </div>
-    </div>`;
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-liveblog.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-liveblog.js
deleted file mode 100644
index 08348edbaca..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-liveblog.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-epic-liveblog.js
- * to .ts, then delete it.
- */
-
-// @flow
-const ctaTemplate = (supportURL: string, ctaText?: string) =>
-    `<div class="component-button--liveblog-container">
-        <a class="component-button component-button--liveblog component-button--hasicon-right contributions__contribute--epic-member"
-          href=${supportURL}
-          target="_blank">
-          ${ctaText || 'Show your support'}
-        </a>
-    </div>`;
-
-export const epicLiveBlogTemplate = ({
-                                         copy,
-                                         componentName,
-                                         supportURL,
-                                         ctaText,
-                                         cssClass,
-                                     }: {
-    copy: AcquisitionsEpicTemplateCopy,
-    componentName: string,
-    supportURL: string,
-    ctaText?: string,
-    cssClass?: string,
-}) =>
-    `<div class="block block--content is-epic ${cssClass || ''}" data-component="${componentName}">
-        <p class="block-time published-time">
-            <a href="#" itemprop="url" class="block-time__link">
-                <time data-relativeformat="med" itemprop="datePublished" class="js-timestamp"></time>
-                <span class="block-time__absolute"></span>
-            </a>
-        </p>
-        <div class="block-elements block-elements--no-byline">
-            ${copy.paragraphs
-        .map(paragraph => `<p>${paragraph}</p>`)
-        .join('')}
-            <p>${ctaTemplate(
-        supportURL,
-        ctaText,
-    )}</p>
-        </div>
-    </div>`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-reminder.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-reminder.js
deleted file mode 100644
index f0f0ee83032..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-reminder.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-epic-reminder.js
- * to .ts, then delete it.
- */
-
-// @flow
-import closeCentralIcon from 'svgs/icon/close-central.svg';
-
-export type ReminderFields = {
-    reminderCTA: string,
-    reminderDate: string,
-    reminderDateAsString: string,
-};
-
-export const acquisitionsEpicReminderTemplate = (
-    reminderFields: ReminderFields
-) => `
-    <div id="epic-reminder" class="js-epic-reminder epic-reminder">
-        <div class="epic-reminder__signup">
-            <label for="epic-reminder__reveal-reminder" class="epic-reminder__close-button-label">
-                <div class="epic-reminder__close-button" tabindex="0">
-                    ${closeCentralIcon.markup}
-                </div>
-            </label>
-
-            <div class="epic-reminder__form-title">${reminderFields.reminderCTA}</div>
-
-            <div class="epic-reminder__form-wrapper">
-                <form>
-                    <label for="epic-reminder__email-input" class="epic-reminder__email-label">Email address</label>
-
-                    <p id="epic-reminder__email-help-text" class="epic-reminder__email-help-text" />
-
-                    <div class="epic-reminder__email-input-wrapper">
-                        <input type="email" class="epic-reminder__email-input" id=epic-reminder__email-input" aria-describedby="epic-reminder__email-help-text" />
-
-                        <div class="epic-reminder__submit-button-wrapper">
-                            <button data-reminder-date="${
-                                reminderFields.reminderDate
-                            }" type="submit" class="epic-reminder__submit-button component-button component-button--hasicon-right" id="epic-reminder__submit-button">
-                                Set my reminder
-                                <svg class="svg-arrow-right-straight" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17.89" preserveAspectRatio="xMinYMid" aria-hidden="true" focusable="false">
-                                    <path d="M20 9.35l-9.08 8.54-.86-.81 6.54-7.31H0V8.12h16.6L10.06.81l.86-.81L20 8.51v.84z" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </form>
-
-                <p class="epic-reminder__email-terms-and-conditions">
-                    We will use this to send you a single email in ${
-                        reminderFields.reminderDateAsString
-                    }. To find out what personal data we collect and how we use it, please visit our <a href="https://www.theguardian.com/help/privacy-policy">Privacy Policy</a>
-                </p>
-            </div>
-
-            <div class="epic-reminder__thank-you">
-                We will be in touch to invite you to contribute. Look out for a message in your inbox in ${
-                    reminderFields.reminderDateAsString
-                }. If you have any questions about contributing, please <a href="mailto:contribution.support@theguardian.com">contact us here</a>.
-            </div>
-        </div>
-    </div>
-`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-testimonial-block.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-testimonial-block.js
deleted file mode 100644
index 3baf151116f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-testimonial-block.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-epic-testimonial-block.js
- * to .ts, then delete it.
- */
-
-// @flow
-import quoteSvg from 'svgs/icon/garnett-quote.svg';
-
-export const acquisitionsTestimonialBlockTemplate = (
-    params: AcquisitionsEpicTestimonialCopy
-) =>
-    `<div class="epic__testimonial-container">
-        <div class="epic__testimonial-quote">
-            ${quoteSvg.markup}
-        </div>
-        <blockquote class="epic__testimonial-text">
-            ${params.text}
-            <cite class="epic__testimonial-name">
-                ${params.name}
-            </cite>
-        </blockquote>
-    </div>`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-ticker.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-ticker.js
deleted file mode 100644
index a2b95a03c2f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/acquisitions-epic-ticker.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/acquisitions-epic-ticker.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export const acquisitionsEpicTickerTemplate = `
-    <div id="epic-ticker" class="js-epic-ticker epic-ticker is-hidden">
-    
-        <div class="js-ticker-amounts">
-            <div class="js-ticker-so-far epic-ticker__so-far">
-                <div class="js-ticker-count epic-ticker__count"></div>
-                <div class="js-ticker-label epic-ticker__count-label is-hidden"></div>
-            </div>
-            
-            <div class="js-ticker-goal epic-ticker__goal">
-                <div class="js-ticker-count epic-ticker__count"></div>
-                <div class="js-ticker-label epic-ticker__count-label">our goal</div>
-            </div>
-        </div>
-        
-        <div class="epic-ticker__progress-container">
-            <div class="epic-ticker__progress">
-                <div class="js-ticker-filled-progress epic-ticker__filled-progress"></div>
-            </div>
-            <div class="js-ticker-goal-marker epic-ticker__goal-marker is-hidden"></div>
-        </div>
-    </div>
-`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/epic-articles-viewed-opt-out-template.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/epic-articles-viewed-opt-out-template.js
deleted file mode 100644
index c41895437c0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/epic-articles-viewed-opt-out-template.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/epic-articles-viewed-opt-out-template.js
- * to .ts, then delete it.
- */
-
-// @flow
-import closeIcon from 'svgs/icon/close-large.svg';
-
-export const epicArticlesViewedOptOutTemplate = (count: number, nextWord: ?string): string => `
-    <span class="epic-article-count">
-        <input type="checkbox" id="epic-article-count__dialog-checkbox" class="epic-article-count__dialog-checkbox" />
-        <label for="epic-article-count__dialog-checkbox" class="epic-article-count__prompt-label">
-            <a>${count.toString()}${nextWord ? ` ${nextWord}` : ''}</a>
-        </label>
-        <span class="epic-article-count__dialog">
-            <span class="epic-article-count__dialog-close is-hidden">
-                <button tabindex="4" class="epic-article-count__dialog-close-button js-site-message-close" data-link-name="hide release message">
-                    <span class="u-h">Close the articles viewed opt out message</span>
-                    ${closeIcon.markup}
-                </button>
-            </span>
-        
-            <span class="epic-article-count__dialog-header">What's this?</span>
-            <span class="epic-article-count__dialog-body">We would like to remind you how many Guardian articles you've enjoyed on this device. Can we continue showing you this?</span>
-            
-            <span class="epic-article-count__buttons">
-                <a class="component-button component-button--hasicon-right contributions__contribute--epic-member epic-article-count__button-opt-in"
-                  target="_blank">
-                  Yes, that's OK
-                </a>
-
-                <a class="component-button component-button--hasicon-right contributions__contribute--epic-member epic-article-count__button-opt-out"
-                  target="_blank">
-                  No, opt me out
-                </a>
-            </span>
-            
-            <span class="epic-article-count__dialog-note">Please note you cannot undo this action or opt back in</span>
-        </span>
-    </span>
-`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/payment-method-logos-template.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/payment-method-logos-template.js
deleted file mode 100644
index 4b94ed1e7da..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/templates/payment-method-logos-template.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/templates/payment-method-logos-template.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { getSync as getGeolocation } from 'lib/geolocation';
-import { applePayApiAvailable } from 'lib/detect';
-import applePayMark from 'svgs/acquisitions/apple-pay-mark.svg';
-
-export const paymentMethodLogosTemplate = (classNames: string) => {
-    const applePayLogo = applePayApiAvailable ? applePayMark.markup : '';
-    const inUS = getGeolocation() === 'US';
-
-    const paymentMethodLogos = config.get(
-        inUS
-            ? 'images.acquisitions.payment-methods-us'
-            : 'images.acquisitions.payment-methods',
-        ''
-    );
-
-    const paymentMethodAltText = `Accepted payment methods: Visa, Mastercard, American Express ${
-        inUS ? ' Paypal, Diners Club and Discover' : ' and Paypal'
-    }`;
-
-    return `<div class= "${classNames}">
-        <img
-            src="${paymentMethodLogos}"
-            alt="${paymentMethodAltText}"
-        >
-        ${applePayLogo}
-    </div>`;
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ticker.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/ticker.js
deleted file mode 100644
index 79c5b6c6859..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/ticker.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/ticker.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fetchJSON from 'lib/fetch-json';
-
-declare type TickerEndType = 'unlimited' | 'hardstop';
-declare type TickerCountType = 'money' | 'people';
-
-declare type TickerCopy = {
-    countLabel: string,
-    goalReachedPrimary: string,
-    goalReachedSecondary: string,
-}
-
-declare type TickerSettings = {
-    endType: TickerEndType,
-    countType: TickerCountType,
-    currencySymbol: string,
-    copy: TickerCopy,
-}
-
-const parseTickerSettings = (obj: Object): ?TickerSettings => {
-  const endType = obj.endType === 'unlimited' || obj.endType ===  'hardstop' ? obj.endType : null;
-  const countType = obj.countType === 'money' || obj.countType ===  'people' ? obj.countType : null;
-  const copy = obj.copy && obj.copy.countLabel && obj.copy.goalReachedPrimary && obj.copy.goalReachedSecondary ? obj.copy : null;
-
-  if (endType && countType && copy && obj.currencySymbol) {
-      return {
-          endType,
-          countType,
-          copy,
-          currencySymbol: obj.currencySymbol,
-      }
-  }
-
-  return null;
-};
-
-const count = {};
-let goal;
-let total;
-
-const goalReached = () => total >= goal;
-
-const getCurrencySymbol = (tickerSettings: TickerSettings): string =>
-    tickerSettings.countType === 'money' ? tickerSettings.currencySymbol : '';
-
-/**
- * The filled bar begins 100% to the left, and is animated rightwards.
- */
-const percentageToTranslate = (end: number) => {
-    const percentage = (total / end) * 100 - 100;
-
-    return percentage >= 0 ? 0 : percentage;
-};
-
-const animateBar = (parentElement: HTMLElement, tickerType: TickerEndType) => {
-    const progressBarElement = parentElement.querySelector(
-        '.js-ticker-filled-progress'
-    );
-
-    if (progressBarElement && progressBarElement instanceof HTMLElement) {
-        // If we've exceeded the goal then extend the bar 15% beyond the total
-        const end =
-            tickerType === 'unlimited' && total > goal
-                ? total + total * 0.15
-                : goal;
-
-        const barTranslate = percentageToTranslate(end);
-        progressBarElement.style.transform = `translate3d(${barTranslate}%, 0, 0)`;
-
-        if (end > goal) {
-            // Show a marker for the goal that has been exceeded
-            const marker = parentElement.querySelector(
-                '.js-ticker-goal-marker'
-            );
-            if (marker) {
-                marker.classList.remove('is-hidden');
-                const markerTranslate = (goal / end) * 100 - 100;
-                marker.style.transform = `translate3d(${markerTranslate}%, 0, 0)`;
-            }
-        }
-    }
-};
-
-const increaseCounter = (
-    parentElementSelector: string,
-    counterElement: HTMLElement,
-    tickerSettings: TickerSettings,
-) => {
-    // Count is local to the parent element
-    const newCount = count[parentElementSelector] + Math.floor(total / 100);
-
-    const finishedCounting =
-        newCount <= count[parentElementSelector] || newCount >= total; // either we've reached the total or the count isn't going up because total is too small
-
-    const currencySymbol = getCurrencySymbol(tickerSettings);
-
-    if (finishedCounting) {
-        counterElement.innerHTML = `${currencySymbol}${total.toLocaleString()}`;
-    } else {
-        count[parentElementSelector] = newCount;
-        counterElement.innerHTML = `${currencySymbol}${count[
-            parentElementSelector
-        ].toLocaleString()}`;
-
-        window.requestAnimationFrame(() =>
-            increaseCounter(parentElementSelector, counterElement, tickerSettings)
-        );
-    }
-};
-
-const populateStatusSoFar = (
-    parentElementSelector: string,
-    parentElement: HTMLElement,
-    tickerSettings: TickerSettings,
-) => {
-    const counterElement = parentElement.querySelector(
-        `.js-ticker-amounts .js-ticker-count`
-    );
-
-    const labelElement = parentElement.querySelector(
-        `.js-ticker-amounts .js-ticker-label`
-    );
-
-    if (counterElement && labelElement) {
-        if (goalReached()) {
-            counterElement.innerHTML = tickerSettings.copy.goalReachedPrimary;
-            if (tickerSettings.endType === 'unlimited') {
-                labelElement.innerHTML = tickerSettings.copy.goalReachedSecondary;
-                labelElement.classList.remove('is-hidden');
-            }
-        } else {
-            labelElement.innerHTML = tickerSettings.copy.countLabel;
-            labelElement.classList.remove('is-hidden');
-            increaseCounter(parentElementSelector, counterElement, tickerSettings);
-        }
-    }
-};
-
-const populateGoal = (parentElement: HTMLElement, tickerSettings: TickerSettings) => {
-    const goalElement = parentElement.querySelector('.js-ticker-goal');
-
-    if (goalElement) {
-        const countElement = goalElement.querySelector('.js-ticker-count');
-        const labelElement = goalElement.querySelector('.js-ticker-label');
-
-        if (countElement && labelElement) {
-            const amount =
-                goalReached() && tickerSettings.endType === 'unlimited' ? total : goal;
-            countElement.innerHTML = `${getCurrencySymbol(tickerSettings)}${amount.toLocaleString()}`;
-
-            if (goalReached()) {
-                labelElement.innerHTML = tickerSettings.copy.countLabel;
-            }
-        }
-    }
-};
-
-const animate = (parentElementSelector: string, tickerSettings: TickerSettings) => {
-    const parentElement = document.querySelector(parentElementSelector);
-
-    if (parentElement && parentElement instanceof HTMLElement) {
-        if (goalReached()) {
-            parentElement.classList.add('epic-ticker__goal-reached');
-        }
-
-        populateGoal(parentElement, tickerSettings);
-
-        window.setTimeout(() => {
-            count[parentElementSelector] = 0;
-            window.requestAnimationFrame(() =>
-                populateStatusSoFar(
-                    parentElementSelector,
-                    parentElement,
-                    tickerSettings,
-                )
-            );
-            animateBar(parentElement, tickerSettings.endType);
-        }, 500);
-
-        parentElement.classList.add(`epic-ticker__${tickerSettings.endType}`);
-        parentElement.classList.remove('is-hidden');
-    }
-};
-
-const dataSuccessfullyFetched = () =>
-    !(Number.isNaN(Number(total)) || Number.isNaN(Number(goal)));
-
-const getTickerUrl = (countType: TickerCountType): string =>
-    countType === 'people' ? 'https://support.theguardian.com/supporters-ticker.json' : 'https://support.theguardian.com/ticker.json';
-
-const fetchDataAndAnimate = (
-    parentElementSelector: string,
-    tickerSettings: TickerSettings,
-) => {
-    if (dataSuccessfullyFetched()) {
-        animate(parentElementSelector, tickerSettings);
-    } else {
-        fetchJSON(getTickerUrl(tickerSettings.countType), {
-            mode: 'cors',
-        }).then(data => {
-            total = parseInt(data.total, 10);
-            goal = parseInt(data.goal, 10);
-
-            if (dataSuccessfullyFetched()) {
-                animate(parentElementSelector, tickerSettings);
-            }
-        });
-    }
-};
-
-const defaultSettings: TickerSettings = {
-    endType: 'unlimited',
-    countType: 'people',
-    copy: {
-        countLabel: 'supporters in Australia',
-        goalReachedPrimary: 'We\'ve hit our goal!',
-        goalReachedSecondary: 'but you can still support us',
-    },
-    currencySymbol: '$',
-};
-
-const initTicker = (
-    parentElementSelector: string,
-    tickerSettings: ?TickerSettings
-) => {
-    fetchDataAndAnimate(
-        parentElementSelector,
-        tickerSettings || defaultSettings,
-    );
-};
-
-export {
-    initTicker,
-    parseTickerSettings,
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/commercial/user-features.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/commercial/user-features.spec.js
deleted file mode 100644
index e8173fbaf9d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/commercial/user-features.spec.js
+++ /dev/null
@@ -1,618 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/commercial/user-features.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { addCookie, removeCookie, getCookie } from 'lib/cookies';
-import fetchJson from 'lib/fetch-json';
-import { isUserLoggedIn as isUserLoggedIn_ } from 'common/modules/identity/api';
-import config from 'lib/config';
-import {
-    refresh,
-    isAdFreeUser,
-    isPayingMember,
-    isRecurringContributor,
-    accountDataUpdateWarning,
-    isDigitalSubscriber,
-    getLastOneOffContributionDate,
-    getDaysSinceLastOneOffContribution,
-    isRecentOneOffContributor,
-    shouldNotBeShownSupportMessaging,
-    getLastRecurringContributionDate,
-    isPostAskPauseOneOffContributor,
-} from './user-features.js';
-
-jest.mock('lib/raven');
-jest.mock('projects/common/modules/identity/api', () => ({
-    isUserLoggedIn: jest.fn(),
-}));
-jest.mock('lib/fetch-json', () => jest.fn(() => Promise.resolve()));
-
-const fetchJsonSpy: any = fetchJson;
-const isUserLoggedIn: any = isUserLoggedIn_;
-
-const PERSISTENCE_KEYS = {
-    USER_FEATURES_EXPIRY_COOKIE: 'gu_user_features_expiry',
-    PAYING_MEMBER_COOKIE: 'gu_paying_member',
-    RECURRING_CONTRIBUTOR_COOKIE: 'gu_recurring_contributor',
-    AD_FREE_USER_COOKIE: 'GU_AF1',
-    ACTION_REQUIRED_FOR_COOKIE: 'gu_action_required_for',
-    DIGITAL_SUBSCRIBER_COOKIE: 'gu_digital_subscriber',
-    SUPPORT_ONE_OFF_CONTRIBUTION_COOKIE: 'gu.contributions.contrib-timestamp',
-    ONE_OFF_CONTRIBUTION_DATE_COOKIE: 'gu_one_off_contribution_date',
-    HIDE_SUPPORT_MESSAGING_COOKIE: 'gu_hide_support_messaging',
-    SUPPORT_MONTHLY_CONTRIBUTION_COOKIE:
-        'gu.contributions.recurring.contrib-timestamp.Monthly',
-    SUPPORT_ANNUAL_CONTRIBUTION_COOKIE:
-        'gu.contributions.recurring.contrib-timestamp.Annual',
-};
-
-const setAllFeaturesData = opts => {
-    const currentTime = new Date().getTime();
-    const msInOneDay = 24 * 60 * 60 * 1000;
-    const expiryDate = opts.isExpired
-        ? new Date(currentTime - msInOneDay)
-        : new Date(currentTime + msInOneDay);
-    const adFreeExpiryDate = opts.isExpired
-        ? new Date(currentTime - msInOneDay * 2)
-        : new Date(currentTime + msInOneDay * 2);
-    addCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE, 'true');
-    addCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE, 'true');
-    addCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE, 'true');
-    addCookie(PERSISTENCE_KEYS.HIDE_SUPPORT_MESSAGING_COOKIE, 'true');
-    addCookie(
-        PERSISTENCE_KEYS.AD_FREE_USER_COOKIE,
-        adFreeExpiryDate.getTime().toString()
-    );
-    addCookie(
-        PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE,
-        expiryDate.getTime().toString()
-    );
-    addCookie(PERSISTENCE_KEYS.ACTION_REQUIRED_FOR_COOKIE, 'test');
-};
-
-const setExpiredAdFreeData = () => {
-    const currentTime = new Date().getTime();
-    const msInOneDay = 24 * 60 * 60 * 1000;
-    const expiryDate = new Date(currentTime - msInOneDay * 2);
-    addCookie(
-        PERSISTENCE_KEYS.AD_FREE_USER_COOKIE,
-        expiryDate.getTime().toString()
-    );
-};
-
-const deleteAllFeaturesData = () => {
-    removeCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE);
-    removeCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE);
-    removeCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE);
-    removeCookie(PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE);
-    removeCookie(PERSISTENCE_KEYS.AD_FREE_USER_COOKIE);
-    removeCookie(PERSISTENCE_KEYS.ACTION_REQUIRED_FOR_COOKIE);
-    removeCookie(PERSISTENCE_KEYS.HIDE_SUPPORT_MESSAGING_COOKIE);
-};
-
-beforeAll(() => {
-    config.set('switches.adFreeStrictExpiryEnforcement', true);
-    config.set('page.userAttributesApiUrl', '');
-});
-
-describe('Refreshing the features data', () => {
-    describe('If user signed in', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(true);
-            fetchJsonSpy.mockReturnValue(Promise.resolve());
-        });
-
-        it('Performs an update if the user has missing data', () => {
-            deleteAllFeaturesData();
-            refresh();
-            expect(fetchJsonSpy).toHaveBeenCalledTimes(1);
-        });
-
-        it('Performs an update if the user has expired data', () => {
-            setAllFeaturesData({ isExpired: true });
-            refresh();
-            expect(fetchJsonSpy).toHaveBeenCalledTimes(1);
-        });
-
-        it('Does not delete the data just because it has expired', () => {
-            setAllFeaturesData({ isExpired: true });
-            refresh();
-            expect(getCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE)).toBe(
-                'true'
-            );
-            expect(
-                getCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE)
-            ).toBe('true');
-            expect(
-                getCookie(PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE)
-            ).toEqual(expect.stringMatching(/\d{13}/));
-            expect(getCookie(PERSISTENCE_KEYS.AD_FREE_USER_COOKIE)).toEqual(
-                expect.stringMatching(/\d{13}/)
-            );
-        });
-
-        it('Does not perform update if user has fresh feature data', () => {
-            setAllFeaturesData({ isExpired: false });
-            refresh();
-            expect(fetchJsonSpy).not.toHaveBeenCalled();
-        });
-
-        it('Performs an update if membership-frontend wipes just the paying-member cookie', () => {
-            // Set everything except paying-member cookie
-            setAllFeaturesData({ isExpired: true });
-            removeCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE);
-
-            refresh();
-            expect(fetchJsonSpy).toHaveBeenCalledTimes(1);
-        });
-
-        it('Performs an update if the ad-free state is stale and strict expiry enforcement is enabled', () => {
-            // This is a slightly synthetic setup - the ad-free cookie is rewritten with every
-            // refresh that happens as a result of expired features data, but we want to check
-            // that a refresh could be triggered based on ad-free state alone if the strict
-            // expiry enforcement switch is ON.
-            // Set everything except the ad-free cookie
-            setAllFeaturesData({ isExpired: false });
-            setExpiredAdFreeData();
-
-            refresh();
-            expect(fetchJsonSpy).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    describe('If user signed out', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(false);
-            fetchJsonSpy.mockReturnValue(Promise.resolve());
-        });
-
-        it('Does not perform update, even if feature data missing', () => {
-            deleteAllFeaturesData();
-            refresh();
-            expect(fetchJsonSpy).not.toHaveBeenCalled();
-        });
-
-        it('Deletes leftover feature data', () => {
-            setAllFeaturesData({ isExpired: false });
-            refresh();
-            expect(getCookie(PERSISTENCE_KEYS.AD_FREE_USER_COOKIE)).toBeNull();
-            expect(getCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE)).toBeNull();
-            expect(
-                getCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE)
-            ).toBeNull();
-            expect(
-                getCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE)
-            ).toBeNull();
-            expect(
-                getCookie(PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE)
-            ).toBeNull();
-        });
-    });
-});
-
-describe('The account data update warning getter', () => {
-    it('Is not set when the user is logged out', () => {
-        jest.resetAllMocks();
-        isUserLoggedIn.mockReturnValue(false);
-        expect(accountDataUpdateWarning()).toBe(null);
-    });
-
-    describe('When the user is logged in', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(true);
-        });
-
-        it('Is the same when the user has an account data update link cookie', () => {
-            addCookie(PERSISTENCE_KEYS.ACTION_REQUIRED_FOR_COOKIE, 'the-same');
-            expect(accountDataUpdateWarning()).toBe('the-same');
-        });
-
-        it('Is null when the user does not have an account data update link cookie', () => {
-            removeCookie(PERSISTENCE_KEYS.ACTION_REQUIRED_FOR_COOKIE);
-            expect(accountDataUpdateWarning()).toBe(null);
-        });
-    });
-});
-
-describe('The isAdFreeUser getter', () => {
-    it('Is false when the user is logged out', () => {
-        jest.resetAllMocks();
-        isUserLoggedIn.mockReturnValue(false);
-        expect(isAdFreeUser()).toBe(false);
-    });
-});
-
-describe('The isPayingMember getter', () => {
-    it('Is false when the user is logged out', () => {
-        jest.resetAllMocks();
-        isUserLoggedIn.mockReturnValue(false);
-        expect(isPayingMember()).toBe(false);
-    });
-
-    describe('When the user is logged in', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(true);
-        });
-
-        it('Is true when the user has a `true` paying member cookie', () => {
-            addCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE, 'true');
-            expect(isPayingMember()).toBe(true);
-        });
-
-        it('Is false when the user has a `false` paying member cookie', () => {
-            addCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE, 'false');
-            expect(isPayingMember()).toBe(false);
-        });
-
-        it('Is true when the user has no paying member cookie', () => {
-            // If we don't know, we err on the side of caution, rather than annoy paying users
-            removeCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE);
-            expect(isPayingMember()).toBe(true);
-        });
-    });
-});
-
-describe('The isRecurringContributor getter', () => {
-    it('Is false when the user is logged out', () => {
-        jest.resetAllMocks();
-        isUserLoggedIn.mockReturnValue(false);
-        expect(isRecurringContributor()).toBe(false);
-    });
-
-    describe('When the user is logged in', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(true);
-        });
-
-        it('Is true when the user has a `true` recurring contributor cookie', () => {
-            addCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE, 'true');
-            expect(isRecurringContributor()).toBe(true);
-        });
-
-        it('Is false when the user has a `false` recurring contributor cookie', () => {
-            addCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE, 'false');
-            expect(isRecurringContributor()).toBe(false);
-        });
-
-        it('Is true when the user has no recurring contributor cookie', () => {
-            // If we don't know, we err on the side of caution, rather than annoy paying users
-            removeCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE);
-            expect(isRecurringContributor()).toBe(true);
-        });
-    });
-});
-
-describe('The isDigitalSubscriber getter', () => {
-    it('Is false when the user is logged out', () => {
-        jest.resetAllMocks();
-        isUserLoggedIn.mockReturnValue(false);
-        expect(isDigitalSubscriber()).toBe(false);
-    });
-
-    describe('When the user is logged in', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(true);
-        });
-
-        it('Is true when the user has a `true` digital subscriber cookie', () => {
-            addCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE, 'true');
-            expect(isDigitalSubscriber()).toBe(true);
-        });
-
-        it('Is false when the user has a `false` digital subscriber cookie', () => {
-            addCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE, 'false');
-            expect(isDigitalSubscriber()).toBe(false);
-        });
-
-        it('Is false when the user has no digital subscriber cookie', () => {
-            removeCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE);
-            expect(isDigitalSubscriber()).toBe(false);
-        });
-    });
-});
-
-describe('The shouldNotBeShownSupportMessaging getter', () => {
-    it('Returns false when the user is logged out', () => {
-        jest.resetAllMocks();
-        isUserLoggedIn.mockReturnValue(false);
-        expect(shouldNotBeShownSupportMessaging()).toBe(false);
-    });
-
-    describe('When the user is logged in', () => {
-        beforeEach(() => {
-            jest.resetAllMocks();
-            isUserLoggedIn.mockReturnValue(true);
-        });
-
-        it('Returns true when the user has a `true` hide support messaging cookie', () => {
-            addCookie(PERSISTENCE_KEYS.HIDE_SUPPORT_MESSAGING_COOKIE, 'true');
-            expect(shouldNotBeShownSupportMessaging()).toBe(true);
-        });
-
-        it('Returns false when the user has a `false` hide support messaging cookie', () => {
-            addCookie(PERSISTENCE_KEYS.HIDE_SUPPORT_MESSAGING_COOKIE, 'false');
-            expect(shouldNotBeShownSupportMessaging()).toBe(false);
-        });
-
-        it('Returns false when the user has no hide support messaging cookie', () => {
-            removeCookie(PERSISTENCE_KEYS.HIDE_SUPPORT_MESSAGING_COOKIE);
-            expect(shouldNotBeShownSupportMessaging()).toBe(false);
-        });
-    });
-});
-
-describe('Storing new feature data', () => {
-    beforeEach(() => {
-        jest.resetAllMocks();
-        fetchJsonSpy.mockReturnValue(Promise.resolve());
-        deleteAllFeaturesData();
-        isUserLoggedIn.mockReturnValue(true);
-    });
-
-    it('Puts the paying-member state and ad-free state in appropriate cookie', () => {
-        fetchJsonSpy.mockReturnValueOnce(
-            Promise.resolve({
-                contentAccess: {
-                    paidMember: false,
-                    recurringContributor: false,
-                    digitalPack: false,
-                },
-                adFree: false,
-            })
-        );
-        return refresh().then(() => {
-            expect(getCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE)).toBe(
-                'false'
-            );
-            expect(
-                getCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE)
-            ).toBe('false');
-            expect(getCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE)).toBe(
-                'false'
-            );
-            expect(getCookie(PERSISTENCE_KEYS.AD_FREE_USER_COOKIE)).toBeNull();
-        });
-    });
-
-    it('Puts the paying-member state and ad-free state in appropriate cookie', () => {
-        fetchJsonSpy.mockReturnValueOnce(
-            Promise.resolve({
-                contentAccess: {
-                    paidMember: true,
-                    recurringContributor: true,
-                    digitalPack: true,
-                },
-                adFree: true,
-            })
-        );
-        return refresh().then(() => {
-            expect(getCookie(PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE)).toBe(
-                'true'
-            );
-            expect(
-                getCookie(PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE)
-            ).toBe('true');
-            expect(getCookie(PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE)).toBe(
-                'true'
-            );
-            expect(
-                getCookie(PERSISTENCE_KEYS.AD_FREE_USER_COOKIE)
-            ).toBeTruthy();
-            expect(
-                Number.isNaN(
-                    parseInt(
-                        getCookie(PERSISTENCE_KEYS.AD_FREE_USER_COOKIE),
-                        10
-                    )
-                )
-            ).toBe(false);
-        });
-    });
-
-    it('Puts an expiry date in an accompanying cookie', () =>
-        refresh().then(() => {
-            const expiryDate = getCookie(
-                PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE
-            );
-            expect(expiryDate).toBeTruthy();
-            expect(Number.isNaN(parseInt(expiryDate, 10))).toBe(false);
-        }));
-
-    it('The expiry date is in the future', () =>
-        refresh().then(() => {
-            const expiryDateString = getCookie(
-                PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE
-            );
-            const expiryDateEpoch = parseInt(expiryDateString, 10);
-            const currentTimeEpoch = new Date().getTime();
-            expect(currentTimeEpoch < expiryDateEpoch).toBe(true);
-        }));
-});
-
-const setSupportFrontendOneOffContributionCookie = (value: any): void =>
-    addCookie(PERSISTENCE_KEYS.SUPPORT_ONE_OFF_CONTRIBUTION_COOKIE, value);
-
-const removeSupportFrontendOneOffContributionCookie = (): void =>
-    removeCookie(PERSISTENCE_KEYS.SUPPORT_ONE_OFF_CONTRIBUTION_COOKIE);
-
-const setAttributesOneOffContributionCookie = (value: any): void =>
-    addCookie(PERSISTENCE_KEYS.ONE_OFF_CONTRIBUTION_DATE_COOKIE, value);
-
-const removeAttributesOneOffContributionCookie = (): void =>
-    removeCookie(PERSISTENCE_KEYS.ONE_OFF_CONTRIBUTION_DATE_COOKIE);
-
-describe('getting the last one-off contribution date of a user', () => {
-    beforeEach(() => {
-        removeSupportFrontendOneOffContributionCookie();
-        removeAttributesOneOffContributionCookie();
-    });
-
-    const contributionDate = '2018-01-06';
-    const contributionDateTimeEpoch = Date.parse(contributionDate);
-
-    it("returns null if the user hasn't previously contributed", () => {
-        expect(getLastOneOffContributionDate()).toBe(null);
-    });
-
-    it('return the correct date if the user support-frontend contribution cookie is set', () => {
-        setSupportFrontendOneOffContributionCookie(
-            contributionDateTimeEpoch.toString()
-        );
-        expect(getLastOneOffContributionDate()).toBe(contributionDateTimeEpoch);
-    });
-
-    it('returns null if the cookie has been set with an invalid value', () => {
-        setSupportFrontendOneOffContributionCookie('invalid value');
-        expect(getLastOneOffContributionDate()).toBe(null);
-    });
-
-    it('returns the correct date if cookie from attributes is set', () => {
-        setAttributesOneOffContributionCookie(contributionDate.toString());
-        expect(getLastOneOffContributionDate()).toBe(contributionDateTimeEpoch);
-    });
-});
-
-const setMonthlyContributionCookie = (value: any): void =>
-    addCookie(PERSISTENCE_KEYS.SUPPORT_MONTHLY_CONTRIBUTION_COOKIE, value);
-
-const setAnnualContributionCookie = (value: any): void =>
-    addCookie(PERSISTENCE_KEYS.SUPPORT_ANNUAL_CONTRIBUTION_COOKIE, value);
-
-const removeMonthlyContributionCookie = (): void =>
-    removeCookie(PERSISTENCE_KEYS.SUPPORT_MONTHLY_CONTRIBUTION_COOKIE);
-
-const removeAnnualContributionCookie = (): void =>
-    removeCookie(PERSISTENCE_KEYS.SUPPORT_ANNUAL_CONTRIBUTION_COOKIE);
-
-describe('getting the last recurring contribution date of a user', () => {
-    beforeEach(() => {
-        removeMonthlyContributionCookie();
-        removeAnnualContributionCookie();
-    });
-
-    const monthlyContributionTimestamp = 1556124724;
-    const annualContributionTimestamp = 1556125286;
-
-    it("returns null if the user isn't a recurring contributor", () => {
-        expect(getLastRecurringContributionDate()).toBe(null);
-    });
-
-    it('return the correct date if the user is a monthly recurring contributor', () => {
-        setMonthlyContributionCookie(monthlyContributionTimestamp.toString());
-        expect(getLastRecurringContributionDate()).toBe(
-            monthlyContributionTimestamp
-        );
-    });
-
-    it('return the correct date if the user is a annual recurring contributor', () => {
-        setAnnualContributionCookie(annualContributionTimestamp.toString());
-        expect(getLastRecurringContributionDate()).toBe(
-            annualContributionTimestamp
-        );
-    });
-
-    it('return the correct date if the user is both annual and monthly recurring contributor', () => {
-        setAnnualContributionCookie(annualContributionTimestamp.toString());
-        setMonthlyContributionCookie(monthlyContributionTimestamp.toString());
-        expect(getLastRecurringContributionDate()).toBe(
-            annualContributionTimestamp
-        );
-    });
-
-    it('returns null if the cookie has been set with an invalid value', () => {
-        setAnnualContributionCookie('not a date string one');
-        setMonthlyContributionCookie('not a date string two');
-        expect(getLastRecurringContributionDate()).toBe(null);
-    });
-});
-
-describe('getting the days since last contribution', () => {
-    beforeEach(() => {
-        removeSupportFrontendOneOffContributionCookie();
-        removeAttributesOneOffContributionCookie();
-    });
-
-    const contributionDateTimeEpoch = Date.parse('2018-08-01T12:00:30Z');
-
-    it('returns null if the last one-off contribution date is null', () => {
-        expect(getDaysSinceLastOneOffContribution()).toBe(null);
-    });
-
-    it('returns the difference in days between the last contribution date and now if the last contribution date is set', () => {
-        global.Date.now = jest.fn(() => Date.parse('2018-08-07T10:50:34'));
-        setSupportFrontendOneOffContributionCookie(contributionDateTimeEpoch);
-        expect(getDaysSinceLastOneOffContribution()).toBe(5);
-    });
-});
-
-describe('isRecentOneOffContributor', () => {
-    beforeEach(() => {
-        removeSupportFrontendOneOffContributionCookie();
-        removeAttributesOneOffContributionCookie();
-    });
-
-    const contributionDateTimeEpoch = Date.parse('2018-08-01T12:00:30Z');
-
-    it('returns false if there is no one-off contribution cookie', () => {
-        expect(isRecentOneOffContributor()).toBe(false);
-    });
-
-    it('returns true if there are 5 days between the last contribution date and now', () => {
-        global.Date.now = jest.fn(() => Date.parse('2018-08-07T10:50:34'));
-        setSupportFrontendOneOffContributionCookie(contributionDateTimeEpoch);
-        expect(isRecentOneOffContributor()).toBe(true);
-    });
-
-    it('returns true if there are 0 days between the last contribution date and now', () => {
-        global.Date.now = jest.fn(() => Date.parse('2018-08-01T13:00:30'));
-        setSupportFrontendOneOffContributionCookie(contributionDateTimeEpoch);
-        expect(isRecentOneOffContributor()).toBe(true);
-    });
-
-    it('returns false if the one-off contribution was more than 3 months ago', () => {
-        global.Date.now = jest.fn(() => Date.parse('2019-08-01T13:00:30'));
-        setSupportFrontendOneOffContributionCookie(contributionDateTimeEpoch);
-        expect(isRecentOneOffContributor()).toBe(false);
-    });
-});
-
-describe('isPostAskPauseOneOffContributor', () => {
-    beforeEach(() => {
-        removeSupportFrontendOneOffContributionCookie();
-        removeAttributesOneOffContributionCookie();
-    });
-
-    const contributionDateTimeEpoch = Date.parse('2018-08-01T12:00:30Z');
-
-    it('returns false if there is no one-off contribution cookie', () => {
-        expect(isPostAskPauseOneOffContributor()).toBe(false);
-    });
-
-    it('returns false if there are 5 days between the last contribution date and now', () => {
-        global.Date.now = jest.fn(() => Date.parse('2018-08-07T10:50:34'));
-        setSupportFrontendOneOffContributionCookie(contributionDateTimeEpoch);
-        expect(isPostAskPauseOneOffContributor()).toBe(false);
-    });
-
-    it('returns true if the one-off contribution was more than 3 months ago', () => {
-        global.Date.now = jest.fn(() => Date.parse('2019-02-01T13:00:30'));
-        setSupportFrontendOneOffContributionCookie(contributionDateTimeEpoch);
-        expect(isPostAskPauseOneOffContributor()).toBe(true);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/component.js b/static/src/javascripts.flow.archive/projects/common/modules/component.js
deleted file mode 100644
index 775504ff1d5..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/component.js
+++ /dev/null
@@ -1,373 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/component.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable no-underscore-dangle */
-
-import bean from 'bean';
-import bonzo from 'bonzo';
-import fetchJSON from 'lib/fetch-json';
-import qwery from 'qwery';
-
-class ComponentError {
-    constructor(message) {
-        return new Error(`Component: ${message}`);
-    }
-}
-
-class Component {
-    useBem: boolean;
-    templateName: ?string;
-    componentClass: ?string;
-    endpoint: ?string | ?(() => string);
-    classes: ?Object;
-    elem: ?(HTMLElement | HTMLAnchorElement | HTMLInputElement);
-    template: ?string;
-    rendered: boolean;
-    destroyed: boolean;
-    elems: ?Object;
-    options: Object;
-    defaultOptions: Object;
-    responseDataKey: string;
-    autoupdated: boolean;
-    updateEvery: number;
-    fetchData: ?string;
-    manipulationType: string;
-    t: ?TimeoutID;
-
-    constructor(): void {
-        this.useBem = false;
-        this.templateName = null;
-        this.componentClass = null;
-        this.endpoint = null;
-        this.classes = null;
-        this.elem = null;
-        this.template = null;
-        this.rendered = false;
-        this.destroyed = false;
-        this.elems = null;
-        this.options = {};
-        this.defaultOptions = {};
-        this.responseDataKey = 'html';
-        this.autoupdated = false;
-        this.updateEvery = 60;
-        this.fetchData = null;
-        this.manipulationType = 'append';
-        this.t = null;
-    }
-
-    attachTo(elem: HTMLElement): void {
-        this.checkAttached();
-
-        this.elem = elem;
-        this._prerender();
-        this._ready();
-    }
-
-    render(parent: HTMLElement | ?Node = document.body): Component {
-        this.checkAttached();
-        let template = this.template;
-
-        if (!template && this.templateName) {
-            const templateEl = document.getElementById(
-                `tmpl-${this.templateName}`
-            );
-
-            if (templateEl) {
-                template = templateEl.innerHTML;
-            }
-        }
-
-        if (template) {
-            this.elem = bonzo.create(template)[0];
-            this._prerender();
-            bonzo(parent)[this.manipulationType](this.elem);
-        }
-
-        this._ready();
-        return this;
-    }
-
-    /**
-     * Throws an error if this is already attached to the DOM
-     */
-    checkAttached(): void {
-        if (this.rendered) {
-            throw new ComponentError('Already rendered');
-        }
-    }
-
-    fetch(parent: HTMLElement | Node, key?: string): Promise<void> {
-        this.checkAttached();
-
-        if (key) {
-            this.responseDataKey = key;
-        }
-
-        return this._fetch()
-            .then(resp => {
-                this.elem = bonzo.create(resp[this.responseDataKey])[0];
-                this._prerender();
-
-                if (!this.destroyed) {
-                    bonzo(parent)[this.manipulationType](this.elem);
-                    this._ready(this.elem);
-                }
-            })
-            .catch(err => this.error(err));
-    }
-
-    _fetch(): Promise<Object> {
-        let endpoint =
-            typeof this.endpoint === 'function'
-                ? this.endpoint()
-                : this.endpoint;
-
-        if (typeof endpoint === 'string') {
-            Object.keys(this.options).forEach(key => {
-                const value = this.options[key];
-
-                if (endpoint && value) {
-                    endpoint = endpoint.replace(`:${key}`, value);
-                }
-            });
-        }
-
-        if (!endpoint) {
-            return Promise.resolve({});
-        }
-
-        return fetchJSON(endpoint, {
-            mode: 'cors',
-            body: this.fetchData,
-        }).then(resp => {
-            this.fetched(resp);
-            return resp;
-        });
-    }
-
-    _ready(elem?: ?(HTMLElement | HTMLAnchorElement | HTMLInputElement)): void {
-        if (!this.destroyed) {
-            this.rendered = true;
-            this._autoupdate();
-            this.ready(elem);
-        }
-    }
-
-    _prerender(): void {
-        this.elems = {};
-        this.prerender();
-    }
-
-    /**
-     * Check if we should auto update, if so, do so
-     */
-    _autoupdate(): void {
-        const setAutoUpdate = () => {
-            // eslint-disable-next-line no-use-before-define
-            this.t = setTimeout(() => update(), this.updateEvery * 1000);
-        };
-        const update = (): void => {
-            this._fetch()
-                .then(resp => {
-                    this.autoupdate(
-                        bonzo.create(resp[this.responseDataKey])[0]
-                    );
-
-                    if (this.autoupdated) {
-                        setAutoUpdate();
-                    }
-                })
-                .catch(() => {
-                    setAutoUpdate();
-                });
-        };
-
-        if (this.autoupdated) {
-            setAutoUpdate();
-        }
-    }
-
-    /**
-     * This is user to edit this.elem before it's rendered
-     * This will help with the rendering performance that
-     * we would lose if rendered then manipulated
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    prerender(): void {}
-
-    /**
-     * Once the render / decorate methods have been called
-     * This is where you could do your event binding
-     * This function is made to be overridden
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    ready(elem: ?(HTMLElement | HTMLAnchorElement | HTMLInputElement)): void {}
-
-    /**
-     * Once the render / decorate methods have been called
-     * This is where you could do your error event binding
-     * This function is made to be overridden
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    error(type: string, message?: string): void {}
-
-    /**
-     * This is called whenever a fetch occurs. This includes
-     * explicit fetch calls and autoupdate.
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    fetched(resp: Object): void {}
-
-    autoupdate(elem: HTMLElement): void {
-        const oldElem = this.elem;
-        this.elem = elem;
-
-        this._prerender();
-        bonzo(oldElem).replaceWith(this.elem);
-    }
-
-    /**
-     * Once we're done with it, remove event bindings etc
-     */
-    // eslint-disable-next-line class-methods-use-this, no-unused-vars
-    dispose(): void {}
-
-    on(
-        eventType: string,
-        elem: string | ((arg: any) => void),
-        handler?: (arg: any) => void
-    ): Component {
-        if (typeof elem === 'function') {
-            const eventHandler = elem;
-            bean.on(this.elem, eventType, eventHandler.bind(this));
-        } else if (typeof handler === 'function') {
-            const selector = !elem.length ? [elem] : elem;
-            bean.on(this.elem, eventType, selector, handler.bind(this));
-        }
-
-        return this;
-    }
-
-    emit(eventName: string, args?: mixed): void {
-        bean.fire(this.elem, eventName, args);
-    }
-
-    getElem(elemName: string): ?(HTMLElement | HTMLInputElement) {
-        if (this.elems && this.elems[elemName]) {
-            return this.elems[elemName];
-        }
-
-        const elem = qwery(this.getClass(elemName), this.elem)[0];
-
-        if (elem && this.elems) {
-            this.elems[elemName] = elem;
-        }
-
-        return elem;
-    }
-
-    getClass(elemName: string, sansDot: boolean = false): string {
-        let className;
-
-        if (this.useBem && this.componentClass) {
-            className = `${this.componentClass}__${elemName}`;
-        } else {
-            className = (this.classes && this.classes[elemName]) || '';
-        }
-
-        return (sansDot ? '' : '.') + className;
-    }
-
-    setState(state: string, elemName: ?string): void {
-        const elem = elemName ? this.getElem(elemName) : this.elem;
-        const $elem = bonzo(elem);
-
-        if (this.componentClass) {
-            $elem.addClass(
-                `${this.componentClass +
-                    (elemName ? `__${elemName}` : '')}--${state}`
-            );
-        }
-    }
-
-    removeState(state: string, elemName: ?string): void {
-        const elem = elemName ? this.getElem(elemName) : this.elem;
-        const $elem = bonzo(elem);
-
-        if (this.componentClass) {
-            $elem.removeClass(
-                `${this.componentClass +
-                    (elemName ? `__${elemName}` : '')}--${state}`
-            );
-        }
-    }
-
-    toggleState(state: string, elemName: ?string): void {
-        const elem = elemName ? this.getElem(elemName) : this.elem;
-        const $elem = bonzo(elem);
-
-        if (this.componentClass) {
-            $elem.toggleClass(
-                `${this.componentClass +
-                    (elemName ? `__${elemName}` : '')}--${state}`
-            );
-        }
-    }
-
-    hasState(state: string, elemName: ?string): boolean {
-        const elem = elemName ? this.getElem(elemName) : this.elem;
-        const $elem = bonzo(elem);
-
-        if (this.componentClass) {
-            return $elem.hasClass(
-                `${this.componentClass +
-                    (elemName ? `__${elemName}` : '')}--${state}`
-            );
-        }
-
-        return false;
-    }
-
-    setOptions(options: Object): void {
-        this.options = Object.assign(
-            {},
-            this.defaultOptions,
-            this.options,
-            options
-        );
-    }
-
-    /**
-     * Removes all event listeners and removes the DOM elem
-     */
-    destroy(): void {
-        if (this.elem) {
-            bonzo(this.elem).remove();
-            delete this.elem;
-        }
-
-        if (this.t) {
-            window.clearTimeout(this.t);
-        }
-
-        this.t = null;
-        this.autoupdated = false;
-
-        bean.off(this.elem);
-
-        this.destroyed = true;
-        this.rendered = false;
-    }
-}
-
-export { Component };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/component.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/component.spec.js
deleted file mode 100644
index d142fff77f4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/component.spec.js
+++ /dev/null
@@ -1,420 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/component.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import fetchJSON_ from 'lib/fetch-json';
-
-import { Component } from './component';
-
-const fetchJSON: JestMockFn<*, *> = (fetchJSON_: any);
-
-const mockResponse = {
-    html: '<p>html</p>',
-    other: '<p>other</p>',
-};
-
-const createComponent = (props?: Object = {}): Component => {
-    const component = new Component();
-    const defaults = {
-        endpoint: 'whatever',
-    };
-
-    Object.assign(component, defaults, props);
-
-    return component;
-};
-
-jest.mock('lib/fetch-json', () => jest.fn(() => Promise.resolve(mockResponse)));
-
-jest.mock('bean', () => ({
-    off: jest.fn(),
-}));
-
-describe('Component', () => {
-    let elem;
-    let subElem;
-
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-                <div class="component">
-                    <div class="component__element"></div>
-                </div>
-            `;
-        }
-
-        // Apologies for the typecast, but it makes things just way easier ...
-        elem = ((document.querySelector('.component'): any): HTMLElement);
-        subElem = ((document.querySelector(
-            '.component__element'
-        ): any): HTMLElement);
-    });
-
-    describe('fetch()', () => {
-        test('call fetched() with an endpoint', () => {
-            const component = createComponent({
-                fetched: jest.fn(),
-            });
-
-            return component.fetch(elem).then(() => {
-                expect(component.fetched).toHaveBeenCalledWith(mockResponse);
-            });
-        });
-
-        test('not call fetched() without an endpoint', () => {
-            const component = createComponent({
-                endpoint: false,
-                fetched: jest.fn(),
-            });
-
-            return component.fetch(elem).then(() => {
-                expect(component.fetched).not.toHaveBeenCalled();
-            });
-        });
-
-        test('extract the content of `html` in response by default', () => {
-            const component = createComponent({
-                fetched: jest.fn(),
-            });
-
-            return component.fetch(elem).then(() => {
-                if (!component.elem) {
-                    return Promise.reject(
-                        new Error('.elem property should exist')
-                    );
-                }
-
-                if (component.elem) {
-                    expect(component.elem.tagName).toBe('P');
-                }
-
-                if (component.elem) {
-                    expect(component.elem.innerHTML).toBe('html');
-                }
-
-                expect(component.fetched).toHaveBeenCalledWith(mockResponse);
-            });
-        });
-
-        test('properly extract data from response, if key was passed', () => {
-            const component = createComponent({
-                fetched: jest.fn(),
-            });
-
-            return component.fetch(elem, 'other').then(() => {
-                if (!component.elem) {
-                    return Promise.reject(
-                        new Error('.elem property should exist')
-                    );
-                }
-
-                expect(component.fetched).toHaveBeenCalledWith(mockResponse);
-
-                if (component.elem) {
-                    expect(component.elem.innerHTML).toBe('other');
-                }
-            });
-        });
-
-        test('calls all required callbacks, but not error(), if everything works', () => {
-            const component = createComponent({
-                checkAttached: jest.fn(),
-                fetched: jest.fn(),
-                prerender: jest.fn(),
-                ready: jest.fn(),
-                error: jest.fn(),
-            });
-
-            return component.fetch(elem).then(() => {
-                expect(component.ready).toHaveBeenCalledWith(component.elem);
-                expect(component.checkAttached).toHaveBeenCalled();
-                expect(component.prerender).toHaveBeenCalled();
-                expect(component.error).not.toHaveBeenCalled();
-            });
-        });
-
-        test('does not call ready() if destroyed is set to true', () => {
-            const component = createComponent({
-                checkAttached: jest.fn(),
-                destroyed: true,
-                fetched: jest.fn(),
-                prerender: jest.fn(),
-                ready: jest.fn(),
-                error: jest.fn(),
-            });
-
-            return component.fetch(elem).then(() => {
-                expect(component.ready).not.toHaveBeenCalled();
-                expect(component.checkAttached).toHaveBeenCalled();
-                expect(component.prerender).toHaveBeenCalled();
-                expect(component.error).not.toHaveBeenCalled();
-            });
-        });
-
-        test('calls error() if something went wrong', () => {
-            const component = createComponent({
-                ready: jest.fn(),
-                error: jest.fn(),
-            });
-            const mockError = new Error('Bad response');
-
-            fetchJSON.mockReturnValueOnce(Promise.reject(mockError));
-
-            return component.fetch(elem).catch(() => {
-                expect(component.ready).toHaveBeenCalled();
-                expect(component.error).toHaveBeenCalledWith(mockError);
-            });
-        });
-    });
-
-    describe('getClass()', () => {
-        test('should return proper class name with BEM', () => {
-            const component = createComponent({
-                componentClass: 'component',
-                useBem: true,
-            });
-
-            expect(component.getClass('element')).toBe('.component__element');
-            expect(component.getClass('element', true)).toBe(
-                'component__element'
-            );
-        });
-
-        test('should return proper class name without BEM', () => {
-            const component = createComponent({
-                classes: {
-                    element: 'my-element-class',
-                },
-            });
-
-            expect(component.getClass('element')).toBe('.my-element-class');
-            expect(component.getClass('element', true)).toBe(
-                'my-element-class'
-            );
-            expect(component.getClass('element-2')).toBeDefined();
-            expect(component.getClass('element-2', true)).not.toBe('.');
-        });
-    });
-
-    describe('setOptions()', () => {
-        test('extends options', () => {
-            const component = createComponent();
-
-            component.setOptions({
-                a: 1,
-                b: 2,
-            });
-
-            expect(component.options.a).toBe(1);
-            expect(component.options.b).toBe(2);
-        });
-
-        test('extends options with defaultOptions', () => {
-            const component = createComponent({
-                defaultOptions: {
-                    a: 1,
-                    b: 2,
-                },
-            });
-
-            component.setOptions({
-                a: 3,
-            });
-
-            expect(component.options.a).toBe(3);
-            expect(component.options.b).toBe(2);
-        });
-
-        test('extends options with defaultOptions and options', () => {
-            const component = createComponent({
-                defaultOptions: {
-                    a: 1,
-                    b: 2,
-                },
-
-                options: {
-                    a: 2,
-                    c: 5,
-                },
-            });
-
-            component.setOptions({
-                c: 6,
-            });
-
-            expect(component.options.a).toBe(2);
-            expect(component.options.b).toBe(2);
-            expect(component.options.c).toBe(6);
-        });
-    });
-
-    describe('setState(), removeState(), toggleState()', () => {
-        let component;
-
-        beforeEach(() => {
-            component = createComponent({
-                componentClass: 'component',
-            });
-
-            component.attachTo(elem);
-        });
-
-        test('setState() should add class name to elem (without elementName)', () => {
-            component.setState('state');
-
-            if (component.elem) {
-                expect(
-                    component.elem.classList.contains('component--state')
-                ).toBe(true);
-            }
-        });
-
-        test('setState() should add class name to elem (with elementName)', () => {
-            component.setState('state', 'element');
-
-            if (subElem) {
-                expect(
-                    subElem.classList.contains('component__element--state')
-                ).toBe(true);
-            }
-        });
-
-        test('removeState() should remove class name to elem (without elementName)', () => {
-            component.setState('state');
-            component.removeState('state');
-
-            if (component.elem) {
-                expect(
-                    component.elem.classList.contains('component--state')
-                ).toBe(false);
-            }
-        });
-
-        test('removeState() should remove class name to elem (with elementName)', () => {
-            component.setState('state', 'element');
-            component.removeState('state', 'element');
-
-            if (subElem) {
-                expect(
-                    subElem.classList.contains('component__element--state')
-                ).toBe(false);
-            }
-        });
-
-        test('toggleState() should toggle class name to elem (without elementName)', () => {
-            component.toggleState('state');
-
-            if (component.elem) {
-                expect(
-                    component.elem.classList.contains('component--state')
-                ).toBe(true);
-            }
-
-            component.toggleState('state');
-
-            if (component.elem) {
-                expect(
-                    component.elem.classList.contains('component--state')
-                ).toBe(false);
-            }
-        });
-
-        test('toggleState() should toggle class name to elem (with elementName)', () => {
-            component.toggleState('state', 'element');
-
-            if (subElem) {
-                expect(
-                    subElem.classList.contains('component__element--state')
-                ).toBe(true);
-            }
-
-            component.toggleState('state', 'element');
-
-            if (subElem) {
-                expect(
-                    subElem.classList.contains('component__element--state')
-                ).toBe(false);
-            }
-        });
-
-        test('hasState() should return the proper state (without elementName)', () => {
-            component.setState('state');
-            expect(component.hasState('state')).toBe(true);
-            expect(component.hasState('whatever')).toBe(false);
-        });
-
-        test('hasState() should return the proper state (with elementName)', () => {
-            component.setState('state', 'element');
-            expect(component.hasState('state', 'element')).toBe(true);
-            expect(component.hasState('whatever', 'element')).toBe(false);
-        });
-
-        test('hasState() should always return false without componentClass', () => {
-            component.componentClass = '';
-
-            component.setState('state', 'element');
-            expect(component.hasState('state')).toBe(false);
-            expect(component.hasState('state', 'element')).toBe(false);
-        });
-    });
-
-    describe('attachTo()', () => {
-        test('calls ready() callback', () => {
-            const component = createComponent({
-                ready: jest.fn(),
-            });
-
-            if (elem) {
-                component.attachTo(elem);
-                expect(component.ready).toHaveBeenCalled();
-            }
-        });
-
-        test('calls prerender() callback', () => {
-            const component = createComponent({
-                prerender: jest.fn(),
-            });
-
-            if (elem) {
-                component.attachTo(elem);
-                expect(component.prerender).toHaveBeenCalled();
-            }
-        });
-
-        test('calls checkAttached() callback', () => {
-            const component = createComponent({
-                checkAttached: jest.fn(),
-            });
-
-            if (elem) {
-                component.attachTo(elem);
-                expect(component.checkAttached).toHaveBeenCalled();
-            }
-        });
-    });
-
-    describe('destroy()', () => {
-        test('cleans up the instance', () => {
-            const component = createComponent({
-                elem: document.createElement('p'),
-            });
-
-            component.destroy();
-
-            expect(component.elem).not.toBeDefined();
-            expect(component.t).toBe(null);
-            expect(bean.off).toHaveBeenCalledWith(component.elem);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/clue-input.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/clue-input.js
deleted file mode 100644
index df1a89d1984..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/clue-input.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/anagram-helper/clue-input.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component, findDOMNode } from 'preact/compat';
-
-class ClueInput extends Component<*, *> {
-    componentDidMount() {
-        const el: HTMLElement = (findDOMNode(this): any);
-
-        if (el) {
-            el.focus();
-        }
-    }
-
-    componentDidUpdate() {
-        const el: HTMLElement = (findDOMNode(this): any);
-
-        // focus on reset
-        if (this.props.value === '' && el) {
-            el.focus();
-        }
-    }
-
-    onInputChange(e: Event) {
-        if (!(e.target instanceof HTMLInputElement)) {
-            return;
-        }
-        this.props.onChange(e.target.value.toLowerCase());
-    }
-
-    onKeyDown(e: KeyboardEvent) {
-        const el: HTMLElement = (findDOMNode(this): any);
-
-        if (e.keyCode === 13 && el) {
-            el.blur();
-            this.props.onEnter();
-        }
-    }
-
-    render() {
-        return (
-            <input
-                type="text"
-                className="crossword__anagram-helper__clue-input"
-                placeholder="Enter letters"
-                maxLength={this.props.clue.length}
-                value={this.props.value}
-                onChange={this.onInputChange.bind(this)}
-                onKeyDown={this.onKeyDown.bind(this)}
-            />
-        );
-    }
-}
-
-export { ClueInput };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/clue-preview.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/clue-preview.js
deleted file mode 100644
index d7c83691f6f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/clue-preview.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/anagram-helper/clue-preview.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-
-type WordSeparator = ',' | '-';
-
-// Checks a object in the form{",":[4,7]}
-const checkIfLetterHasSeparator = (
-    locations: { [k: WordSeparator]: number[] },
-    letterIndex: number
-): string => {
-    const spaces = locations[','];
-    const letterHasBoundary = (separators: number[]): boolean =>
-        separators.includes(letterIndex);
-
-    if (spaces && letterHasBoundary(spaces)) {
-        return 'crossword__anagram-helper__cell crossword__anagram-helper__cell--with-space';
-    }
-
-    const dashes = locations['-'];
-    if (dashes && letterHasBoundary(dashes)) {
-        return 'crossword__anagram-helper__cell crossword__anagram-helper__cell--with-hyphen';
-    }
-
-    return 'crossword__anagram-helper__cell';
-};
-
-class CluePreview extends Component<*, *> {
-    /**
-     * Get the entries for the preview cells: first filter the user's input to
-     * remove anything anything that's already been entered into the grid.
-     *
-     * With that, we map over the entries, and wherever there's an empty space
-     * we insert one of the shuffled input characters.
-     *
-     * If the user hasn't yet clicked 'shuffle' (this.props.hasShuffled) just
-     * display the entries as they are, preserving any blank spaces.
-     */
-    getEntries(): Object[] {
-        const unsolved = this.props.letters.filter(l => !l.entered);
-
-        return this.props.entries.map(entry => {
-            entry.solved = !!entry.value;
-
-            const returnVal = this.props.hasShuffled
-                ? (entry.value && entry) || unsolved.shift()
-                : entry;
-
-            return Object.assign({}, { key: entry.key }, returnVal);
-        });
-    }
-
-    render() {
-        const entries = this.getEntries();
-
-        return (
-            <div
-                className={`crossword__anagram-helper__clue-preview ${
-                    entries.length >= 9 ? 'long' : ''
-                }`}>
-                <div>
-                    <strong>
-                        {this.props.clue.number}{' '}
-                        <span className="crossword__anagram-helper__direction">
-                            {this.props.clue.direction}
-                        </span>
-                    </strong>{' '}
-                    {this.props.clue.clue}
-                </div>
-                {entries.map((entry: Object, i: number) => {
-                    const classNames = checkIfLetterHasSeparator(
-                        this.props.clue.separatorLocations,
-                        i + 1
-                    ); // Separators are one indexed in CAPI, annoyingly
-
-                    return (
-                        <span
-                            className={
-                                classNames + (entry.solved ? ' has-value' : '')
-                            }
-                            key={entry.key}>
-                            {entry.value || ''}
-                        </span>
-                    );
-                })}
-            </div>
-        );
-    }
-}
-
-export { CluePreview };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/main.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/main.js
deleted file mode 100644
index a59dab7eea0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/main.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/anagram-helper/main.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { markup as closeCentralIcon } from 'svgs/icon/close-central.svg';
-import {
-    cellsForClue,
-    getAnagramClueData,
-} from 'common/modules/crosswords/helpers';
-import shuffle from 'lodash/shuffle';
-import { ClueInput } from './clue-input';
-import { CluePreview } from './clue-preview';
-import { Ring } from './ring';
-
-class AnagramHelper extends Component<*, *> {
-    constructor() {
-        super();
-        this.state = {
-            clueInput: '',
-            showInput: true,
-        };
-    }
-
-    componentWillReceiveProps(next: Object) {
-        // reset on clue change
-        if (next.clue !== this.props.focussedEntry) {
-            this.reset();
-        }
-    }
-
-    onClueInput(text: string) {
-        if (!/\s|\d/g.test(text)) {
-            this.setState({
-                clueInput: text,
-            });
-        }
-    }
-
-    /**
-     * Shuffle the letters in the user's input.
-     *
-     * First, create an array of input characters that have already been entered
-     * into the grid. Then build a new collection of letters, using the first
-     * array to flag letters that are already entered in the puzzle, and
-     * shuffle it.
-     *
-     */
-    // eslint-disable-next-line class-methods-use-this
-    shuffleWord(
-        word: string,
-        entries: { value: string }[]
-    ): Array<{ value: string, entered: boolean }> {
-        const wordEntries = entries
-            .map(entry => entry.value.toLowerCase())
-            .filter(entry => word.includes(entry))
-            .filter(Boolean)
-            .sort();
-
-        return shuffle(
-            word
-                .trim()
-                .split('')
-                .sort()
-                .reduce(
-                    (acc, letter) => {
-                        const [head, ...tail] = acc.entries;
-                        const entered = head === letter.toLowerCase();
-
-                        return {
-                            letters: acc.letters.concat({
-                                value: letter,
-                                entered,
-                            }),
-                            entries: entered ? tail : acc.entries,
-                        };
-                    },
-                    {
-                        letters: [],
-                        entries: wordEntries,
-                    }
-                ).letters
-        );
-    }
-
-    shuffle() {
-        if (this.canShuffle()) {
-            this.setState({
-                showInput: false,
-            });
-        }
-    }
-
-    reset() {
-        if (this.state.clueInput) {
-            this.setState({
-                clueInput: '',
-                showInput: true,
-            });
-        }
-    }
-
-    canShuffle(): boolean {
-        return !!this.state.clueInput && this.state.clueInput.length > 0;
-    }
-
-    render() {
-        const closeIcon = {
-            __html: closeCentralIcon,
-        };
-        const clue = getAnagramClueData(
-            this.props.entries,
-            this.props.focussedEntry
-        );
-        const cells = cellsForClue(
-            this.props.entries,
-            this.props.focussedEntry
-        );
-        const entries = cells.map(coords =>
-            Object.assign({}, this.props.grid[coords.x][coords.y], {
-                key: `${coords.x},${coords.y}`,
-            })
-        );
-
-        const letters = this.shuffleWord(this.state.clueInput, entries);
-
-        const inner = this.state.showInput ? (
-            <ClueInput
-                value={this.state.clueInput}
-                clue={clue}
-                onChange={this.onClueInput.bind(this)}
-                onEnter={this.shuffle.bind(this)}
-            />
-        ) : (
-            <Ring letters={letters} />
-        );
-
-        return (
-            <div
-                className="crossword__anagram-helper-outer"
-                data-link-name="Anagram Helper">
-                <div className="crossword__anagram-helper-inner">{inner}</div>
-                <button
-                    className="button button--large button--tertiary crossword__anagram-helper-close"
-                    onClick={this.props.close.bind(this.props.crossword)}
-                    dangerouslySetInnerHTML={closeIcon}
-                    data-link-name="Close"
-                />
-                <button
-                    className={`button button--large ${
-                        !this.state.clueInput ? 'button--tertiary' : ''
-                    }`}
-                    onClick={this.reset.bind(this)}
-                    data-link-name="Start Again">
-                    start again
-                </button>
-                <button
-                    className={`button button--large ${
-                        this.canShuffle() ? '' : 'button--tertiary'
-                    }`}
-                    onClick={this.shuffle.bind(this)}
-                    data-link-name="Shuffle">
-                    shuffle
-                </button>
-                <CluePreview
-                    clue={clue}
-                    entries={entries}
-                    letters={letters}
-                    hasShuffled={!this.state.showInput}
-                />
-            </div>
-        );
-    }
-}
-
-export { AnagramHelper };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/main.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/main.spec.js
deleted file mode 100644
index 947e6475496..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/main.spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/anagram-helper/main.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import sortBy from 'lodash/sortBy';
-
-import { AnagramHelper } from './main';
-
-jest.mock('react', () => ({
-    Component: function Component() {},
-}));
-
-jest.mock('react-dom', () => ({
-    findDOMNode: () => ({
-        focus: () => {},
-    }),
-}));
-
-const CASES = [
-    {
-        entries: ['', '', '', '', 'l', '', 'e'],
-        word: 'liberal',
-        expected: [
-            { value: 'l', entered: true },
-            { value: 'i', entered: false },
-            { value: 'b', entered: false },
-            { value: 'e', entered: true },
-            { value: 'r', entered: false },
-            { value: 'a', entered: false },
-            { value: 'l', entered: false },
-        ],
-    },
-
-    // when there's an incorrect entry we should still highlight the correct ones
-    {
-        entries: ['s', '', '', '', 'h', '', '', '', '', '', '', ''],
-        word: 'atennistutor',
-        expected: [
-            { value: 'a', entered: false },
-            { value: 't', entered: false },
-            { value: 'e', entered: false },
-            { value: 'n', entered: false },
-            { value: 'n', entered: false },
-            { value: 'i', entered: false },
-            { value: 's', entered: true },
-            { value: 't', entered: false },
-            { value: 'u', entered: false },
-            { value: 't', entered: false },
-            { value: 'o', entered: false },
-            { value: 'r', entered: false },
-        ],
-    },
-];
-
-describe('Anagram Helper', () => {
-    test('marks the correct letters as entered', () => {
-        const sort = x => x.value + x.entered.toString();
-
-        CASES.forEach(testCase => {
-            const entries = testCase.entries.map(e => ({ value: e }));
-            const result = new AnagramHelper().shuffleWord(
-                testCase.word,
-                entries
-            );
-
-            expect(sortBy(result, sort)).toEqual(
-                sortBy(testCase.expected, sort)
-            );
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/ring.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/ring.js
deleted file mode 100644
index da6e8fa9e2c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/anagram-helper/ring.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/anagram-helper/ring.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-
-const round = x => Math.round(x * 100) / 100;
-/**
- * Get coordinates for a letter as percentages.
- *
- * To get the diameter:
- *   (width of .crossword__anagram-helper-shuffler) - (2 * desired padding)
- */
-const getPosition = (
-    angle: number,
-    i: number
-): { left: string, top: string } => {
-    const diameter = 40;
-    const theta = ((angle * Math.PI) / 180) * i;
-
-    return {
-        left: `${diameter + round(diameter * Math.sin(theta))}%`,
-        top: `${diameter + round(diameter * Math.cos(theta))}%`,
-    };
-};
-
-class Ring extends Component<*, *> {
-    render() {
-        const angle = 360 / this.props.letters.length;
-
-        return (
-            <div className="crossword__anagram-helper-shuffler">
-                {this.props.letters.map((letter, i) => (
-                    <div
-                        className={`crossword__anagram-helper-shuffler__letter ${
-                            letter.entered ? 'entered' : ''
-                        }`}
-                        style={getPosition(angle, i)}
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`${letter.value}-${i}`}>
-                        {letter.value}
-                    </div>
-                ))}
-            </div>
-        );
-    }
-}
-
-export { Ring };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/cell.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/cell.js
deleted file mode 100644
index 327a7a62086..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/cell.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/cell.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { gridSize } from 'common/modules/crosswords/helpers';
-import { constants } from 'common/modules/crosswords/constants';
-import { classNames } from 'common/modules/crosswords/classNames';
-
-class Cell extends Component<*, *> {
-    onClick(event: Event) {
-        event.preventDefault();
-        this.props.handleSelect(this.props.x, this.props.y);
-    }
-
-    render() {
-        const top = gridSize(this.props.y);
-        const left = gridSize(this.props.x);
-
-        let cellNumber = null;
-        if (this.props.number !== undefined) {
-            cellNumber = (
-                <text
-                    x={left + 1}
-                    y={top + constants.numberSize}
-                    key="number"
-                    className="crossword__cell-number">
-                    {this.props.number}
-                </text>
-            );
-        }
-
-        let cellValue = null;
-        if (this.props.value !== undefined) {
-            cellValue = (
-                <text
-                    x={left + constants.cellSize * 0.5}
-                    y={top + constants.cellSize * 0.675}
-                    key="entry"
-                    className={classNames({
-                        'crossword__cell-text': true,
-                        'crossword__cell-text--focussed': this.props.isFocussed,
-                        'crossword__cell-text--error': this.props.isError,
-                    })}
-                    textAnchor="middle">
-                    {this.props.value}
-                </text>
-            );
-        }
-
-        return (
-            <g onClick={this.onClick.bind(this)}>
-                <rect
-                    x={left}
-                    y={top}
-                    width={constants.cellSize}
-                    height={constants.cellSize}
-                    className={classNames({
-                        crossword__cell: true,
-                        'crossword__cell--focussed': this.props.isFocussed,
-                        'crossword__cell--highlighted': this.props
-                            .isHighlighted,
-                    })}
-                />
-                {cellNumber}
-                {cellValue}
-            </g>
-        );
-    }
-}
-
-export default Cell;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/classNames.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/classNames.js
deleted file mode 100644
index e2fe512a1c1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/classNames.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/classNames.js
- * to .ts, then delete it.
- */
-
-// @flow
-export const classNames = (props: Object) =>
-    Object.keys(props)
-        .filter(f => props[f] === true)
-        .join(' ');
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/clues.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/clues.js
deleted file mode 100644
index db856c64a4d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/clues.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/clues.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component, findDOMNode } from 'preact/compat';
-import bean from 'bean';
-import fastdom from 'fastdom';
-import { classNames } from 'common/modules/crosswords/classNames';
-import { isBreakpoint } from 'lib/detect';
-import { scrollTo } from 'lib/scroller';
-
-class Clue extends Component<*, *> {
-    onClick() {
-        this.props.setReturnPosition();
-    }
-
-    render() {
-        return (
-            <li>
-                <a
-                    href={`#${this.props.id}`}
-                    onClick={this.onClick.bind(this)}
-                    className={classNames({
-                        crossword__clue: true,
-                        'crossword__clue--answered': this.props.hasAnswered,
-                        'crossword__clue--selected': this.props.isSelected,
-                        'crossword__clue--display-group-order':
-                            JSON.stringify(this.props.number) !==
-                            this.props.humanNumber,
-                    })}>
-                    <div className="crossword__clue__number">
-                        {this.props.humanNumber}
-                    </div>
-                    <div
-                        className="crossword__clue__text"
-                        dangerouslySetInnerHTML={{ __html: this.props.clue }}
-                    />
-                </a>
-            </li>
-        );
-    }
-}
-
-class Clues extends Component<*, *> {
-    constructor(props: Object) {
-        super(props);
-        this.state = {
-            showGradient: true,
-        };
-    }
-
-    componentDidMount() {
-        this.$cluesNode = (findDOMNode(this.clues): any);
-
-        const height =
-            this.$cluesNode.scrollHeight - this.$cluesNode.clientHeight;
-
-        bean.on(this.$cluesNode, 'scroll', e => {
-            const showGradient = height - e.currentTarget.scrollTop > 25;
-
-            if (this.state.showGradient !== showGradient) {
-                this.setState({
-                    showGradient,
-                });
-            }
-        });
-    }
-
-    /**
-     * Scroll clues into view when they're activated (i.e. clicked in the grid)
-     */
-    componentDidUpdate(prev: Object) {
-        if (
-            isBreakpoint({
-                min: 'tablet',
-                max: 'leftCol',
-            }) &&
-            (this.props.focussed &&
-                (!prev.focussed || prev.focussed.id !== this.props.focussed.id))
-        ) {
-            fastdom.measure(() => {
-                this.scrollIntoView(this.props.focussed);
-            });
-        }
-    }
-
-    $cluesNode: HTMLElement;
-
-    scrollIntoView(clue: Object) {
-        const buffer = 100;
-        const node: HTMLElement = (findDOMNode(this[clue.id]): any);
-        const visible =
-            node.offsetTop - buffer > this.$cluesNode.scrollTop &&
-            node.offsetTop + buffer <
-                this.$cluesNode.scrollTop + this.$cluesNode.clientHeight;
-
-        if (!visible) {
-            const offset = node.offsetTop - this.$cluesNode.clientHeight / 2;
-            scrollTo(offset, 250, 'easeOutQuad', this.$cluesNode);
-        }
-    }
-
-    render() {
-        const headerClass = 'crossword__clues-header';
-        const cluesByDirection = direction =>
-            this.props.clues
-                .filter(clue => clue.entry.direction === direction)
-                .map(clue => (
-                    <Clue
-                        ref={clueRef => {
-                            this[clue.entry.id] = clueRef;
-                        }}
-                        id={clue.entry.id}
-                        key={clue.entry.id}
-                        number={clue.entry.number}
-                        humanNumber={clue.entry.humanNumber}
-                        clue={clue.entry.clue}
-                        hasAnswered={clue.hasAnswered}
-                        isSelected={clue.isSelected}
-                        setReturnPosition={() => {
-                            this.props.setReturnPosition(window.scrollY);
-                        }}
-                    />
-                ));
-
-        return (
-            <div
-                className={`crossword__clues--wrapper ${
-                    this.state.showGradient ? '' : 'hide-gradient'
-                }`}>
-                <div
-                    className="crossword__clues"
-                    ref={clues => {
-                        this.clues = clues;
-                    }}>
-                    <div className="crossword__clues--across">
-                        <h3 className={headerClass}>Across</h3>
-                        <ol className="crossword__clues-list">
-                            {cluesByDirection('across')}
-                        </ol>
-                    </div>
-                    <div className="crossword__clues--down">
-                        <h3 className={headerClass}>Down</h3>
-                        <ol className="crossword__clues-list">
-                            {cluesByDirection('down')}
-                        </ol>
-                    </div>
-                </div>
-                <div className="crossword__clues__gradient" />
-            </div>
-        );
-    }
-}
-
-export { Clues };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/comments.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/comments.js
deleted file mode 100644
index c7b3486c331..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/comments.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/comments.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { Loader } from 'common/modules/discussion/loader';
-
-const initCrosswordDiscussion = () => {
-    if (
-        config.get('switches.enableDiscussionSwitch') &&
-        config.get('page.commentable')
-    ) {
-        const el = document.getElementsByClassName('discussion')[0];
-        if (el) {
-            new Loader().attachTo(el);
-        }
-    }
-};
-
-export { initCrosswordDiscussion };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/confirm-button.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/confirm-button.js
deleted file mode 100644
index 37831e025fe..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/confirm-button.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/confirm-button.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { classNames } from 'common/modules/crosswords/classNames';
-
-const timeout = 2000;
-
-class ConfirmButton extends Component<*, *> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            confirming: false,
-        };
-    }
-
-    confirm() {
-        if (this.state.confirming) {
-            this.setState({
-                confirming: false,
-            });
-            this.props.onClick();
-        } else {
-            this.setState({
-                confirming: true,
-            });
-            setTimeout(() => {
-                this.setState({
-                    confirming: false,
-                });
-            }, timeout);
-        }
-    }
-
-    render() {
-        const inner = this.state.confirming
-            ? `Confirm ${this.props.text.toLowerCase()}`
-            : this.props.text;
-
-        const classes = {};
-        const className = classNames(
-            ((classes[
-                'crossword__controls__button--confirm'
-            ] = this.state.confirming),
-            (classes[this.props.className] = true),
-            classes)
-        );
-        const props = {
-            'data-link-name': this.props['data-link-name'],
-            onClick: this.confirm.bind(this),
-            className,
-        };
-
-        return <button {...props}>{inner}</button>;
-    }
-}
-
-export { ConfirmButton };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/constants.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/constants.js
deleted file mode 100644
index 43f83da848e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/constants.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/constants.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-const constants = {
-    cellSize: 31,
-    borderSize: 1,
-    numberSize: 9,
-};
-
-export { constants };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/controls.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/controls.js
deleted file mode 100644
index 3495cc7a081..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/controls.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/controls.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { ConfirmButton } from 'common/modules/crosswords/confirm-button';
-
-const buttonClassName = 'button button--primary';
-const buttonCurrentClassName = 'button--crossword--current';
-const buttonGenericClassName = 'button--secondary';
-
-class Controls extends Component<*, *> {
-    render() {
-        const hasSolutions = this.props.hasSolutions;
-        const hasFocus = this.props.clueInFocus;
-        const controls = {
-            clue: [],
-            grid: [],
-        };
-
-        // GRID CONTROLS
-        controls.grid.unshift(
-            <ConfirmButton
-                className={`${buttonClassName} ${buttonGenericClassName}`}
-                onClick={this.props.crossword.onClearAll.bind(
-                    this.props.crossword
-                )}
-                key="clear"
-                data-link-name="Clear all"
-                text="Clear all"
-            />
-        );
-
-        if (hasSolutions) {
-            controls.grid.unshift(
-                <ConfirmButton
-                    className={`${buttonClassName} ${buttonGenericClassName}`}
-                    onClick={this.props.crossword.onSolution.bind(
-                        this.props.crossword
-                    )}
-                    key="solution"
-                    data-link-name="Reveal all"
-                    text="Reveal all"
-                />
-            );
-            controls.grid.unshift(
-                <ConfirmButton
-                    className={`${buttonClassName} ${buttonGenericClassName}`}
-                    onClick={this.props.crossword.onCheckAll.bind(
-                        this.props.crossword
-                    )}
-                    key="checkAll"
-                    data-link-name="Check all"
-                    text="Check all"
-                />
-            );
-        }
-
-        // HIGHLIGHTED CLUE CONTROLS  - published solution
-        if (hasFocus) {
-            controls.clue.unshift(
-                <button
-                    className={`${buttonClassName} ${buttonCurrentClassName}`}
-                    onClick={this.props.crossword.onClearSingle.bind(
-                        this.props.crossword
-                    )}
-                    key="clear-single"
-                    data-link-name="Clear this">
-                    Clear this
-                </button>
-            );
-
-            // anagram helper
-            controls.clue.push(
-                <button
-                    className={`${buttonClassName} ${buttonCurrentClassName}`}
-                    onClick={this.props.crossword.onToggleAnagramHelper.bind(
-                        this.props.crossword
-                    )}
-                    key="anagram"
-                    data-link-name="Show anagram helper">
-                    Anagram helper
-                </button>
-            );
-
-            if (hasSolutions) {
-                controls.clue.unshift(
-                    <button
-                        className={`${buttonClassName} ${buttonCurrentClassName}`}
-                        onClick={this.props.crossword.onCheat.bind(
-                            this.props.crossword
-                        )}
-                        key="cheat"
-                        data-link-name="Reveal this">
-                        Reveal this
-                    </button>
-                );
-                controls.clue.unshift(
-                    <button
-                        className={`${buttonClassName} ${buttonCurrentClassName}`}
-                        onClick={this.props.crossword.onCheck.bind(
-                            this.props.crossword
-                        )}
-                        key="check"
-                        data-link-name="Check this">
-                        Check this
-                    </button>
-                );
-            }
-        }
-
-        return (
-            <div className="crossword__controls">
-                <div className="crossword__controls__clue">{controls.clue}</div>
-                <div className="crossword__controls__grid">{controls.grid}</div>
-                <div className="crossword__controls_autosave_label">
-                    Crosswords are saved automatically
-                </div>
-            </div>
-        );
-    }
-}
-
-export { Controls };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/crossword.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/crossword.js
deleted file mode 100644
index 8e0a0775219..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/crossword.js
+++ /dev/null
@@ -1,840 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/crossword.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component, findDOMNode } from 'preact/compat';
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import mediator from 'lib/mediator';
-import { isIOS, isBreakpoint } from 'lib/detect';
-import { scrollTo } from 'lib/scroller';
-import { AnagramHelper } from 'common/modules/crosswords/anagram-helper/main';
-import debounce from 'lodash/debounce';
-import zip from 'lodash/zip';
-import { Clues } from 'common/modules/crosswords/clues';
-import { Controls } from 'common/modules/crosswords/controls';
-import { HiddenInput } from 'common/modules/crosswords/hidden-input';
-import { Grid } from 'common/modules/crosswords/grid';
-import {
-    buildClueMap,
-    buildGrid,
-    otherDirection,
-    entryHasCell,
-    cluesFor,
-    mapGrid,
-    getClearableCellsForClue,
-    getLastCellInClue,
-    getPreviousClueInGroup,
-    isFirstCellInClue,
-    getNextClueInGroup,
-    isLastCellInClue,
-    gridSize,
-    checkClueHasBeenAnswered,
-    buildSeparatorMap,
-    cellsForEntry,
-} from 'common/modules/crosswords/helpers';
-import { keycodes } from 'common/modules/crosswords/keycodes';
-import {
-    saveGridState,
-    loadGridState,
-} from 'common/modules/crosswords/persistence';
-import { classNames } from 'common/modules/crosswords/classNames';
-import type { GridProps } from 'common/modules/crosswords/grid';
-
-type CrosswordState = {
-    grid: Array<Array<Cell>>,
-    cellInFocus?: ?Position,
-    directionOfEntry?: ?Direction,
-    showAnagramHelper?: boolean,
-};
-
-class Crossword extends Component<*, CrosswordState> {
-    constructor(props: Object) {
-        super(props);
-        const dimensions = this.props.data.dimensions;
-
-        this.columns = dimensions.cols;
-        this.rows = dimensions.rows;
-        this.clueMap = buildClueMap(this.props.data.entries);
-
-        this.state = {
-            grid: buildGrid(
-                dimensions.rows,
-                dimensions.cols,
-                this.props.data.entries,
-                loadGridState(this.props.data.id)
-            ),
-            cellInFocus: null,
-            directionOfEntry: null,
-            showAnagramHelper: false,
-        };
-    }
-
-    componentDidMount(): void {
-        // Sticky clue
-        const $stickyClueWrapper = $(findDOMNode(this.stickyClueWrapper));
-        const $grid = $(findDOMNode(this.grid));
-        const $game = $(findDOMNode(this.game));
-
-        mediator.on(
-            'window:resize',
-            debounce(this.setGridHeight.bind(this), 200)
-        );
-        mediator.on(
-            'window:orientationchange',
-            debounce(this.setGridHeight.bind(this), 200)
-        );
-        this.setGridHeight();
-
-        mediator.on('window:throttledScroll', () => {
-            const gridOffset = $grid.offset();
-            const gameOffset = $game.offset();
-            const stickyClueWrapperOffset = $stickyClueWrapper.offset();
-            const scrollY = window.scrollY;
-
-            fastdom.mutate(() => {
-                // Clear previous state
-                $stickyClueWrapper
-                    .css('top', '')
-                    .css('bottom', '')
-                    .removeClass('is-fixed');
-
-                const scrollYPastGame = scrollY - gameOffset.top;
-
-                if (scrollYPastGame >= 0) {
-                    const gridOffsetBottom = gridOffset.top + gridOffset.height;
-
-                    if (
-                        scrollY >
-                        gridOffsetBottom - stickyClueWrapperOffset.height
-                    ) {
-                        $stickyClueWrapper.css('top', 'auto').css('bottom', 0);
-                    } else if (isIOS()) {
-                        // iOS doesn't support sticky things when the keyboard
-                        // is open, so we use absolute positioning and
-                        // programatically update the value of top
-                        $stickyClueWrapper.css('top', scrollYPastGame);
-                    } else {
-                        $stickyClueWrapper.addClass('is-fixed');
-                    }
-                }
-            });
-        });
-    }
-
-    componentDidUpdate(prevProps: Object, prevState: Object): void {
-        // return focus to active cell after exiting anagram helper
-        if (
-            !this.state.showAnagramHelper &&
-            this.state.showAnagramHelper !== prevState.showAnagramHelper
-        ) {
-            this.focusCurrentCell();
-        }
-    }
-
-    onKeyDown(event: KeyboardEvent): void {
-        const cell = this.state.cellInFocus;
-
-        if (event.keyCode === keycodes.tab) {
-            event.preventDefault();
-            if (event.shiftKey) {
-                this.focusPreviousClue();
-            } else {
-                this.focusNextClue();
-            }
-        } else if (!event.metaKey && !event.ctrlKey && !event.altKey) {
-            if (
-                event.keyCode === keycodes.backspace ||
-                event.keyCode === keycodes.delete
-            ) {
-                event.preventDefault();
-                if (cell) {
-                    if (this.cellIsEmpty(cell.x, cell.y)) {
-                        this.focusPrevious();
-                    } else {
-                        this.setCellValue(cell.x, cell.y, '');
-                        this.save();
-                    }
-                }
-            } else if (event.keyCode === keycodes.left) {
-                event.preventDefault();
-                this.moveFocus(-1, 0);
-            } else if (event.keyCode === keycodes.up) {
-                event.preventDefault();
-                this.moveFocus(0, -1);
-            } else if (event.keyCode === keycodes.right) {
-                event.preventDefault();
-                this.moveFocus(1, 0);
-            } else if (event.keyCode === keycodes.down) {
-                event.preventDefault();
-                this.moveFocus(0, 1);
-            }
-        }
-    }
-
-    // called when cell is selected (by click or programtically focussed)
-    onSelect(x: number, y: number): void {
-        const cellInFocus = this.state.cellInFocus;
-        const clue = cluesFor(this.clueMap, x, y);
-        const focussedClue = this.clueInFocus();
-        let newDirection;
-
-        const isInsideFocussedClue = (): boolean =>
-            focussedClue ? entryHasCell(focussedClue, x, y) : false;
-
-        if (
-            cellInFocus &&
-            cellInFocus.x === x &&
-            cellInFocus.y === y &&
-            this.state.directionOfEntry
-        ) {
-            /** User has clicked again on the highlighted cell, meaning we ought to swap direction */
-            newDirection = otherDirection(this.state.directionOfEntry);
-
-            if (clue[newDirection]) {
-                this.focusClue(x, y, newDirection);
-            }
-        } else if (isInsideFocussedClue() && this.state.directionOfEntry) {
-            /**
-             * If we've clicked inside the currently highlighted clue, then we ought to just shift the cursor
-             * to the new cell, not change direction or anything funny.
-             */
-
-            this.focusClue(x, y, this.state.directionOfEntry);
-        } else {
-            this.state.cellInFocus = {
-                x,
-                y,
-            };
-
-            const isStartOfClue = (sourceClue): boolean =>
-                !!sourceClue &&
-                sourceClue.position.x === x &&
-                sourceClue.position.y === y;
-
-            /**
-             * If the user clicks on the start of a down clue midway through an across clue, we should
-             * prefer to highlight the down clue.
-             */
-            if (!isStartOfClue(clue.across) && isStartOfClue(clue.down)) {
-                newDirection = 'down';
-            } else if (clue.across) {
-                /** Across is the default focus otherwise */
-                newDirection = 'across';
-            } else {
-                newDirection = 'down';
-            }
-            this.focusClue(x, y, newDirection);
-        }
-    }
-
-    onCheat(): void {
-        this.allHighlightedClues().forEach(clue => this.cheat(clue));
-        this.save();
-    }
-
-    onCheck(): void {
-        // 'Check this' checks single and grouped clues
-        this.allHighlightedClues().forEach(clue => this.check(clue));
-        this.save();
-    }
-
-    onSolution(): void {
-        this.props.data.entries.forEach(clue => this.cheat(clue));
-        this.save();
-    }
-
-    onCheckAll(): void {
-        this.props.data.entries.forEach(clue => this.check(clue));
-        this.save();
-    }
-
-    onClearAll(): void {
-        this.setState({
-            grid: mapGrid(this.state.grid, cell => {
-                cell.value = '';
-                return cell;
-            }),
-        });
-
-        this.save();
-    }
-
-    onClearSingle(): void {
-        const clueInFocus = this.clueInFocus();
-
-        if (clueInFocus) {
-            // Merge arrays of cells from all highlighted clues
-            // const cellsInFocus = _.flatten(_.map(this.allHighlightedClues(), helpers.cellsForEntry, this));
-            const cellsInFocus = getClearableCellsForClue(
-                this.state.grid,
-                this.clueMap,
-                this.props.data.entries,
-                clueInFocus
-            );
-
-            this.setState({
-                grid: mapGrid(this.state.grid, (cell, gridX, gridY) => {
-                    if (
-                        cellsInFocus.some(c => c.x === gridX && c.y === gridY)
-                    ) {
-                        cell.value = '';
-                    }
-                    return cell;
-                }),
-            });
-
-            this.save();
-        }
-    }
-
-    onToggleAnagramHelper(): void {
-        // only show anagram helper if a clue is active
-        if (!this.state.showAnagramHelper) {
-            if (this.clueInFocus()) {
-                this.setState({
-                    showAnagramHelper: true,
-                });
-            }
-        } else {
-            this.setState({
-                showAnagramHelper: false,
-            });
-        }
-    }
-
-    onClickHiddenInput(event: Event): void {
-        const focussed = this.state.cellInFocus;
-
-        if (focussed) {
-            this.onSelect(focussed.x, focussed.y);
-        }
-
-        /* We need to handle touch seperately as touching an input on iPhone does not fire the
-         click event - listen for a touchStart and preventDefault to avoid calling onSelect twice on
-         devices that fire click AND touch events. The click event doesn't fire only when the input is already focused */
-        if (event.type === 'touchstart') {
-            event.preventDefault();
-        }
-    }
-
-    setGridHeight(): void {
-        if (!this.$gridWrapper) {
-            this.$gridWrapper = $(findDOMNode(this.gridWrapper));
-        }
-
-        if (
-            isBreakpoint({
-                max: 'tablet',
-            })
-        ) {
-            fastdom.measure(() => {
-                // Our grid is a square, set the height of the grid wrapper
-                // to the width of the grid wrapper
-                fastdom.mutate(() => {
-                    this.$gridWrapper.css(
-                        'height',
-                        `${this.$gridWrapper.offset().width}px`
-                    );
-                });
-                this.gridHeightIsSet = true;
-            });
-        } else if (this.gridHeightIsSet) {
-            // Remove inline style if tablet and wider
-            this.$gridWrapper.attr('style', '');
-        }
-    }
-
-    setCellValue(x: number, y: number, value: string): void {
-        this.setState({
-            grid: mapGrid(this.state.grid, (cell, gridX, gridY) => {
-                if (gridX === x && gridY === y) {
-                    cell.value = value;
-                    cell.isError = false;
-                }
-
-                return cell;
-            }),
-        });
-    }
-
-    getCellValue(x: number, y: number): string {
-        return this.state.grid[x][y].value;
-    }
-
-    setReturnPosition(position: number): void {
-        this.returnPosition = position;
-    }
-
-    columns: any;
-    rows: any;
-    clueMap: any;
-    $gridWrapper: any;
-    gridHeightIsSet: ?boolean;
-    returnPosition: ?number;
-
-    insertCharacter(character: string): void {
-        const characterUppercase = character.toUpperCase();
-        const cell = this.state.cellInFocus;
-        if (
-            /[A-Za-zÀ-ÿ0-9]/.test(characterUppercase) &&
-            characterUppercase.length === 1 &&
-            cell
-        ) {
-            this.setCellValue(cell.x, cell.y, characterUppercase);
-            this.save();
-            this.focusNext();
-        }
-    }
-
-    cellIsEmpty(x: number, y: number): boolean {
-        return !this.getCellValue(x, y);
-    }
-
-    goToReturnPosition(): void {
-        if (
-            isBreakpoint({
-                max: 'mobile',
-            })
-        ) {
-            if (this.returnPosition) {
-                scrollTo(this.returnPosition, 250, 'easeOutQuad');
-            }
-            this.returnPosition = null;
-        }
-    }
-
-    indexOfClueInFocus(): number {
-        return this.props.data.entries.indexOf(this.clueInFocus());
-    }
-
-    focusPreviousClue(): void {
-        const i = this.indexOfClueInFocus();
-        const entries = this.props.data.entries;
-
-        if (i !== -1) {
-            const newClue = entries[i === 0 ? entries.length - 1 : i - 1];
-            this.focusClue(
-                newClue.position.x,
-                newClue.position.y,
-                newClue.direction
-            );
-        }
-    }
-
-    focusNextClue(): void {
-        const i = this.indexOfClueInFocus();
-        const entries = this.props.data.entries;
-
-        if (i !== -1) {
-            const newClue = entries[i === entries.length - 1 ? 0 : i + 1];
-            this.focusClue(
-                newClue.position.x,
-                newClue.position.y,
-                newClue.direction
-            );
-        }
-    }
-
-    moveFocus(deltaX: number, deltaY: number): void {
-        const cell = this.state.cellInFocus;
-
-        if (!cell) {
-            return;
-        }
-
-        const x = cell.x + deltaX;
-        const y = cell.y + deltaY;
-        let direction: Direction = 'down';
-
-        if (
-            this.state.grid[x] &&
-            this.state.grid[x][y] &&
-            this.state.grid[x][y].isEditable
-        ) {
-            if (deltaY !== 0) {
-                direction = 'down';
-            } else if (deltaX !== 0) {
-                direction = 'across';
-            }
-            this.focusClue(x, y, direction);
-        }
-    }
-
-    isAcross(): boolean {
-        return this.state.directionOfEntry === 'across';
-    }
-
-    focusPrevious(): void {
-        const cell = this.state.cellInFocus;
-        const clue = this.clueInFocus();
-
-        if (cell && clue) {
-            if (isFirstCellInClue(cell, clue)) {
-                const newClue = getPreviousClueInGroup(
-                    this.props.data.entries,
-                    clue
-                );
-                if (newClue) {
-                    const newCell = getLastCellInClue(newClue);
-                    this.focusClue(newCell.x, newCell.y, newClue.direction);
-                }
-            } else if (this.isAcross()) {
-                this.moveFocus(-1, 0);
-            } else {
-                this.moveFocus(0, -1);
-            }
-        }
-    }
-
-    focusNext(): void {
-        const cell = this.state.cellInFocus;
-        const clue = this.clueInFocus();
-
-        if (cell && clue) {
-            if (isLastCellInClue(cell, clue)) {
-                const newClue = getNextClueInGroup(
-                    this.props.data.entries,
-                    clue
-                );
-                if (newClue) {
-                    this.focusClue(
-                        newClue.position.x,
-                        newClue.position.y,
-                        newClue.direction
-                    );
-                }
-            } else if (this.isAcross()) {
-                this.moveFocus(1, 0);
-            } else {
-                this.moveFocus(0, 1);
-            }
-        }
-    }
-
-    asPercentage(x: number, y: number): Object {
-        const width = gridSize(this.columns);
-        const height = gridSize(this.rows);
-
-        return {
-            x: (100 * x) / width,
-            y: (100 * y) / height,
-        };
-    }
-
-    focusHiddenInput(x: number, y: number): void {
-        const wrapper: HTMLElement = (findDOMNode(
-            this.hiddenInputComponent.wrapper
-        ): any);
-        const left = gridSize(x);
-        const top = gridSize(y);
-        const position = this.asPercentage(left, top);
-
-        /** This has to be done before focus to move viewport accordingly */
-        wrapper.style.left = `${position.x}%`;
-        wrapper.style.top = `${position.y}%`;
-
-        const hiddenInputNode: HTMLElement = (findDOMNode(
-            this.hiddenInputComponent.input
-        ): any);
-
-        if (document.activeElement !== hiddenInputNode) {
-            hiddenInputNode.focus();
-        }
-    }
-
-    // Focus corresponding clue for a given cell
-    focusClue(x: number, y: number, direction: Direction): void {
-        const clues = cluesFor(this.clueMap, x, y);
-        const clue = clues[direction];
-
-        if (clues && clue) {
-            this.focusHiddenInput(x, y);
-
-            this.setState({
-                grid: this.state.grid,
-                cellInFocus: {
-                    x,
-                    y,
-                },
-                directionOfEntry: direction,
-            });
-
-            // Side effect
-            window.history.replaceState(
-                undefined,
-                document.title,
-                `#${clue.id}`
-            );
-        }
-    }
-
-    // Focus first cell in given clue
-    focusFirstCellInClue(entry: Object): void {
-        this.focusClue(entry.position.x, entry.position.y, entry.direction);
-    }
-
-    focusCurrentCell(): void {
-        if (this.state.cellInFocus) {
-            this.focusHiddenInput(
-                this.state.cellInFocus.x,
-                this.state.cellInFocus.y
-            );
-        }
-    }
-
-    clueInFocus(): ?Object {
-        if (this.state.cellInFocus) {
-            const cluesForCell = cluesFor(
-                this.clueMap,
-                this.state.cellInFocus.x,
-                this.state.cellInFocus.y
-            );
-
-            if (this.state.directionOfEntry) {
-                return cluesForCell[this.state.directionOfEntry];
-            }
-        }
-        return null;
-    }
-
-    allHighlightedClues(): Array<Object> {
-        return this.props.data.entries.filter(clue =>
-            this.clueIsInFocusGroup(clue)
-        );
-    }
-
-    clueIsInFocusGroup(clue: Object): boolean {
-        if (this.state.cellInFocus) {
-            const cluesForCell = cluesFor(
-                this.clueMap,
-                this.state.cellInFocus.x,
-                this.state.cellInFocus.y
-            );
-
-            if (
-                this.state.directionOfEntry &&
-                cluesForCell[this.state.directionOfEntry]
-            ) {
-                return cluesForCell[this.state.directionOfEntry].group.includes(
-                    clue.id
-                );
-            }
-        }
-        return false;
-    }
-
-    cluesData(): Array<Object> {
-        return this.props.data.entries.map(entry => {
-            const hasAnswered = checkClueHasBeenAnswered(
-                this.state.grid,
-                entry
-            );
-            return {
-                entry,
-                hasAnswered,
-                isSelected: this.clueIsInFocusGroup(entry),
-            };
-        });
-    }
-
-    save(): void {
-        saveGridState(this.props.data.id, this.state.grid);
-    }
-
-    cheat(entry: Object): void {
-        const cells = cellsForEntry(entry);
-
-        if (entry.solution) {
-            this.setState({
-                grid: mapGrid(this.state.grid, (cell, x, y) => {
-                    if (cells.some(c => c.x === x && c.y === y)) {
-                        const n =
-                            entry.direction === 'across'
-                                ? x - entry.position.x
-                                : y - entry.position.y;
-
-                        cell.value = entry.solution[n];
-                    }
-
-                    return cell;
-                }),
-            });
-        }
-    }
-
-    check(entry: Object): void {
-        const cells = cellsForEntry(entry);
-
-        if (entry.solution) {
-            const badCells = zip(cells, entry.solution.split(''))
-                .filter(cellAndSolution => {
-                    const coords = cellAndSolution[0];
-                    const cell = this.state.grid[coords.x][coords.y];
-                    const solution = cellAndSolution[1];
-                    return (
-                        /^[A-Z]$/.test(cell.value) && cell.value !== solution
-                    );
-                })
-                .map(cellAndSolution => cellAndSolution[0]);
-
-            this.setState({
-                grid: mapGrid(this.state.grid, (cell, gridX, gridY) => {
-                    if (
-                        badCells.some(bad => bad.x === gridX && bad.y === gridY)
-                    ) {
-                        cell.isError = true;
-                        cell.value = '';
-                    }
-
-                    return cell;
-                }),
-            });
-
-            setTimeout(() => {
-                this.setState({
-                    grid: mapGrid(this.state.grid, (cell, gridX, gridY) => {
-                        if (
-                            badCells.some(
-                                bad => bad.x === gridX && bad.y === gridY
-                            )
-                        ) {
-                            cell.isError = false;
-                            cell.value = '';
-                        }
-
-                        return cell;
-                    }),
-                });
-            }, 150);
-        }
-    }
-
-    hiddenInputValue(): string {
-        const cell = this.state.cellInFocus;
-
-        let currentValue;
-
-        if (cell) {
-            currentValue = this.state.grid[cell.x][cell.y].value;
-        }
-
-        return currentValue || '';
-    }
-
-    hasSolutions(): boolean {
-        return 'solution' in this.props.data.entries[0];
-    }
-
-    isHighlighted(x: number, y: number): boolean {
-        const focused = this.clueInFocus();
-        return focused
-            ? focused.group.some(id => {
-                  const entry = this.props.data.entries.find(e => e.id === id);
-                  return entryHasCell(entry, x, y);
-              })
-            : false;
-    }
-
-    render(): React$Node {
-        const focused = this.clueInFocus();
-
-        const anagramHelper = this.state.showAnagramHelper && (
-            <AnagramHelper
-                crossword={this}
-                focussedEntry={focused}
-                entries={this.props.data.entries}
-                grid={this.state.grid}
-                close={this.onToggleAnagramHelper}
-            />
-        );
-
-        const gridProps: GridProps = {
-            rows: this.rows,
-            columns: this.columns,
-            cells: this.state.grid,
-            separators: buildSeparatorMap(this.props.data.entries),
-            crossword: this,
-            focussedCell: this.state.cellInFocus,
-            ref: grid => {
-                this.grid = grid;
-            },
-        };
-
-        return (
-            <div
-                className={`crossword__container crossword__container--${
-                    this.props.data.crosswordType
-                } crossword__container--react`}
-                data-link-name="Crosswords">
-                <div
-                    className="crossword__container__game"
-                    ref={game => {
-                        this.game = game;
-                    }}>
-                    <div
-                        className="crossword__sticky-clue-wrapper"
-                        ref={stickyClueWrapper => {
-                            this.stickyClueWrapper = stickyClueWrapper;
-                        }}>
-                        <div
-                            className={classNames({
-                                'crossword__sticky-clue': true,
-                                'is-hidden': !focused,
-                            })}>
-                            {focused && (
-                                <div className="crossword__sticky-clue__inner">
-                                    <div className="crossword__sticky-clue__inner__inner">
-                                        <strong>
-                                            {focused.number}{' '}
-                                            <span className="crossword__sticky-clue__direction">
-                                                {focused.direction}
-                                            </span>
-                                        </strong>{' '}
-                                        {focused.clue}
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                    <div
-                        className="crossword__container__grid-wrapper"
-                        ref={gridWrapper => {
-                            this.gridWrapper = gridWrapper;
-                        }}>
-                        {Grid(gridProps)}
-                        <HiddenInput
-                            crossword={this}
-                            value={this.hiddenInputValue()}
-                            ref={hiddenInputComponent => {
-                                this.hiddenInputComponent = hiddenInputComponent;
-                            }}
-                        />
-                        {anagramHelper}
-                    </div>
-                </div>
-                <Controls
-                    hasSolutions={this.hasSolutions()}
-                    clueInFocus={focused}
-                    crossword={this}
-                />
-                <Clues
-                    clues={this.cluesData()}
-                    focussed={focused}
-                    setReturnPosition={this.setReturnPosition.bind(this)}
-                />
-            </div>
-        );
-    }
-}
-
-export default Crossword;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/grid.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/grid.js
deleted file mode 100644
index 1109931db99..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/grid.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/grid.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import { gridSize, clueMapKey } from 'common/modules/crosswords/helpers';
-import { constants } from 'common/modules/crosswords/constants';
-import GridCell from 'common/modules/crosswords/cell';
-import { classNames } from 'common/modules/crosswords/classNames';
-import type Crossword from 'common/modules/crosswords/crossword';
-
-export type GridProps = {
-    rows: number,
-    columns: number,
-    cells: Array<Array<Cell>>,
-    separators: SeparatorMap,
-    crossword: Crossword,
-    focussedCell: ?Position,
-};
-
-// Position at end of previous cell
-const createWordSeparator = (
-    x: number,
-    y: number,
-    direction: Direction
-): ?React$Node => {
-    const top = gridSize(y);
-    const left = gridSize(x);
-    const borderWidth = 1;
-
-    if (direction === 'across') {
-        const width = 1;
-        return (
-            <rect
-                x={left - borderWidth - width}
-                y={top}
-                key={['sep', direction, x, y].join('_')}
-                width={width}
-                height={constants.cellSize}
-            />
-        );
-    } else if (direction === 'down') {
-        const height = 1;
-        return (
-            <rect
-                x={left}
-                y={top - borderWidth - height}
-                key={['sep', direction, x, y].join('_')}
-                width={constants.cellSize}
-                height={height}
-            />
-        );
-    }
-};
-
-// Position in-between this and previous cells
-const createHyphenSeparator = (
-    x: number,
-    y: number,
-    direction: Direction
-): ?React$Node => {
-    const top = gridSize(y);
-    const left = gridSize(x);
-    const borderWidth = 1;
-    let width;
-    let height;
-
-    if (direction === 'across') {
-        width = constants.cellSize / 4;
-        height = 1;
-        return (
-            <rect
-                x={left - borderWidth / 2 - width / 2}
-                y={top + constants.cellSize / 2 + height / 2}
-                key={['sep', direction, x, y].join('_')}
-                width={width}
-                height={height}
-            />
-        );
-    } else if (direction === 'down') {
-        width = 1;
-        height = constants.cellSize / 4;
-        return (
-            <rect
-                x={left + constants.cellSize / 2 + width / 2}
-                y={top - borderWidth / 2 - height / 2}
-                key={['sep', direction, x, y].join('_')}
-                width={width}
-                height={height}
-            />
-        );
-    }
-};
-
-const createSeparator = (
-    x: number,
-    y: number,
-    separatorDescription: ?SeparatorDescription
-): ?React$Node => {
-    if (separatorDescription) {
-        if (separatorDescription.separator === ',') {
-            return createWordSeparator(x, y, separatorDescription.direction);
-        } else if (separatorDescription.separator === '-') {
-            return createHyphenSeparator(x, y, separatorDescription.direction);
-        }
-    }
-};
-
-export const Grid = (props: GridProps): React$Node => {
-    const getSeparators = (x: number, y: number): ?SeparatorDescription =>
-        props.separators[clueMapKey(x, y)];
-
-    const handleSelect = (x: number, y: number): void =>
-        props.crossword.onSelect(x, y);
-
-    const width = gridSize(props.columns);
-    const height = gridSize(props.rows);
-    const cells = [];
-    let separators = [];
-
-    const range = n => Array.from({ length: n }, (value, key) => key);
-
-    // This is needed to appease ESLint (https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md#false-positives-sfc)
-    const cellsIn = props.cells;
-
-    range(props.rows).forEach(y =>
-        range(props.columns).forEach(x => {
-            const cellProps = cellsIn[x][y];
-
-            if (cellProps.isEditable) {
-                const isHighlighted = props.crossword.isHighlighted(x, y);
-                cells.push(
-                    <GridCell
-                        {...Object.assign(
-                            {},
-                            cellProps,
-                            {
-                                handleSelect,
-                                x,
-                                y,
-                                key: `cell_${x}_${y}`,
-                                isHighlighted,
-                                isFocussed:
-                                    props.focussedCell &&
-                                    x === props.focussedCell.x &&
-                                    y === props.focussedCell.y,
-                            },
-                            this
-                        )}
-                    />
-                );
-
-                separators = separators.concat(
-                    createSeparator(x, y, getSeparators(x, y))
-                );
-            }
-        })
-    );
-
-    return (
-        <svg
-            viewBox={`0 0 ${width} ${height}`}
-            className={classNames({
-                crossword__grid: true,
-                'crossword__grid--focussed': !!props.focussedCell,
-            })}>
-            <rect
-                x={0}
-                y={0}
-                width={width}
-                height={height}
-                className="crossword__grid-background"
-            />
-            {cells}
-            <g className="crossword__grid__separators">{separators}</g>
-        </svg>
-    );
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/helpers.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/helpers.js
deleted file mode 100644
index c1bccf8ff3d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/helpers.js
+++ /dev/null
@@ -1,363 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/helpers.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { constants } from 'common/modules/crosswords/constants';
-import flattenDeep from 'lodash/flattenDeep';
-import range from 'lodash/range';
-import uniqBy from 'lodash/uniqBy';
-
-const isAcross = (clue: Clue): boolean => clue.direction === 'across';
-
-const getLastCellInClue = (clue: Clue): Position => {
-    const ax = {
-        true: 'x',
-        false: 'y',
-    };
-    const axis: Axis = ax[String(isAcross(clue))];
-    const otherAxis: Axis = ax[String(!isAcross(clue))];
-    const cell: Position = {
-        [axis]: clue.position[axis] + (clue.length - 1),
-        [otherAxis]: clue.position[otherAxis],
-    };
-
-    return cell;
-};
-
-const isFirstCellInClue = (cell: Position, clue: Clue): boolean => {
-    const axis = isAcross(clue) ? 'x' : 'y';
-
-    return cell[axis] === clue.position[axis];
-};
-
-const isLastCellInClue = (cell: Position, clue: Clue): boolean => {
-    const axis = isAcross(clue) ? 'x' : 'y';
-
-    return cell[axis] === clue.position[axis] + (clue.length - 1);
-};
-
-const getNextClueInGroup = (entries: Array<Clue>, clue: Clue): ?Clue => {
-    const newClueId =
-        clue.group[clue.group.findIndex(id => id === clue.id) + 1];
-
-    return entries.find(entry => entry.id === newClueId);
-};
-
-const getPreviousClueInGroup = (entries: Array<Clue>, clue: Clue): ?Clue => {
-    const newClueId =
-        clue.group[clue.group.findIndex(id => id === clue.id) - 1];
-
-    return entries.find(entry => entry.id === newClueId);
-};
-
-const getGroupEntriesForClue = (
-    entries: Array<Clue>,
-    group: Array<string>
-): Array<Clue> =>
-    group.reduce((acc, clueId) => {
-        const entry = entries.find(e => e.id === clueId);
-
-        if (entry) {
-            acc.push(entry);
-        }
-
-        return acc;
-    }, []);
-
-const clueIsInGroup = (clue: Clue): boolean => clue.group.length !== 1;
-
-const getAllSeparatorsForGroup = (clues: Array<Clue>): SeparatorLocations => {
-    const k = {};
-
-    [',', '-'].forEach(separator => {
-        let cnt = 0;
-        const flattenedSeparators = flattenDeep(
-            clues.map(clue => {
-                const separatorLocations =
-                    clue.separatorLocations[separator] || [];
-                const seps = separatorLocations.map(s => s + cnt);
-
-                cnt += clue.length;
-
-                return seps;
-            })
-        );
-        k[separator] = flattenedSeparators;
-    });
-
-    return k;
-};
-
-const getClueForGroupedEntries = (clueGroup: Array<Clue>): string =>
-    clueGroup[0].clue;
-
-const getNumbersForGroupedEntries = (clueGroup: Array<Clue>): number | string =>
-    clueGroup[0].humanNumber;
-
-const getTtotalLengthOfGroup = (clueGroup: Array<Clue>): number =>
-    clueGroup.reduce((total, clue) => total + clue.length, 0);
-
-const getAnagramClueData = (
-    entries: Array<Clue>,
-    clue: Clue
-): Clue | GroupClue => {
-    if (clueIsInGroup(clue)) {
-        const groupEnts = getGroupEntriesForClue(entries, clue.group);
-        const groupClue: GroupClue = {
-            id: clue.id,
-            number: getNumbersForGroupedEntries(groupEnts),
-            length: getTtotalLengthOfGroup(groupEnts),
-            separatorLocations: getAllSeparatorsForGroup(groupEnts),
-            direction: '',
-            clue: getClueForGroupedEntries(groupEnts),
-        };
-
-        return groupClue;
-    }
-
-    return clue;
-};
-
-const cluesAreInGroup = (clue: Clue, otherClue: Clue): boolean =>
-    otherClue.group.includes(clue.id);
-
-const cellsForEntry = (entry: Clue): Array<Position> =>
-    isAcross(entry)
-        ? range(entry.position.x, entry.position.x + entry.length).map(x => ({
-              x,
-              y: entry.position.y,
-          }))
-        : range(entry.position.y, entry.position.y + entry.length).map(y => ({
-              x: entry.position.x,
-              y,
-          }));
-
-const checkClueHasBeenAnswered = (grid: Grid, entry: Clue): boolean =>
-    cellsForEntry(entry).every(position =>
-        /^.$/.test(grid[position.x][position.y].value)
-    );
-
-const otherDirection = (direction: Direction): Direction =>
-    direction === 'across' ? 'down' : 'across';
-
-const cellsForClue = (entries: Array<Clue>, clue: Clue): Array<Position> => {
-    if (clueIsInGroup(clue)) {
-        const entriesForClue = getGroupEntriesForClue(entries, clue.group);
-
-        return flattenDeep(entriesForClue.map(entry => cellsForEntry(entry)));
-    }
-
-    return cellsForEntry(clue);
-};
-
-/** Hash key for the cell at x, y in the clue map */
-const clueMapKey = (x: number, y: number): string => `${x}_${y}`;
-
-const cluesFor = (clueMap: ClueMap, x: number, y: number): CluesIntersect =>
-    clueMap[clueMapKey(x, y)];
-
-const getClearableCellsForEntry = (
-    grid: Grid,
-    clueMap: ClueMap,
-    entries: Array<Clue>,
-    entry: Clue
-): Array<Position> => {
-    const direction = otherDirection(entry.direction);
-
-    return cellsForEntry(entry).filter(cell => {
-        const clues = cluesFor(clueMap, cell.x, cell.y);
-        const otherClue = clues[direction];
-
-        if (otherClue) {
-            return (
-                cluesAreInGroup(entry, otherClue) ||
-                !checkClueHasBeenAnswered(grid, otherClue)
-            );
-        }
-
-        return true;
-    });
-};
-
-const getClearableCellsForClue = (
-    grid: Grid,
-    clueMap: ClueMap,
-    entries: Array<Clue>,
-    clue: Clue
-): Array<Position> => {
-    if (clueIsInGroup(clue)) {
-        const entriesForClue = getGroupEntriesForClue(entries, clue.group);
-        return uniqBy(
-            flattenDeep(
-                entriesForClue.map(entry =>
-                    getClearableCellsForEntry(grid, clueMap, entries, entry)
-                )
-            ),
-            cell => [cell.x, cell.y].join()
-        );
-    }
-    return getClearableCellsForEntry(grid, clueMap, entries, clue);
-};
-
-/**
- * Builds the initial state of the grid given the number of rows, columns, and a list of clues.
- */
-const buildGrid = (
-    rows: number,
-    columns: number,
-    entries: Array<Clue>,
-    savedState: Array<Array<string>>
-): Grid => {
-    const grid = range(columns).map(x =>
-        range(rows).map(y => ({
-            isHighlighted: false,
-            isEditable: false,
-            isError: false,
-            isAnimating: false,
-            value:
-                savedState && savedState[x] && savedState[x][y]
-                    ? savedState[x][y]
-                    : '',
-        }))
-    );
-
-    entries.forEach(entry => {
-        const { x, y } = entry.position;
-
-        grid[x][y].number = entry.number;
-
-        cellsForEntry(entry).forEach(cell => {
-            grid[cell.x][cell.y].isEditable = true;
-        });
-    });
-
-    // $FlowFixMe
-    return grid;
-};
-
-/** A map for looking up clues that a given cell relates to */
-const buildClueMap = (clues: Array<Clue>): ClueMap => {
-    const map = {};
-
-    clues.forEach(clue => {
-        cellsForEntry(clue).forEach(cell => {
-            const key = clueMapKey(cell.x, cell.y);
-
-            if (map[key] === undefined) {
-                map[key] = {};
-            }
-
-            if (isAcross(clue)) {
-                map[key].across = clue;
-            } else {
-                map[key].down = clue;
-            }
-        });
-    });
-
-    return map;
-};
-
-/** A map for looking up separators (i.e word or hyphen) that a given cell relates to */
-const buildSeparatorMap = (clues: Array<Clue>): SeparatorMap => {
-    const flattenReducer = (acc: Array<any>, curr: any): Array<any> => {
-        let flattened = curr;
-
-        if (Array.isArray(flattened) && flattened.length) {
-            flattened = flattened.reduce(flattenReducer, []);
-        }
-
-        return acc.concat(flattened);
-    };
-
-    return clues
-        .map(clue =>
-            Object.keys(clue.separatorLocations).map(separatorStr => {
-                const separator: Separator = (separatorStr: any);
-                const locations = clue.separatorLocations[separator];
-
-                return locations.map(location => {
-                    const key = isAcross(clue)
-                        ? clueMapKey(
-                              clue.position.x + location,
-                              clue.position.y
-                          )
-                        : clueMapKey(
-                              clue.position.x,
-                              clue.position.y + location
-                          );
-
-                    return {
-                        key,
-                        direction: clue.direction,
-                        separator,
-                    };
-                });
-            })
-        )
-        .reduce(flattenReducer, [])
-        .reduce((map, d) => {
-            if (!d) {
-                return map;
-            }
-
-            if (map[d.key] === undefined) {
-                map[d.key] = {};
-            }
-
-            map[d.key] = d;
-
-            return map;
-        }, {});
-};
-
-const entryHasCell = (entry: Clue, x: number, y: number): boolean =>
-    cellsForEntry(entry).some(cell => cell.x === x && cell.y === y);
-
-/** Can be used for width or height, as the cell height == cell width */
-const gridSize = (cells: number): number =>
-    cells * (constants.cellSize + constants.borderSize) + constants.borderSize;
-
-const mapGrid = (
-    grid: Grid,
-    f: (cell: Cell, gridX: number, gridY: number) => Cell
-): Grid => grid.map((col, x) => col.map((cell, y) => f(cell, x, y)));
-
-export {
-    isAcross,
-    otherDirection,
-    buildGrid,
-    clueMapKey,
-    cluesFor,
-    buildClueMap,
-    buildSeparatorMap,
-    cellsForEntry,
-    cellsForClue,
-    entryHasCell,
-    gridSize,
-    mapGrid,
-    getAnagramClueData,
-    getLastCellInClue,
-    isFirstCellInClue,
-    isLastCellInClue,
-    getNextClueInGroup,
-    getPreviousClueInGroup,
-    clueIsInGroup,
-    getGroupEntriesForClue,
-    getNumbersForGroupedEntries,
-    getClueForGroupedEntries,
-    getAllSeparatorsForGroup,
-    getTtotalLengthOfGroup,
-    cluesAreInGroup,
-    checkClueHasBeenAnswered,
-    getClearableCellsForClue,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/helpers.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/helpers.spec.js
deleted file mode 100644
index 4d567fbec2a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/helpers.spec.js
+++ /dev/null
@@ -1,1037 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/helpers.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {
-    isAcross,
-    otherDirection,
-    buildGrid,
-    clueMapKey,
-    buildClueMap,
-    cellsForEntry,
-    cellsForClue,
-    entryHasCell,
-    getAnagramClueData,
-    clueIsInGroup,
-    getGroupEntriesForClue,
-    getNumbersForGroupedEntries,
-    getClueForGroupedEntries,
-    getAllSeparatorsForGroup,
-    getTtotalLengthOfGroup,
-    cluesAreInGroup,
-    checkClueHasBeenAnswered,
-    getClearableCellsForClue,
-} from 'common/modules/crosswords/helpers';
-
-const stubCellWithValue = (value: string): Cell => ({
-    number: 1,
-    isHighlighted: false,
-    isEditable: false,
-    isError: false,
-    isAnimating: false,
-    value,
-});
-
-const stubClue = (options: Object): Clue =>
-    Object.assign(
-        {
-            id: '',
-            number: '',
-            humanNumber: '',
-            group: [],
-            clue: '',
-            position: {},
-            separatorLocations: {},
-            direction: 'across',
-            length: 0,
-            solution: '',
-        },
-        options
-    );
-
-const entryFixture = stubClue({
-    id: '',
-    group: ['2-across'],
-    position: {
-        x: 2,
-        y: 3,
-    },
-    direction: 'across',
-    length: 2,
-    number: 15,
-    solution: 'IT',
-});
-
-const entriesFixture = [
-    {
-        id: '7-across',
-        humanNumber: 7,
-        direction: 'across',
-        length: 7,
-        clue: '12 across in curried food business (7)',
-        group: ['7-across'],
-        position: { x: 0, y: 1 },
-        separatorLocations: {},
-    },
-    {
-        id: '8-across',
-        humanNumber: 8,
-        direction: 'across',
-        length: 7,
-        clue: 'Lionel, a hot favourite at Christmas? (7)',
-        group: ['8-across'],
-        position: { x: 8, y: 1 },
-        separatorLocations: {},
-    },
-    {
-        id: '10-across',
-        humanNumber: 10,
-        direction: 'across',
-        length: 9,
-        clue: 'See 2',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 5, y: 3 },
-        separatorLocations: { ',': [3, 9] },
-    },
-    {
-        id: '21-across',
-        humanNumber: 21,
-        direction: 'across',
-        length: 9,
-        clue: 'See 2',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 1, y: 11 },
-        separatorLocations: { ',': [4, 7] },
-    },
-    {
-        id: '2-down',
-        humanNumber: '2,10,23,21across',
-        direction: 'down',
-        length: 8,
-        clue:
-            'Excuse me? Did some old people at any time cause our ruin? Thats a funny revolutionary line (4,4,3,6,4,4,3,2)',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 3, y: 0 },
-        separatorLocations: { ',': [4, 8] },
-    },
-    {
-        id: '21-down',
-        humanNumber: 21,
-        direction: 'down',
-        length: 4,
-        clue: 'Patsys English, looked down on by Irish party (4)',
-        group: ['21-down'],
-        position: { x: 1, y: 11 },
-        separatorLocations: {},
-    },
-    {
-        id: '23-down',
-        humanNumber: 23,
-        direction: 'down',
-        length: 4,
-        clue: 'See 2',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 13, y: 11 },
-        separatorLocations: { ',': [4] },
-    },
-].map(stubClue);
-
-const groupFixture = [
-    {
-        id: '2-down',
-        humanNumber: '2,10,23,21across',
-        direction: 'down',
-        length: 8,
-        clue:
-            'Excuse me? Did some old people at any time cause our ruin? Thats a funny revolutionary line (4,4,3,6,4,4,3,2)',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 3, y: 0 },
-        separatorLocations: { ',': [4, 8] },
-    },
-    {
-        id: '10-across',
-        humanNumber: 10,
-        direction: 'across',
-        length: 9,
-        clue: 'See 2',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 5, y: 3 },
-        separatorLocations: { ',': [3, 9] },
-    },
-    {
-        id: '23-down',
-        humanNumber: 23,
-        direction: 'down',
-        length: 4,
-        clue: 'See 2',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 13, y: 11 },
-        separatorLocations: { ',': [4] },
-    },
-    {
-        id: '21-across',
-        humanNumber: 21,
-        direction: 'across',
-        length: 9,
-        clue: 'See 2',
-        group: ['2-down', '10-across', '23-down', '21-across'],
-        position: { x: 1, y: 11 },
-        separatorLocations: { ',': [4, 7] },
-    },
-].map(stubClue);
-
-describe('Helpers', () => {
-    describe('isAcross', () => {
-        it('should be true for a clue that is "across"', () => {
-            expect(
-                isAcross(
-                    stubClue({
-                        direction: 'across',
-                    })
-                )
-            ).toBe(true);
-        });
-
-        describe('otherDirection', () => {
-            it('should be "across" for "down"', () => {
-                expect(otherDirection('down')).toBe('across');
-            });
-
-            it('should be "down" for "across"', () => {
-                expect(otherDirection('across')).toBe('down');
-            });
-        });
-
-        describe('buildGrid', () => {
-            it('should build a grid with the correct number of rows', () => {
-                expect(
-                    buildGrid(5, 6, [], []).every(({ length }) => length === 5)
-                ).toBe(true);
-            });
-
-            it('should build a grid with the correct number of columns', () => {
-                expect(buildGrid(5, 6, [], []).length).toBe(6);
-            });
-
-            it('should set entries to not editable by default', () => {
-                const grid = buildGrid(5, 6, [], []);
-
-                expect(
-                    grid.every(column =>
-                        column.every(({ isEditable }) => isEditable === false)
-                    )
-                ).toBe(true);
-            });
-
-            it('should make cells that belong to an entry editable', () => {
-                const grid = buildGrid(5, 5, [entryFixture], []);
-
-                expect(grid[2][3].isEditable).toBe(true);
-                expect(grid[3][3].isEditable).toBe(true);
-            });
-
-            it('should set the cell number from an entry', () => {
-                const grid = buildGrid(5, 5, [entryFixture], []);
-
-                expect(grid[2][3].number).toBe(15);
-            });
-
-            it('should set values from the state', () => {
-                const grid = buildGrid(
-                    5,
-                    5,
-                    [entryFixture],
-                    [
-                        ['', '', '', '', ''],
-                        ['', '', '', '', ''],
-                        ['', '', '', 'W', ''],
-                        ['', '', '', '', ''],
-                        ['', '', '', '', ''],
-                    ]
-                );
-
-                expect(grid[2][3].value).toBe('W');
-            });
-        });
-
-        describe('clueMapKey', () => {
-            it('should join the values with an underscore', () => {
-                expect(clueMapKey(4, 15)).toBe('4_15');
-            });
-        });
-
-        describe('buildClueMap', () => {
-            it('should return a map from cells to entries', () => {
-                const clueMap = buildClueMap([entryFixture]);
-
-                expect(clueMap[clueMapKey(2, 3)].across).toBe(entryFixture);
-                expect(clueMap[clueMapKey(3, 3)].across).toBe(entryFixture);
-            });
-        });
-
-        describe('cellsForEntry', () => {
-            it('should return all cells belonging to the entry', () => {
-                const cells = cellsForEntry(entryFixture);
-
-                expect(cells.length).toBe(2);
-
-                const firstCell = cells[0];
-
-                expect(firstCell.x).toBe(2);
-                expect(firstCell.y).toBe(3);
-
-                const secondCell = cells[1];
-
-                expect(secondCell.x).toBe(3);
-                expect(secondCell.y).toBe(3);
-            });
-        });
-
-        describe('entryHasCell', () => {
-            it('should return true for a cell belonging to the entry', () => {
-                expect(entryHasCell(entryFixture, 3, 3)).toBe(true);
-            });
-
-            it('should return false for a cell that does not belong to the entry', () => {
-                expect(entryHasCell(entryFixture, 3, 4)).toBe(false);
-            });
-        });
-    });
-
-    describe('cellsForEntry', () => {
-        it('should return all cells belonging to the entry', () => {
-            const cells = cellsForEntry(entryFixture);
-
-            expect(cells.length).toBe(2);
-
-            const firstCell = cells[0];
-
-            expect(firstCell.x).toBe(2);
-            expect(firstCell.y).toBe(3);
-
-            const secondCell = cells[1];
-
-            expect(secondCell.x).toBe(3);
-            expect(secondCell.y).toBe(3);
-        });
-    });
-
-    describe('entryHasCell', () => {
-        it('should return true for a cell belonging to the entry', () => {
-            expect(entryHasCell(entryFixture, 3, 3)).toBe(true);
-        });
-
-        it('should return false for a cell that does not belong to the entry', () => {
-            expect(entryHasCell(entryFixture, 3, 4)).toBe(false);
-        });
-    });
-
-    describe('clueIsInGroup', () => {
-        it('should return false for a entry with a single entry in the group attribute', () => {
-            expect(clueIsInGroup(entryFixture)).toBe(false);
-        });
-
-        it('should return true for a entry with multiple entries in the group attribute', () => {
-            const entryFixtureWithGroup = stubClue({
-                group: ['2-across', '15 accross'],
-                position: {
-                    x: 2,
-                    y: 3,
-                },
-                direction: 'across',
-                length: 2,
-                number: 2,
-            });
-            expect(clueIsInGroup(entryFixtureWithGroup)).toBe(true);
-        });
-    });
-
-    describe('getAnagramClueData', () => {
-        it('should return the clue for a non grouped clue', () => {
-            expect(getAnagramClueData(entriesFixture, entryFixture)).toEqual(
-                entryFixture
-            );
-        });
-
-        it('should return the correct data when the clue is part of a group', () => {
-            const expectedData = {
-                id: '10-across',
-                number: '2,10,23,21across',
-                length: 30,
-                separatorLocations: {
-                    ',': [4, 8, 11, 17, 21, 25, 28],
-                    '-': [],
-                },
-                direction: '',
-                clue:
-                    'Excuse me? Did some old people at any time cause our ruin? Thats a funny revolutionary line (4,4,3,6,4,4,3,2)',
-            };
-            const clue = stubClue({
-                id: '10-across',
-                humanNumber: 10,
-                length: 9,
-                clue: 'See 2',
-                group: ['2-down', '10-across', '23-down', '21-across'],
-                position: { x: 5, y: 3 },
-                separatorLocations: { ',': [3, 9] },
-            });
-            expect(getAnagramClueData(entriesFixture, clue)).toEqual(
-                expectedData
-            );
-        });
-    });
-
-    describe('getGroupEntriesForClue', () => {
-        it('should return the entries for a clue in the group in the correct order', () => {
-            const group = ['2-down', '10-across', '23-down', '21-across'];
-            expect(getGroupEntriesForClue(entriesFixture, group)).toEqual(
-                groupFixture
-            );
-        });
-    });
-
-    describe('getClueForGroupedEntries', () => {
-        it('should get the clue for a group', () => {
-            const expectedClue =
-                'Excuse me? Did some old people at any time cause our ruin? Thats a funny revolutionary line (4,4,3,6,4,4,3,2)';
-            expect(getClueForGroupedEntries(groupFixture)).toBe(expectedClue);
-        });
-    });
-
-    describe('getNumbersForGroupedEntries', () => {
-        it('should get correct numerical description for grouped clue', () => {
-            const expectedNumber = '2,10,23,21across';
-            expect(getNumbersForGroupedEntries(groupFixture)).toBe(
-                expectedNumber
-            );
-        });
-    });
-
-    describe('getAllSeparatorsForGroup', () => {
-        it('should get the correct separators for the whole clue grouup', () => {
-            const expectedSeparators = {
-                ',': [4, 8, 11, 17, 21, 25, 28],
-                '-': [],
-            };
-            expect(getAllSeparatorsForGroup(groupFixture)).toEqual(
-                expectedSeparators
-            );
-        });
-    });
-
-    describe('getTtotalLengthOfGroup', () => {
-        it('should get the total length of a group', () => {
-            expect(getTtotalLengthOfGroup(groupFixture)).toBe(30);
-        });
-    });
-
-    describe('cellsForClue', () => {
-        it('should return all the cells for a single entry', () => {
-            expect(cellsForClue(entriesFixture, entryFixture)).toEqual([
-                { x: 2, y: 3 },
-                { x: 3, y: 3 },
-            ]);
-        });
-
-        it('should return all cells for a grouped entry', () => {
-            const clue = stubClue({
-                id: '10-across',
-                humanNumber: 10,
-                length: 9,
-                clue: 'See 2',
-                group: ['2-down', '10-across', '23-down', '21-across'],
-                position: { x: 5, y: 3 },
-                separatorLocations: { ',': [3, 9] },
-            });
-
-            const expectedCells = [
-                { x: 3, y: 0 },
-                { x: 3, y: 1 },
-                { x: 3, y: 2 },
-                { x: 3, y: 3 },
-                { x: 3, y: 4 },
-                { x: 3, y: 5 },
-                { x: 3, y: 6 },
-                { x: 3, y: 7 },
-                { x: 5, y: 3 },
-                { x: 6, y: 3 },
-                { x: 7, y: 3 },
-                { x: 8, y: 3 },
-                { x: 9, y: 3 },
-                { x: 10, y: 3 },
-                { x: 11, y: 3 },
-                { x: 12, y: 3 },
-                { x: 13, y: 3 },
-                { x: 13, y: 11 },
-                { x: 13, y: 12 },
-                { x: 13, y: 13 },
-                { x: 13, y: 14 },
-                { x: 1, y: 11 },
-                { x: 2, y: 11 },
-                { x: 3, y: 11 },
-                { x: 4, y: 11 },
-                { x: 5, y: 11 },
-                { x: 6, y: 11 },
-                { x: 7, y: 11 },
-                { x: 8, y: 11 },
-                { x: 9, y: 11 },
-            ];
-            expect(cellsForClue(entriesFixture, clue)).toEqual(expectedCells);
-        });
-    });
-
-    describe('areCluesInAGroup', () => {
-        const thisEntryFixture = stubClue({
-            id: '2-across',
-            group: ['2-across', '10-down'],
-        });
-
-        const thatEntryFixture = stubClue({
-            id: '10-down',
-            group: ['2-across', '10-down'],
-        });
-
-        const otherEntryFixture = stubClue({
-            id: '10-across',
-            group: ['10-across', '12-down'],
-        });
-
-        it('should return true when two clues are part of the same group', () => {
-            expect(cluesAreInGroup(thisEntryFixture, thatEntryFixture)).toBe(
-                true
-            );
-        });
-
-        it('should return false when two clues are not part of the same group', () => {
-            expect(cluesAreInGroup(thatEntryFixture, otherEntryFixture)).toBe(
-                false
-            );
-        });
-    });
-
-    describe('checkClueHasBeenAnswered', () => {
-        const gridFixture = [
-            ['R', 'I', 'V', 'E', 'R', ''].map(stubCellWithValue),
-            ['', '', '', '', '', ''].map(stubCellWithValue),
-            ['', '', '', '', '', ''].map(stubCellWithValue),
-            ['', '', '', '', '', ''].map(stubCellWithValue),
-            ['', 'T', '2', '0', '', ''].map(stubCellWithValue),
-            ['', '', '', '', '', ''].map(stubCellWithValue),
-        ];
-
-        const answeredEntryFixture = stubClue({
-            id: '1-down',
-            solution: 'RIVER',
-            position: { x: 0, y: 0 },
-            direction: 'down',
-            length: 5,
-        });
-        const answeredEntryWithNumbersFixture = stubClue({
-            id: '2-down',
-            solution: 'T20',
-            position: { x: 4, y: 1 },
-            direction: 'down',
-            length: 3,
-        });
-        const unAnsweredEntryFixture = stubClue({
-            id: '1-across',
-            solution: 'IDIOT',
-            position: { x: 0, y: 1 },
-            direction: 'across',
-            length: 5,
-        });
-
-        it('should return true when the clue has been answered', () => {
-            expect(
-                checkClueHasBeenAnswered(gridFixture, answeredEntryFixture)
-            ).toBe(true);
-        });
-
-        it('should return true when a clue that contains numbers has been answered', () => {
-            expect(
-                checkClueHasBeenAnswered(
-                    gridFixture,
-                    answeredEntryWithNumbersFixture
-                )
-            ).toBe(true);
-        });
-
-        it('should return false when the clue has not been answered', () => {
-            expect(
-                checkClueHasBeenAnswered(gridFixture, unAnsweredEntryFixture)
-            ).toBe(false);
-        });
-    });
-
-    describe('getClearableCellsForEntry', () => {
-        // Replicates state.grid but with just the value field for a partially completed grid with clues and grouped clues intersecting and not intersecting eachothe
-        // 'SANTA CLAUSE', 'NORTHERN LIGHTS' and 'SOUTHERN CROSS' are grouped clues
-
-        /*
-           R S       H
-           I A  NORTHERN
-           V N    A  A
-           E T   FIGHTS
-           R A    L  H
-                  R  E
-           CLAUSE O  N
-                  A
-           LIGHTS D
-           U I     C
-           S SOUTHERN
-           T T     O
-           R       S
-           E       S
-         */
-
-        const gridFixture = [
-            [
-                'R',
-                'I',
-                'V',
-                'E',
-                'R',
-                '',
-                'C',
-                '',
-                'L',
-                'U',
-                'S',
-                'T',
-                'R',
-                'E',
-            ].map(stubCellWithValue),
-            ['', '', '', '', '', '', 'L', '', 'I', '', '', '', '', ''].map(
-                stubCellWithValue
-            ),
-            [
-                'S',
-                'A',
-                'N',
-                'T',
-                'A',
-                '',
-                'A',
-                '',
-                'G',
-                'I',
-                'S',
-                'T',
-                '',
-                '',
-            ].map(stubCellWithValue),
-            ['', '', '', '', '', '', 'U', '', 'H', '', 'O', '', '', ''].map(
-                stubCellWithValue
-            ),
-            ['', '', '', '', '', '', 'S', '', 'T', '', 'u', '', '', ''].map(
-                stubCellWithValue
-            ),
-            ['', 'N', '', '', '', '', 'E', '', 'S', '', 'T', '', '', ''].map(
-                stubCellWithValue
-            ),
-            ['', 'O', '', 'F', '', '', '', '', '', '', 'H', '', '', ''].map(
-                stubCellWithValue
-            ),
-            [
-                '',
-                'R',
-                'A',
-                'I',
-                'L',
-                'R',
-                'O',
-                'A',
-                'D',
-                '',
-                'E',
-                '',
-                '',
-                '',
-            ].map(stubCellWithValue),
-            ['', 'T', '', 'G', '', '', '', '', '', 'C', 'R', 'O', 'S', 'S'].map(
-                stubCellWithValue
-            ),
-            ['', 'H', '', 'H', '', '', '', '', '', '', 'N', '', '', ''].map(
-                stubCellWithValue
-            ),
-            ['', 'E', '', 'T', '', '', '', '', '', '', '', '', '', ''].map(
-                stubCellWithValue
-            ),
-            [
-                '',
-                'R',
-                '',
-                'S',
-                'O',
-                'U',
-                'T',
-                'H',
-                'E',
-                'R',
-                'N',
-                '',
-                '',
-                '',
-            ].map(stubCellWithValue),
-            ['', 'N', '', '', '', '', '', '', '', '', '', '', '', ''].map(
-                stubCellWithValue
-            ),
-        ];
-
-        const oneDownFixture = stubClue({
-            id: '1-down',
-            group: ['1-down'],
-            solution: 'RIVER',
-            position: { x: 0, y: 0 },
-            direction: 'down',
-            length: 5,
-        });
-        const twoDownFixture = stubClue({
-            id: '2-down',
-            group: ['2-down', '1-across'],
-            solution: 'SANTA',
-            position: { x: 2, y: 0 },
-            direction: 'down',
-            length: 5,
-        });
-        const threeDownFixture = stubClue({
-            id: '3-down',
-            group: ['3-down'],
-            solution: 'RAILROAD',
-            position: { x: 7, y: 1 },
-            direction: 'down',
-            length: 8,
-        });
-
-        // Unanswered clue
-        const fourDownFixture = stubClue({
-            id: '4-down',
-            group: ['4-down'],
-            solution: 'HEATHEN',
-            position: { x: 10, y: 0 },
-            direction: 'down',
-            length: 7,
-        });
-        const fiveDownFixture = stubClue({
-            id: '5-down',
-            group: ['5-down'],
-            solution: 'LUSTRE',
-            position: { x: 0, y: 8 },
-            direction: 'down',
-            length: 6,
-        });
-        const sixDownFixture = stubClue({
-            id: '6-down',
-            group: ['6-down'],
-            solution: 'GIST',
-            position: { x: 2, y: 8 },
-            direction: 'down',
-            length: 4,
-        });
-        const sevenDownFixture = stubClue({
-            id: '7-down',
-            group: ['5-across', '7-down'],
-            solution: 'CROSS',
-            position: { x: 8, y: 9 },
-            direction: 'down',
-            length: 5,
-        });
-
-        const oneAcrossFixture = stubClue({
-            id: '1-across',
-            group: ['2-down', '1-across'],
-            solution: 'CLAUSE',
-            position: { x: 0, y: 6 },
-            direction: 'across',
-            length: 6,
-        });
-        const twoAcrossFixture = stubClue({
-            id: '2-across',
-            group: ['3-across', '2-across'],
-            solution: 'LIGHTS',
-            position: { x: 0, y: 8 },
-            direction: 'across',
-            length: 6,
-        });
-        const threeAcrossFixture = stubClue({
-            id: '3-across',
-            group: ['3-across', '2-across'],
-            solution: 'NORTHERN',
-            position: { x: 5, y: 1 },
-            direction: 'across',
-            length: 8,
-        });
-
-        const fourAcrossFixture = stubClue({
-            id: '4-across',
-            group: ['4-across'],
-            solution: 'FIGHTS',
-            position: { x: 6, y: 3 },
-            direction: 'across',
-            length: 6,
-        });
-        const fiveAcrossFixture = stubClue({
-            id: '5-across',
-            group: ['5-across', '7-down'],
-            solution: 'SOUTHERN',
-            position: { x: 2, y: 10 },
-            direction: 'across',
-            length: 8,
-        });
-
-        const theEntriesFixture = [
-            oneDownFixture,
-            twoDownFixture,
-            threeDownFixture,
-            fourDownFixture,
-            fiveDownFixture,
-            sixDownFixture,
-            sevenDownFixture,
-            oneAcrossFixture,
-            twoAcrossFixture,
-            threeAcrossFixture,
-            fourAcrossFixture,
-            fiveAcrossFixture,
-        ];
-
-        const clueMapFixture = {
-            // RIVER [0,0]
-            '0_0': { down: oneDownFixture },
-            '0_1': { down: oneDownFixture },
-            '0_2': { down: oneDownFixture },
-            '0_3': { down: oneDownFixture },
-            '0_4': { down: oneDownFixture },
-
-            // SANTA[2,0]
-            '2_0': { down: twoDownFixture },
-            '2_1': { down: twoDownFixture },
-            '2_2': { down: twoDownFixture },
-            '2_3': { down: twoDownFixture },
-            '2_4': { down: twoDownFixture },
-
-            // RAILROAD[7,1]
-            '7_1': { accross: threeAcrossFixture, down: threeDownFixture }, // intersects NORTHERN
-            '7_2': { down: threeDownFixture },
-            '7_3': { across: fourAcrossFixture, down: threeDownFixture }, // intersects FIGHTS
-            '7_4': { down: threeDownFixture },
-            '7_5': { down: threeDownFixture },
-            '7_6': { down: threeDownFixture },
-            '7_7': { down: threeDownFixture },
-
-            // HEATHEN[10,1][
-            '10_0': { down: fourDownFixture },
-            '10_1': { across: threeAcrossFixture, down: fourDownFixture }, // intersects NORTHERN
-            '10_2': { down: fourDownFixture },
-            '10_3': { across: fourAcrossFixture, down: fourDownFixture }, // intersects FIGHTS
-            '10_4': { down: fourDownFixture },
-            '10_5': { down: fourDownFixture },
-            '10_6': { down: fourDownFixture },
-
-            // LUSTRE[0.8]
-            '0_8': { across: twoAcrossFixture, down: fiveDownFixture }, // intersects LIGHTS
-            '0_9': { down: fiveDownFixture },
-            '0_10': { down: fiveDownFixture },
-            '0_11': { down: fiveDownFixture },
-            '0_12': { down: fiveDownFixture },
-            '0_13': { down: fiveDownFixture },
-
-            // GIST[0,6]
-            '2_8': { across: twoAcrossFixture, down: sixDownFixture }, // intersects GIST
-            '2_9': { down: sixDownFixture },
-            '2_10': { across: fiveAcrossFixture, down: sixDownFixture }, // Intersects SOUTHERN
-            '2_11': { down: sixDownFixture },
-
-            // CLAUSE[0,6]
-            '0_6': { across: oneAcrossFixture },
-            '1_6': { across: oneAcrossFixture },
-            '2_6': { across: oneAcrossFixture },
-            '3_6': { across: oneAcrossFixture },
-            '4_6': { across: oneAcrossFixture },
-            '5_6': { across: oneAcrossFixture },
-
-            // LIGHTS[0,6] - minus 'L' and 'G'
-            '1_8': { across: twoAcrossFixture },
-            '3_8': { across: twoAcrossFixture },
-            '4_8': { across: twoAcrossFixture },
-            '5_8': { across: twoAcrossFixture },
-
-            // NORTHERN[5,1] - minus 'O' and 'R'
-            '5_1': { across: threeAcrossFixture },
-            '6_1': { across: threeAcrossFixture },
-            '8_1': { across: threeAcrossFixture },
-            '9_1': { across: threeAcrossFixture },
-            '11_1': { across: threeAcrossFixture },
-            '12_1': { across: threeAcrossFixture },
-
-            // FIGHTS[6,3]  -
-            '6_3': { across: fourAcrossFixture },
-            '8_3': { across: fourAcrossFixture },
-            '9_3': { across: fourAcrossFixture },
-            '11_3': { across: fourAcrossFixture },
-
-            // SOUTHERN [x: 2, y: 10][8] 'S' Missing 'R'    OUTHE N
-            '3_10': { across: fiveAcrossFixture },
-            '4_10': { across: fiveAcrossFixture },
-            '5_10': { across: fiveAcrossFixture },
-            '6_10': { across: fiveAcrossFixture },
-            '7_10': { across: fiveAcrossFixture },
-            '9_10': { across: fiveAcrossFixture },
-
-            // CROSS[x: 8, y: 9]
-            '8_9': { down: sevenDownFixture },
-            '8_10': { across: fiveAcrossFixture, down: sevenDownFixture }, // Intersects SOUTHERN
-            '8_11': { down: sevenDownFixture },
-            '8_12': { down: sevenDownFixture },
-            '8_13': { down: sevenDownFixture },
-        };
-
-        // duplicate cells' - a cell which is used by more than one completed clue
-        it('should return all cells for an ungrouped clue which does not intersect other answered clues', () => {
-            const expectedCells = [
-                { x: 0, y: 0 },
-                { x: 0, y: 1 },
-                { x: 0, y: 2 },
-                { x: 0, y: 3 },
-                { x: 0, y: 4 },
-            ];
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    oneDownFixture
-                )
-            ).toEqual(expectedCells);
-        });
-
-        // F GHTS because 'RAILROAD' has been answered, because 'HEATHEN' hasnt
-        it('should return all correct cells for an ungrouped clue which intersects an unanswered clue', () => {
-            const expectedCells = [
-                { x: 6, y: 3 },
-                { x: 8, y: 3 },
-                { x: 9, y: 3 },
-                { x: 10, y: 3 },
-                { x: 11, y: 3 },
-            ];
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    fourAcrossFixture
-                )
-            ).toEqual(expectedCells);
-        });
-
-        // SANTACLAUSE
-        it('should return all cells for a grouped clue which does not intersect other answered clues', () => {
-            const expectedCells = [
-                { x: 2, y: 0 },
-                { x: 2, y: 1 },
-                { x: 2, y: 2 },
-                { x: 2, y: 3 },
-                { x: 2, y: 4 },
-                { x: 0, y: 6 },
-                { x: 1, y: 6 },
-                { x: 2, y: 6 },
-                { x: 3, y: 6 },
-                { x: 4, y: 6 },
-                { x: 5, y: 6 },
-            ];
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    twoDownFixture
-                )
-            ).toEqual(expectedCells);
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    oneAcrossFixture
-                )
-            ).toEqual(expectedCells);
-        });
-
-        // NORTHERN 5, 1 LIGHTS  0 8
-        // NORTHERN LIGHTS should clear NO THERN  I HTS
-        it('should return all cells for a grouped clue which intersects other completed clues', () => {
-            const expectedCells = [
-                { x: 5, y: 1 },
-                { x: 6, y: 1 },
-                { x: 8, y: 1 },
-                { x: 9, y: 1 },
-                { x: 10, y: 1 },
-                { x: 11, y: 1 },
-                { x: 12, y: 1 },
-                { x: 1, y: 8 },
-                { x: 3, y: 8 },
-                { x: 4, y: 8 },
-                { x: 5, y: 8 },
-            ];
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    twoAcrossFixture
-                )
-            ).toEqual(expectedCells);
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    threeAcrossFixture
-                )
-            ).toEqual(expectedCells);
-        });
-
-        // SOUTHERN  8, 9, CROSS 8. 9
-        // should clear OUTHERN CR SS
-        it('should return the correct cells where entries in a grouped clue intersect each other', () => {
-            const expectedCells = [
-                { x: 3, y: 10 },
-                { x: 4, y: 10 },
-                { x: 5, y: 10 },
-                { x: 6, y: 10 },
-                { x: 7, y: 10 },
-                { x: 8, y: 10 },
-                { x: 9, y: 10 },
-                { x: 8, y: 9 },
-                { x: 8, y: 11 },
-                { x: 8, y: 12 },
-                { x: 8, y: 13 },
-            ];
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    fiveAcrossFixture
-                )
-            ).toEqual(expectedCells);
-            expect(
-                getClearableCellsForClue(
-                    gridFixture,
-                    clueMapFixture,
-                    theEntriesFixture,
-                    sevenDownFixture
-                )
-            ).toEqual(expectedCells);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/hidden-input.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/hidden-input.js
deleted file mode 100644
index 22fbdaf5508..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/hidden-input.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/hidden-input.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component, findDOMNode } from 'preact/compat';
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import { scrollTo } from 'lib/scroller';
-import { isBreakpoint } from 'lib/detect';
-
-class HiddenInput extends Component<*, *> {
-    constructor(props: Object) {
-        super(props);
-        this.state = {
-            value: this.props.value,
-        };
-    }
-
-    componentDidUpdate() {
-        if (
-            isBreakpoint({
-                max: 'mobile',
-            })
-        ) {
-            fastdom.measure(() => {
-                const offsets = bonzo(findDOMNode(this.input)).offset();
-                const clueHeight = document.getElementsByClassName(
-                    'crossword__sticky-clue'
-                )[0].offsetHeight;
-
-                scrollTo(
-                    offsets.top - offsets.height * 1.5 - clueHeight,
-                    250,
-                    'easeOutQuad'
-                );
-            });
-        }
-    }
-
-    onClick(event: SyntheticInputEvent<HTMLInputElement>) {
-        this.props.crossword.onClickHiddenInput(event);
-    }
-
-    onKeyDown(event: SyntheticInputEvent<HTMLInputElement>) {
-        this.props.crossword.onKeyDown(event);
-    }
-
-    onBlur(event: SyntheticInputEvent<HTMLInputElement>) {
-        this.props.crossword.goToReturnPosition(event);
-    }
-
-    touchStart(event: SyntheticInputEvent<HTMLInputElement>) {
-        this.props.crossword.onClickHiddenInput(event);
-    }
-
-    handleChange(event: SyntheticInputEvent<HTMLInputElement>) {
-        this.props.crossword.insertCharacter(event.target.value);
-        this.setState({
-            value: '',
-        });
-    }
-
-    render() {
-        return (
-            <div
-                className="crossword__hidden-input-wrapper"
-                ref={wrapper => {
-                    this.wrapper = wrapper;
-                }}>
-                <input
-                    type="text"
-                    className="crossword__hidden-input"
-                    maxLength="1"
-                    onClick={this.onClick.bind(this)}
-                    onChange={this.handleChange.bind(this)}
-                    onTouchStart={this.touchStart.bind(this)}
-                    onKeyDown={this.onKeyDown.bind(this)}
-                    onBlur={this.onBlur.bind(this)}
-                    value={this.state.value}
-                    autoComplete="off"
-                    spellCheck="false"
-                    autoCorrect="off"
-                    ref={input => {
-                        this.input = input;
-                    }}
-                />
-            </div>
-        );
-    }
-}
-
-export { HiddenInput };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/keycodes.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/keycodes.js
deleted file mode 100644
index 092a000e5ed..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/keycodes.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/keycodes.js
- * to .ts, then delete it.
- */
-
-// @flow
-const keycodes = {
-    backspace: 8,
-    tab: 9,
-    left: 37,
-    up: 38,
-    right: 39,
-    down: 40,
-    delete: 46,
-};
-
-export { keycodes };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/main.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/main.js
deleted file mode 100644
index 45663cdb205..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/main.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/main.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React, { render } from 'preact/compat';
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-import Crossword from 'common/modules/crosswords/crossword';
-
-const initCrosswords = (): void => {
-    fastdom
-        .measure(() => document.getElementsByClassName('js-crossword'))
-        .then(elements => {
-            Array.from(elements).forEach(element => {
-                const data = element.getAttribute('data-crossword-data');
-
-                if (!data) {
-                    throw new Error(
-                        'JavaScript crossword without associated data in data-crossword-data'
-                    );
-                }
-
-                const crosswordComponent = render(
-                    <Crossword data={JSON.parse(data)} />,
-                    element
-                );
-
-                const entryId = window.location.hash.replace('#', '');
-                const entry = crosswordComponent.props.data.entries.find(
-                    val => val.id === entryId
-                );
-
-                if (entry) {
-                    crosswordComponent.focusFirstCellInClue(entry);
-                }
-
-                bean.on(element, 'click', $('.crossword__clue'), e => {
-                    e.preventDefault();
-
-                    const idMatch = e.currentTarget.hash.match(/#.*/);
-                    const newEntryId = idMatch && idMatch[0].replace('#', '');
-                    const newEntry = crosswordComponent.props.data.entries.find(
-                        val => val.id === newEntryId
-                    );
-                    const focussedEntry = crosswordComponent.clueInFocus();
-                    const isNewEntry =
-                        focussedEntry && focussedEntry.id !== newEntry.id;
-
-                    // Only focus the first cell in the new clue if it's not already
-                    // focussed. When focussing a cell in a new clue, we update the
-                    // hash fragment afterwards, in which case we do not want to
-                    // reset focus to the first cell.
-                    if (newEntry && (focussedEntry ? isNewEntry : true)) {
-                        crosswordComponent.focusFirstCellInClue(newEntry);
-                    }
-                });
-            });
-        });
-};
-
-export { initCrosswords };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/persistence.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/persistence.js
deleted file mode 100644
index ae73e34da78..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/persistence.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/persistence.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { storage } from '@guardian/libs';
-
-const localStorageKey = (id: string) => `crosswords.${id}`;
-
-const saveGridState = (id: string, grid: Grid): boolean => {
-    /* Take only the entries from the grid. Other state information like what
-       cells are highlighted ought not to be persisted. */
-    const entries = grid.map(row => row.map(cell => cell.value));
-
-    try {
-        return storage.local.set(localStorageKey(id), entries);
-    } catch (e) {
-        return false;
-    }
-};
-
-const loadGridState = (id: string): Array<Array<string>> =>
-    storage.local.get(localStorageKey(id));
-
-export { saveGridState, loadGridState };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/series.js b/static/src/javascripts.flow.archive/projects/common/modules/crosswords/series.js
deleted file mode 100644
index 3d4b08f3363..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/crosswords/series.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/crosswords/series.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { addProximityLoader } from 'lib/proximity-loader';
-import { OnwardContent } from 'common/modules/onward/onward-content';
-
-export const initSeries = (): void => {
-    const els = document.getElementsByClassName('js-onward');
-
-    if (els.length > 0) {
-        const el = els[0];
-
-        addProximityLoader(el, 1500, () => {
-            if (
-                config.get('page.seriesId') &&
-                config.get('page.showRelatedContent')
-            ) {
-                // eslint-disable-next-line no-new
-                new OnwardContent(el);
-            }
-        });
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/activity-stream.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/activity-stream.js
deleted file mode 100644
index 8b80616d5b4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/activity-stream.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/activity-stream.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bonzo from 'bonzo';
-import bean from 'bean';
-import $ from 'lib/$';
-import {
-    getUrlVars,
-    constructQuery,
-    replaceQueryString,
-    pushQueryString,
-} from 'lib/url';
-import { Component } from 'common/modules/component';
-import { recommendComment } from 'common/modules/discussion/api';
-
-declare class PopStateEvent extends Event {
-    state: Object;
-}
-
-class ActivityStream extends Component {
-    constructor(opts: Object): void {
-        super();
-
-        this.endpoint =
-            '/discussion/profile/:userId/:streamType.json?page=:page';
-        this.componentClass = 'activity-stream';
-        this.defaultOptions = {
-            page: 1,
-            streamType: 'discussions',
-            userId: null,
-        };
-
-        this.setOptions(opts);
-    }
-
-    applyState(html: string, streamType: string): void {
-        const selectTab = (type: string): void => {
-            // Blur so that when pressing forward/back the focus is not retained on
-            // the old tab Note, without the focus first, the blur doesn't seem to
-            // work for some reason
-            $('.js-activity-stream-change')
-                .focus()
-                .blur();
-
-            $('.tabs__tab--selected').removeClass('tabs__tab--selected');
-
-            bonzo($(`a[data-stream-type=${type}]`))
-                .parent()
-                .addClass('tabs__tab--selected');
-        };
-
-        // update display
-        const $el = bonzo(this.elem).empty();
-
-        this.setState('loading');
-
-        $.create(html).each(el => {
-            $el.html($(el).html()).attr({ class: el.className });
-        });
-
-        this.removeState('loading');
-
-        const activeTab = $('.tabs__tab--selected');
-
-        if (activeTab.data('stream-type') !== streamType) {
-            selectTab(streamType === 'comments' ? 'discussions' : streamType);
-        }
-
-        // update opts
-        this.options.streamType = streamType;
-    }
-
-    change(opts: Object): Promise<any> {
-        this.setOptions(opts);
-        // eslint-disable-next-line no-underscore-dangle
-        return this._fetch();
-    }
-
-    fetched(resp: Object): void {
-        if (this.options.streamType) {
-            this.applyState(resp.html, this.options.streamType);
-        }
-
-        this.updateHistory(resp);
-    }
-
-    ready(): void {
-        const pagination = (activityStream: ActivityStream): void => {
-            bean.on(
-                activityStream.elem,
-                'click',
-                '.js-activity-stream-page-change',
-                (e: Event) => {
-                    const target: HTMLElement = (e.currentTarget: any);
-                    const page: ?string = target.getAttribute('data-page');
-                    e.preventDefault();
-
-                    activityStream.change({
-                        page,
-                    });
-                }
-            );
-        };
-
-        this.removeState('loading');
-        this.on('click', '.js-disc-recommend-comment', this.recommendComment);
-
-        $('.js-disc-recommend-comment').addClass(
-            'disc-comment__recommend--open'
-        );
-
-        window.onpopstate = (event: PopStateEvent): void => {
-            this.applyState(event.state.resp.html, event.state.streamType);
-        };
-
-        pagination(this);
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    recommendComment(e: Event): void {
-        const el: HTMLElement = (e.currentTarget: any);
-        const id = el.getAttribute('data-comment-id');
-
-        if (id) {
-            recommendComment(id);
-
-            bonzo(el).addClass('disc-comment__recommend--active');
-
-            $('.js-disc-recommend-count', el).each(countEl => {
-                countEl.innerHTML = parseInt(countEl.innerHTML, 10) + 1;
-            });
-        }
-    }
-
-    updateHistory(resp: Object): void {
-        const page = this.options.page;
-        const userId = this.options.userId || '';
-        const pageParam = getUrlVars().page;
-        const streamType =
-            this.options.streamType !== 'discussions'
-                ? `/${this.options.streamType}`
-                : '';
-        const qs = `/user/id/${userId}${streamType}?${constructQuery({
-            page,
-        })}`;
-        const state = {
-            resp,
-            streamType: this.options.streamType,
-        };
-        const params = { querystring: qs, state };
-
-        if (typeof pageParam === 'undefined') {
-            // If first load and without page param, add it and overwrite history
-            replaceQueryString(params);
-        } else {
-            pushQueryString(params);
-        }
-    }
-}
-
-export { ActivityStream };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/api.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/api.js
deleted file mode 100644
index a001bad3c4a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/api.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/api.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { ajax } from 'lib/ajax';
-import config from 'lib/config';
-
-export const send = (
-    endpoint: string,
-    method: 'post' | 'get',
-    data?: Object = {}
-): any => {
-    if (config.get('switches.enableDiscussionSwitch')) {
-        return ajax({
-            url: config.get('page.discussionApiUrl') + endpoint,
-            type: method === 'get' ? 'jsonp' : 'json',
-            method,
-            crossOrigin: true,
-            data,
-            headers: {
-                'D2-X-UID': config.get('page.discussionD2Uid'),
-                'GU-Client': config.get('page.discussionApiClientHeader'),
-            },
-            withCredentials: true,
-        });
-    }
-
-    throw new Error('Discussion features have been disabled');
-};
-
-export const postComment = (discussionId: number | string, comment: Object) => {
-    const endpoint = `/discussion/${discussionId}/comment${
-        comment.replyTo ? `/${comment.replyTo.commentId}/reply` : ''
-    }`;
-
-    return send(endpoint, 'post', comment);
-};
-
-export const previewComment = (comment: Object) =>
-    send('/comment/preview', 'post', comment);
-
-export const recommendComment = (id: number | string) =>
-    send(`/comment/${id}/recommend`, 'post');
-
-export const pickComment = (id: number | string) =>
-    send(`/comment/${id}/highlight`, 'post');
-
-export const unPickComment = (id: number | string) =>
-    send(`/comment/${id}/unhighlight`, 'post');
-
-export const reportComment = (id: number | string, report: Object) =>
-    send(`/comment/${id}/reportAbuse`, 'post', report);
-
-export const getUser = (id: number | string = 'me') =>
-    send(`/profile/${id}`, 'get');
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-box.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-box.js
deleted file mode 100644
index ecea79744cc..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-box.js
+++ /dev/null
@@ -1,718 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/comment-box.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import bonzo from 'bonzo';
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-import { Component } from 'common/modules/component';
-import {
-    getUser,
-    postComment,
-    previewComment,
-} from 'common/modules/discussion/api';
-import {
-    getUserFromCookie,
-    reset,
-    updateUsername,
-    getUserFromApiWithRefreshedCookie,
-} from 'common/modules/identity/api';
-import { avatarify } from 'common/modules/discussion/user-avatars';
-import { init as initValidationEmail } from 'common/modules/identity/validation-email';
-import { urlify } from './urlify';
-
-type commentType = {
-    body: string,
-    id?: number,
-    replyTo?: Object,
-};
-
-class CommentBox extends Component {
-    static async refreshUsernameHtml(): Promise<void> {
-        reset();
-
-        const discussionUserResponse = await getUser();
-
-        if (!discussionUserResponse || !discussionUserResponse.userProfile) {
-            return;
-        }
-
-        const discussionUser: DiscussionProfile =
-            discussionUserResponse.userProfile;
-
-        const displayName = discussionUser.displayName;
-        const menuHeaderUsername = document.querySelector('.js-profile-info');
-        const discussionHeaderUsername = document.querySelector(
-            '._author_tywwu_16'
-        );
-
-        if (menuHeaderUsername && displayName) {
-            menuHeaderUsername.innerHTML = displayName;
-        }
-
-        if (discussionHeaderUsername && displayName) {
-            discussionHeaderUsername.innerHTML = displayName;
-        }
-    }
-
-    constructor(options: Object): void {
-        super();
-
-        this.useBem = true;
-        this.templateName = 'comment-box';
-        this.componentClass = 'd-comment-box';
-        this.classes = {};
-        this.errors = [];
-        this.defaultOptions = {
-            discussionId: null,
-            apiRoot: null,
-            maxLength: 5000,
-            premod: false,
-            newCommenter: false,
-            hasUsername: true,
-            focus: false,
-            state: 'top-level',
-            replyTo: null,
-            priorToVerificationDate: new Date(1392719401337), // Tue Feb 18 2014 10:30:01 GMT
-        };
-        this.errorMessages = {
-            EMPTY_COMMENT_BODY: 'Please write a comment.',
-            COMMENT_TOO_LONG:
-                'Your comment must be fewer than 5000 characters long.',
-            USER_BANNED:
-                'Commenting has been disabled for this account (<a href="/community-faqs#321a">why?</a>).',
-            IP_THROTTLED:
-                'Commenting has been temporarily blocked for this IP address (<a href="/community-faqs">why?</a>).',
-            DISCUSSION_CLOSED:
-                'Sorry your comment can not be published as the discussion is now closed for comments.',
-            PARENT_COMMENT_MODERATED:
-                'Sorry the comment can not be published as the comment you replied to has been moderated since.',
-            COMMENT_RATE_LIMIT_EXCEEDED:
-                'You can only post one comment every minute. Please try again in a moment.',
-            INVALID_PROTOCOL:
-                'Sorry your comment can not be published as it was not sent over a secure channel. Please report us this issue using the technical issue link in the page footer.',
-            AUTH_COOKIE_INVALID:
-                'Sorry, your comment was not published as you are no longer signed in. Please sign in and try again.',
-            'READ-ONLY-MODE':
-                'Sorry your comment can not currently be published as commenting is undergoing maintenance but will be back shortly. Please try again in a moment.',
-            USERNAME_MISSING: `You must <a href="${config.get(
-                'page.mmaUrl'
-            )}/public-settings">set a username</a> before commenting. (<a href="/help/2020/feb/10/why-am-i-unable-to-post-a-comment">Learn more</a>).`,
-
-            /* Custom error codes */
-            /* CORS blocked by HTTP/1.0 proxy */
-
-            API_CORS_BLOCKED: `Could not post due to your internet settings, which might be
-                 controlled by your provider. Please contact your administrator
-                 or disable any proxy servers or VPNs and try again.`,
-            API_ERROR: `Sorry, there was a problem posting your comment. Please try
-                another browser or network connection.  Reference code `,
-            EMAIL_VERIFIED: `<span class="d-comment-box__error-meta">Sent. Please check your
-                email to verify your email address. Once verified post your
-                comment.</span>`,
-            EMAIL_VERIFIED_FAIL: `We are having technical difficulties. Please try again later or
-                <a href="/send/email" class="js-id-send-validation-email">
-                <strong>resend the verification</strong></a>.`,
-            EMAIL_NOT_VALIDATED: `Please confirm your email address to comment.<br />
-                If you can't find the email, we can
-                <a href="_#" class="js-id-send-validation-email">
-                <strong>resend the verification email</strong></a> to your email
-                address.`,
-        };
-
-        this.setOptions(options);
-
-        mediator.on('module:identity:validation-email:success', () =>
-            this.verificationEmailSuccess()
-        );
-
-        mediator.on('module:identity:validation-email:fail', () =>
-            this.verificationEmailFail()
-        );
-    }
-
-    onboardingPreviewSuccess(comment: commentType, resp: Object): void {
-        const onboardingPreviewBody = this.getElem('onboarding-preview-body');
-
-        if (onboardingPreviewBody) {
-            onboardingPreviewBody.innerHTML = resp.commentBody;
-        }
-    }
-
-    getDiscussionId(): string {
-        const { discussionId } = this.options;
-        let discussionKey =
-            this.elem &&
-            this.elem instanceof HTMLElement &&
-            this.elem.getAttribute('data-discussion-key');
-
-        if (!discussionId && discussionKey) {
-            discussionKey = discussionKey.replace('discussion', '');
-        }
-
-        return discussionId || discussionKey || '';
-    }
-
-    setFormState(disabled?: boolean = false): void {
-        const commentBody = ((this.getElem('body'): any): HTMLInputElement);
-        const submitButton = this.getElem('submit');
-
-        if (submitButton && (disabled || commentBody.value.length === 0)) {
-            submitButton.setAttribute('disabled', 'disabled');
-        } else if (submitButton) {
-            submitButton.removeAttribute('disabled');
-        }
-    }
-
-    setExpanded(): void {
-        this.setState('expanded');
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    getUserData(): Object {
-        // User will always exists at this point.
-        // $FlowFixMe
-        return getUserFromCookie();
-    }
-
-    errors: Array<string>;
-    errorMessages: Object;
-
-    clearErrors(): void {
-        const messages = this.getElem('messages');
-
-        if (messages) {
-            messages.innerHTML = '';
-        }
-
-        this.errors = [];
-        this.removeState('invalid');
-    }
-
-    previewCommentSuccess(comment: commentType, resp: Object): void {
-        const previewBody = this.getElem('preview-body');
-
-        if (previewBody) {
-            previewBody.innerHTML = resp.commentBody;
-        }
-
-        this.setState('preview-visible');
-    }
-
-    fail(xhr: Object): void {
-        let response;
-
-        // if our API is down, it returns HTML
-        // this is not so good for JSON.parse
-        try {
-            response = JSON.parse(xhr.responseText);
-        } catch (e) {
-            response = {};
-        }
-
-        this.setFormState();
-
-        if (xhr.status === 0) {
-            this.error('API_CORS_BLOCKED');
-        } else if (response.errorCode === 'EMAIL_NOT_VALIDATED') {
-            this.invalidEmailError();
-        } else if (response.errorCode === 'IP_ADDRESS_BLOCKED') {
-            this.error('IP_THROTTLED');
-        } else if (this.errorMessages[response.errorCode]) {
-            this.error(response.errorCode);
-        } else {
-            this.error('API_ERROR', this.errorMessages.API_ERROR + xhr.status); // templating would be ideal here
-        }
-    }
-
-    postCommentSuccess(comment: commentType, resp: Object): commentType {
-        CommentBox.refreshUsernameHtml();
-
-        if (this.options.newCommenter) {
-            this.options.newCommenter = false;
-        }
-
-        const body = ((this.getElem('body'): any): HTMLInputElement);
-
-        comment.id = parseInt(resp.message, 10);
-        body.value = '';
-        this.resetPreviewComment();
-        this.setFormState();
-
-        this.emit('post:success', comment);
-        mediator.emit('discussion:commentbox:post:success', comment);
-
-        return comment;
-    }
-
-    error(type: string, message?: string): void {
-        const messages = this.getElem('messages');
-
-        this.setState('invalid');
-
-        const errorMessage = `
-            <div class="d-discussion__error ${this.getClass('error', true)}">
-                <i class="i i-alert"></i>
-                <span class="d-discussion__error-text">
-                    ${message || this.errorMessages[type]}
-                </span>
-            </div>`;
-
-        if (messages) {
-            messages.appendChild(bonzo.create(errorMessage)[0]);
-        }
-
-        this.errors.push(type);
-    }
-
-    postComment(): Promise<any> {
-        const commentBody = this.getElem('body');
-        const { value } =
-            (commentBody &&
-                commentBody instanceof HTMLTextAreaElement &&
-                commentBody) ||
-            {};
-
-        const comment: commentType = {
-            body: value,
-        };
-
-        this.clearErrors();
-
-        const postCommentToDAPI = (): Promise<any> => {
-            this.removeState('onboarding-visible');
-            comment.body = urlify(comment.body);
-            this.setFormState(true);
-
-            return postComment(this.getDiscussionId(), comment)
-                .then((resp: Object) => this.postCommentSuccess(comment, resp))
-                .catch((err: Object) => this.fail(err));
-        };
-
-        const updateUsernameSuccess = (resp: Object): void => {
-            const onbordingUsername = this.getElem('onboarding-username');
-
-            mediator.emit(
-                'user:username:updated',
-                resp.user.publicFields.username
-            );
-
-            this.options.hasUsername = true;
-
-            if (onbordingUsername) {
-                onbordingUsername.classList.add('is-hidden');
-            }
-
-            postCommentToDAPI();
-        };
-
-        const updateUsernameFailure = (errorResponse: Object): void => {
-            const usernameField = this.getElem('onboarding-username-input');
-            const errorMessage = this.getElem(
-                'onboarding-username-error-message'
-            );
-
-            this.setState('onboarding-visible');
-
-            if (usernameField) {
-                usernameField.classList.add(
-                    'd-comment-box__onboarding-username-error-border'
-                );
-            }
-
-            // TODO: this should be wrapped into a try-catch block
-            if (errorMessage) {
-                errorMessage.innerHTML = JSON.parse(
-                    errorResponse.responseText
-                ).errors[0].description;
-
-                errorMessage.classList.remove('is-hidden');
-            }
-        };
-
-        const validEmailCommentSubmission = (): Promise<any> => {
-            if (comment.body === '') {
-                this.error('EMPTY_COMMENT_BODY');
-            }
-
-            if (comment.body.length > this.options.maxLength) {
-                this.error(
-                    'COMMENT_TOO_LONG',
-                    `<b>Comments must be shorter than ${
-                        this.options.maxLength
-                    } characters.</b>` +
-                        `Yours is currently ${comment.body.length -
-                            this.options.maxLength} character(s) too long.`
-                );
-            }
-
-            if (this.options.replyTo) {
-                comment.replyTo = this.options.replyTo;
-            }
-
-            if (this.errors.length === 0) {
-                if (this.options.newCommenter && !this.options.hasUsername) {
-                    const userNameInput = ((this.getElem(
-                        'onboarding-username-input'
-                    ): any): HTMLInputElement);
-                    return updateUsername(userNameInput.value).then(
-                        updateUsernameSuccess,
-                        updateUsernameFailure
-                    );
-                }
-                return postCommentToDAPI();
-            }
-
-            return Promise.resolve();
-        };
-
-        if (!this.getUserData().emailVerified) {
-            // Cookie could be stale so lets refresh and check from the api
-            const createdDate = new Date(this.getUserData().accountCreatedDate);
-
-            if (createdDate > this.options.priorToVerificationDate) {
-                return getUserFromApiWithRefreshedCookie().then(response => {
-                    if (
-                        response.user.statusFields.userEmailValidated === true
-                    ) {
-                        return validEmailCommentSubmission();
-                    }
-                    this.invalidEmailError();
-                });
-            }
-            return validEmailCommentSubmission();
-        }
-        return validEmailCommentSubmission();
-    }
-
-    invalidEmailError(): void {
-        this.removeState('onboarding-visible');
-        this.error('EMAIL_NOT_VALIDATED');
-        initValidationEmail();
-    }
-
-    submitPostComment(e: Event): void {
-        e.preventDefault();
-        this.postComment();
-    }
-
-    ready(): void {
-        if (this.getDiscussionId() === null) {
-            throw new Error(
-                'CommentBox: You need to set the "data-discussion-key" on your element'
-            );
-        }
-
-        const commentBody = this.getElem('body');
-
-        this.setFormState();
-
-        if (this.options.newCommenter) {
-            bean.on(document.body, 'submit', [this.elem], (event: Event) =>
-                this.showOnboarding(event)
-            );
-            bean.on(
-                document.body,
-                'click',
-                this.getClass('onboarding-cancel'),
-                (event: Event) => this.hideOnboarding(event)
-            );
-        } else {
-            bean.on(document.body, 'submit', [this.elem], (event: Event) =>
-                this.submitPostComment(event)
-            );
-        }
-
-        bean.on(document.body, 'change keyup', [commentBody], () =>
-            this.setFormState()
-        );
-
-        bean.on(commentBody, 'focus', () => this.setExpanded());
-
-        this.on('change', '.d-comment-box__body', () =>
-            this.resetPreviewComment()
-        );
-        this.on('click', this.getClass('preview'), () =>
-            this.previewComment('previewCommentSuccess')
-        );
-        this.on('click', this.getClass('hide-preview'), () =>
-            this.resetPreviewComment()
-        );
-
-        this.on('click', this.getClass('cancel'), () => this.cancelComment());
-        this.on('click', this.getClass('show-parent'), () =>
-            this.setState('parent-visible')
-        );
-        this.on('click', this.getClass('hide-parent'), () =>
-            this.removeState('parent-visible')
-        );
-
-        ['bold', 'italic', 'quote', 'link'].forEach(format => {
-            const selector = this.getClass(`formatting-${format}`);
-
-            this.on('click', selector, () => this.formatComment(format));
-        });
-
-        if (this.options.state) {
-            this.setState(this.options.state);
-        }
-
-        if (this.options.focus) {
-            const body = this.getElem('body');
-
-            if (body) {
-                window.setTimeout(() => {
-                    body.focus();
-                }, 0);
-            }
-        }
-    }
-
-    hideOnboarding(e: Event): void {
-        e.preventDefault();
-        this.removeState('onboarding-visible');
-    }
-
-    showOnboarding(e: Event): void {
-        e.preventDefault();
-
-        // Check if new commenter as they may have already commented on this article
-        if (this.hasState('onboarding-visible') || !this.options.newCommenter) {
-            if (this.options.hasUsername) {
-                this.removeState('onboarding-visible');
-            }
-
-            this.postComment();
-        } else {
-            const onboardingAuthor = this.getElem('onboarding-author');
-            const onboardingUsername = this.getElem('onboarding-username');
-
-            if (onboardingAuthor) {
-                onboardingAuthor.innerHTML = this.getUserData().displayName;
-            }
-
-            this.setState('onboarding-visible');
-            this.previewComment('onboardingPreviewSuccess');
-
-            if (onboardingUsername && this.options.hasUsername) {
-                onboardingUsername.classList.add('is-hidden');
-            }
-        }
-    }
-
-    prerender(): void {
-        if (!this.options.premod) {
-            const premod = this.getElem('premod');
-
-            if (premod && premod.parentNode) {
-                premod.parentNode.removeChild(premod);
-            }
-        }
-
-        const userData = this.getUserData();
-
-        if (this.options.state === 'response') {
-            const submit = this.getElem('submit');
-
-            if (submit) {
-                submit.innerHTML = 'Post reply';
-            }
-        } else if (this.options.shouldRenderMainAvatar) {
-            const avatarWrapper = this.getElem('avatar-wrapper');
-
-            if (avatarWrapper) {
-                avatarWrapper.setAttribute('userid', userData.id);
-                avatarWrapper.setAttribute('data-userid', userData.id);
-                avatarify(avatarWrapper);
-            }
-        } else {
-            const container = document.getElementsByClassName(
-                'd-comment-box__meta'
-            )[0];
-
-            if (container && container.parentNode) {
-                container.parentNode.removeChild(container);
-            }
-        }
-
-        if (this.options.replyTo) {
-            const replyToAuthor = this.getElem('reply-to-author');
-            const parentCommentBody = this.getElem('parent-comment-body');
-            const parentCommentAuthor = this.getElem('parent-comment-author');
-            const { author, timestamp, body } = this.options.replyTo || {};
-
-            if (replyToAuthor && author) {
-                replyToAuthor.innerHTML = author;
-            }
-
-            if (parentCommentAuthor && author && timestamp) {
-                parentCommentAuthor.innerHTML = `${author} @ ${timestamp} said:`;
-            }
-
-            if (parentCommentBody && body) {
-                parentCommentBody.innerHTML = body;
-            }
-
-            const setSpoutMargin = () => {
-                const parentCommentSpout = this.getElem('parent-comment-spout');
-                const spoutOffset = replyToAuthor
-                    ? replyToAuthor.offsetLeft +
-                      replyToAuthor.getBoundingClientRect().width / 2
-                    : false;
-
-                if (parentCommentSpout && spoutOffset) {
-                    parentCommentSpout.style.marginLeft = `${spoutOffset}px`;
-                }
-            };
-
-            window.setTimeout(() => setSpoutMargin(), 0);
-        }
-    }
-
-    verificationEmailSuccess(): void {
-        this.clearErrors();
-        this.error('EMAIL_VERIFIED');
-    }
-
-    verificationEmailFail(): void {
-        this.clearErrors();
-        this.error('EMAIL_VERIFIED_FAIL');
-    }
-
-    previewComment(methodName: string): void {
-        const body = ((this.getElem('body'): any): HTMLInputElement);
-        const comment: commentType = {
-            body: body.value,
-        };
-        // $FlowFixMe
-        const callback = this[methodName].bind(this);
-
-        this.clearErrors();
-
-        if (comment.body === '') {
-            this.resetPreviewComment();
-            this.error('EMPTY_COMMENT_BODY');
-        }
-
-        if (
-            comment &&
-            comment.body &&
-            comment.body.length > this.options.maxLength
-        ) {
-            const charDiff = comment.body.length - this.options.maxLength;
-            const errorMessage = `
-                <b>Comments must be shorter than
-                ${this.options.maxLength} characters</b>. Yours is currently
-                ${charDiff} characters too long.`;
-
-            this.error('COMMENT_TOO_LONG', errorMessage);
-        }
-
-        if (this.errors.length === 0) {
-            previewComment(comment)
-                .then((resp: Object) => callback(comment, resp))
-                .catch((err: Object) => this.fail(err));
-        }
-    }
-
-    cancelComment(): void {
-        if (this.options.state === 'response') {
-            this.destroy();
-        } else {
-            const body = ((this.getElem('body'): any): HTMLInputElement);
-
-            this.resetPreviewComment();
-            body.value = '';
-            this.setFormState();
-            this.removeState('expanded');
-        }
-    }
-
-    resetPreviewComment(): void {
-        const previewBody = this.getElem('preview-body');
-
-        this.removeState('preview-visible');
-
-        if (previewBody) {
-            previewBody.innerHTML = '';
-        }
-    }
-
-    formatComment(formatStyle: string): void {
-        const commentBody = ((this.getElem('body'): any): HTMLInputElement);
-        const cursorPositionStart = commentBody.selectionStart;
-        let selectedText = commentBody.value.substring(
-            commentBody.selectionStart,
-            commentBody.selectionEnd
-        );
-
-        const selectNewText = (newText: string): void => {
-            commentBody.setSelectionRange(
-                cursorPositionStart,
-                cursorPositionStart + newText.length
-            );
-        };
-
-        const formatSelection = (startTag: string, endTag: string): void => {
-            const newText = startTag + selectedText + endTag;
-
-            commentBody.value =
-                commentBody.value.substring(0, commentBody.selectionStart) +
-                newText +
-                commentBody.value.substring(commentBody.selectionEnd);
-
-            selectNewText(newText);
-        };
-
-        const formatSelectionLink = (): void => {
-            let href;
-            let linkURL;
-
-            if (/^https?:\/\//i.test(selectedText)) {
-                href = selectedText;
-            } else {
-                // eslint-disable-next-line no-alert
-                linkURL = window.prompt('Your URL:', 'http://www.');
-                href = linkURL;
-
-                selectedText = selectedText || linkURL;
-            }
-
-            const newText = `<a href="${href}">${selectedText}</a>`;
-
-            commentBody.value =
-                commentBody.value.substring(0, commentBody.selectionStart) +
-                newText +
-                commentBody.value.substring(commentBody.selectionEnd);
-        };
-
-        // eslint-disable-next-line default-case
-        switch (formatStyle) {
-            case 'bold':
-                formatSelection('<b>', '</b>');
-                break;
-            case 'italic':
-                formatSelection('<i>', '</i>');
-                break;
-            case 'quote':
-                formatSelection('<blockquote>', '</blockquote>');
-                break;
-            case 'link':
-                formatSelectionLink();
-                break;
-        }
-    }
-}
-
-export { CommentBox };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-box.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-box.spec.js
deleted file mode 100644
index 2fd79035e17..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-box.spec.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/comment-box.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { CommentBox } from 'common/modules/discussion/comment-box';
-import { getUserFromApiWithRefreshedCookie as getUserFromApiWithRefreshedCookie_ } from 'common/modules/identity/api';
-import { postComment as postComment_ } from 'common/modules/discussion/api';
-
-jest.mock('lib/config', () => ({
-    get: jest.fn(() => 'https://manage.thegulocal.com'),
-}));
-jest.mock('lib/mediator');
-jest.mock('common/modules/discussion/user-avatars', () => ({
-    avatarify() {},
-}));
-jest.mock('common/modules/identity/api', () => ({
-    getUserFromCookie: jest.fn().mockReturnValue({
-        displayName: 'testy',
-        id: 1,
-        accountCreatedDate: new Date(1392719401338),
-    }),
-    getUserFromApiWithRefreshedCookie: jest.fn().mockReturnValue(
-        Promise.resolve({
-            user: {
-                statusFields: {
-                    userEmailValidated: true,
-                },
-            },
-        })
-    ),
-    reset: jest.fn(),
-}));
-jest.mock('common/modules/discussion/api', () => ({
-    postComment: jest.fn(),
-}));
-
-const getUserFromApiWithRefreshedCookie: JestMockFn<
-    *,
-    *
-> = (getUserFromApiWithRefreshedCookie_: any);
-const postComment: JestMockFn<*, *> = (postComment_: any);
-
-describe('Comment box', () => {
-    const discussionId = '/p/3ht42';
-    const maxCommentLength = 2500;
-    const validCommentText =
-        "'I don't know what you mean,' said Alice.\n\n" +
-        "'Of course you don't!' the Hatter said, tossing his head contemptuously. 'I dare say you never even spoke to Time!'\n\n" +
-        "'Perhaps not,' Alice cautiously replied: 'but I know I have to beat time when I learn music.'";
-    const apiPostValidCommentResp =
-        '{"status": "ok", "message": "27388163", "statusCode": 200}';
-    const apiPostValidCommentButDiscussionClosed =
-        '{"status":"error", "statusCode": 409, "message":"Discussion closed", "errorCode": "DISCUSSION_CLOSED"}';
-    const apiPostValidCommentButReadOnlyMode =
-        '{"status":"error", "statusCode": 503, "message":"Commenting is undergoing maintenance but will be back again shortly.", "errorCode": "READ-ONLY-MODE"}';
-    const apiPostValidCommentButIdentityUsernameMissing =
-        '{"status":"error","statusCode":400,"message":"Username is missing","errorCode":"USERNAME_MISSING"}';
-    let commentBox;
-    let commentBoxEl;
-
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-                <form class="component js-comment-box d-comment-box">
-                <label for="body" class="d-comment-box__add-comment cta">Add your comment</label>
-                <div class="d-comment-box__meta">
-                <span class="d-comment-box__avatar-wrapper">
-                </span>
-                <div class="d-comment-box__meta-text">
-                <span class="d-comment-box__author"></span>
-                <span class="i i-reply-grey"></span>
-                <span class="d-comment-box__reply-to-author"></span>
-                <span class="u-fauxlink d-comment-box__show-parent" role="button">Show comment</span>
-                <span class="u-fauxlink d-comment-box__hide-parent" role="button">Hide comment</span>
-                </div>
-                </div>
-                <div class="d-comment-box__parent-comment-wrapper">
-                <div class="d-comment-box__parent-comment-spout"></div>
-                <div class="d-comment-box__parent-comment">
-                <span class="d-comment-box__parent-comment-author"></span>
-                <div class="d-comment-box__parent-comment-body"></div>
-                <span class="u-fauxlink d-comment-box__hide-parent" role="button">Hide comment</span>
-                </div>
-                </div>
-                <div class="d-comment-box__content">
-                <div class="d-comment-box__messages"></div>
-                <div class="d-comment-box__error d-comment-box__premod">Your comments are currently being pre-moderated (<a href="/community-faqs#311" target="_blank">why?</a>)</div>
-                <textarea name="body" class="textarea d-comment-box__body" placeholder="Join the discussion…"></textarea>
-                <button type="submit" class="submit-input d-comment-box__submit">Post comment</button>
-                </div>
-                <div class="d-comment-box__preview-wrapper">
-                <div class="d-comment-box__preview-body"></div>
-                <button type="submit" class="submit-input d-comment-box__submit d-comment-box__preview-submit">Post your comment</button>
-                </div>
-                </form>
-            `;
-        }
-
-        commentBox = new CommentBox({
-            discussionId,
-            maxLength: maxCommentLength,
-            switches: {},
-        });
-
-        commentBoxEl = document.querySelector('.d-comment-box');
-
-        if (commentBoxEl) {
-            commentBox.attachTo(commentBoxEl);
-        }
-    });
-
-    describe('Post comment', () => {
-        it('should only disable button when there is no comment body', () => {
-            const button = commentBox.getElem('submit');
-            const commentBody = commentBox.getElem('body');
-
-            if (
-                commentBody &&
-                commentBody instanceof HTMLTextAreaElement &&
-                button
-            ) {
-                commentBody.value = '';
-                commentBox.setFormState();
-                expect(button.getAttribute('disabled')).toBe('disabled');
-
-                commentBody.value = 'Hello';
-                commentBox.setFormState();
-                expect(button.getAttribute('disabled')).toBeNull();
-
-                commentBody.value = '';
-                commentBox.setFormState();
-                expect(button.getAttribute('disabled')).toBe('disabled');
-            }
-        });
-
-        it('should error on empty comments', () => {
-            const commentBody = commentBox.getElem('body');
-
-            expect(commentBox.getElem('error')).toBeUndefined();
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                commentBody.value = '';
-
-                return commentBox.postComment().then(() => {
-                    expect(commentBox.getElem('error')).not.toBeUndefined();
-                });
-            }
-        });
-
-        it(`should error on comments over ${maxCommentLength} characters`, () => {
-            const commentBody = commentBox.getElem('body');
-
-            expect(commentBox.getElem('error')).toBeUndefined();
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                for (let i = 0, len = maxCommentLength; i <= len; i += 1) {
-                    commentBody.value = `${commentBody.value}j`;
-                }
-                return commentBox.postComment().then(() => {
-                    expect(commentBox.getElem('error')).not.toBeUndefined();
-                });
-            }
-        });
-
-        it('should error on invalid email address', () => {
-            const commentBody = commentBox.getElem('body');
-
-            expect(commentBox.getElem('error')).toBeUndefined();
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                commentBody.value = validCommentText;
-
-                getUserFromApiWithRefreshedCookie.mockReturnValueOnce(
-                    Promise.resolve({
-                        user: {
-                            statusFields: {
-                                userEmailValidated: false,
-                            },
-                        },
-                    })
-                );
-
-                return commentBox.postComment().then(() => {
-                    expect(commentBox.getElem('error')).not.toBeUndefined();
-                });
-            }
-        });
-
-        it('should error on discussion closed', () => {
-            const commentBody = commentBox.getElem('body');
-
-            expect(commentBox.getElem('error')).toBeUndefined();
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                commentBody.value = validCommentText;
-
-                postComment.mockReturnValueOnce(
-                    // eslint-disable-next-line prefer-promise-reject-errors
-                    Promise.reject({
-                        responseText: apiPostValidCommentButDiscussionClosed,
-                        status: 409,
-                    })
-                );
-
-                return commentBox.postComment().then(() => {
-                    expect(commentBox.getElem('error')).not.toBeUndefined();
-                });
-            }
-        });
-
-        it('should error on read only mode', () => {
-            const commentBody = commentBox.getElem('body');
-
-            expect(commentBox.getElem('error')).toBeUndefined();
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                commentBody.value = validCommentText;
-
-                postComment.mockReturnValueOnce(
-                    // eslint-disable-next-line prefer-promise-reject-errors
-                    Promise.reject({
-                        responseText: apiPostValidCommentButReadOnlyMode,
-                        status: 503,
-                    })
-                );
-
-                return commentBox.postComment().then(() => {
-                    expect(commentBox.getElem('error')).not.toBeUndefined();
-                });
-            }
-        });
-
-        it('should send a success message to the user when comment is valid', () => {
-            const commentBody = commentBox.getElem('body');
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                commentBody.value = validCommentText;
-
-                postComment.mockReturnValueOnce(
-                    Promise.resolve(JSON.parse(apiPostValidCommentResp))
-                );
-
-                return commentBox.postComment().then(comment => {
-                    expect(JSON.stringify(comment.id)).toEqual(
-                        JSON.parse(apiPostValidCommentResp).message
-                    );
-                });
-            }
-        });
-
-        it('should error on identity username missing', () => {
-            const commentBody = commentBox.getElem('body');
-
-            expect(commentBox.getElem('error')).toBeUndefined();
-
-            if (commentBody && commentBody instanceof HTMLTextAreaElement) {
-                commentBody.value = validCommentText;
-
-                postComment.mockReturnValueOnce(
-                    // eslint-disable-next-line prefer-promise-reject-errors
-                    Promise.reject({
-                        responseText: apiPostValidCommentButIdentityUsernameMissing,
-                        status: 400,
-                    })
-                );
-
-                return commentBox.postComment().then(() => {
-                    expect(commentBox.getElem('error')).not.toBeUndefined();
-                });
-            }
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-count.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-count.js
deleted file mode 100644
index d72d5c66717..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-count.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/comment-count.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import fetchJSON from 'lib/fetch-json';
-import { integerCommas } from 'lib/formatters';
-import mediator from 'lib/mediator';
-import { inlineSvg } from 'common/views/svgs';
-
-type IndexedElements = { string: Array<HTMLElement> };
-
-const ATTRIBUTE_NAME: string = 'data-discussion-id';
-const COUNT_URL: string = '/discussion/comment-counts.json?shortUrls=';
-
-const getTemplate = (
-    vals: { url: string, icon: string, count: string },
-    type: string
-): string => {
-    const { url, icon, count } = vals;
-
-    if (type === 'content') {
-        return `<a href="${url}" data-link-name="Comment count" class="commentcount2 tone-colour" aria-label="${count} comments">
-                    <h3 class="commentcount2__heading">${icon} <span class ="commentcount2__text u-h">Comments</span></h3>
-                    <span class="commentcount2__value tone-colour js_commentcount_actualvalue">${count}</span>
-                </a>`;
-    }
-
-    return `<a class="fc-trail__count fc-trail__count--commentcount" href="${url}" data-link-name="Comment count" aria-label="${count} comments">${icon} ${count}</a>`;
-};
-
-const getElementsIndexedById = (context: HTMLElement): Promise<any> =>
-    fastdom
-        .measure(() => Array.from(context.querySelectorAll(`[${ATTRIBUTE_NAME}]`)))
-        .then(elements => {
-            if (elements.length === 0) {
-                return;
-            }
-
-            return elements.reduce(
-                (groupedVals: Object, el: HTMLElement): Object => {
-                    const attrVal = el.getAttribute(ATTRIBUTE_NAME);
-
-                    if (!groupedVals[attrVal]) {
-                        groupedVals[attrVal] = [];
-                    }
-
-                    groupedVals[attrVal].push(el);
-
-                    return groupedVals;
-                },
-                {}
-            );
-        });
-
-const getContentIds = (indexedElements: IndexedElements): string =>
-    Object.keys(indexedElements)
-        .sort()
-        .join(',');
-
-const getContentUrl = (el: HTMLElement): string => {
-    const a = el.getElementsByTagName('a')[0];
-
-    return `${a ? a.pathname : ''}#comments`;
-};
-
-const updateElement = (el: HTMLElement, count: number): Promise<void> => {
-    const url = el.dataset.discussionUrl || getContentUrl(el);
-
-    if (el.dataset.discussionClosed === 'true' && count === 0) {
-        // Discussion is closed and had no comments, we don't want to show a comment count
-        return Promise.resolve();
-    }
-
-    const format = el.dataset.commentcountFormat || '';
-    const html = getTemplate(
-        {
-            url,
-            icon: inlineSvg('commentCount16icon', ['inline-tone-fill']),
-            count: integerCommas(count, true) || '',
-        },
-        format
-    );
-    const meta = Array.from(el.getElementsByClassName('js-item__meta'));
-    const containers = meta.length ? meta : [el];
-
-    return fastdom.mutate(() => {
-        containers.forEach(container => {
-            container.insertAdjacentHTML('beforeend', html);
-        });
-        el.removeAttribute(ATTRIBUTE_NAME);
-        el.classList.remove('u-h');
-    });
-};
-
-const renderCounts = (
-    counts: Array<{ id: string, count: number }>,
-    indexedElements: IndexedElements
-): Promise<any> => {
-    const elementUpdates = counts.map(c =>
-        indexedElements[c.id].map(el => updateElement(el, c.count))
-    );
-
-    return Promise.all(elementUpdates);
-};
-
-const getCommentCounts = (context?: HTMLElement): Promise<void> => {
-    const queryContext: ?HTMLElement = context || document.body;
-
-    if (queryContext) {
-        return getElementsIndexedById(queryContext).then(indexedElements => {
-            if (!indexedElements) {
-                return;
-            }
-
-            const endpoint = `${COUNT_URL}${getContentIds(indexedElements)}`;
-
-            return fetchJSON(endpoint, {
-                mode: 'cors',
-            }).then(response => {
-                if (response && response.counts) {
-                    return renderCounts(response.counts, indexedElements);
-                }
-            });
-        });
-    }
-
-    return Promise.resolve();
-};
-
-export const initCommentCount = (): Promise<void> => {
-    mediator.on('modules:related:loaded', getCommentCounts);
-
-    return getCommentCounts();
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-count.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-count.spec.js
deleted file mode 100644
index 3f381e4552f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comment-count.spec.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/comment-count.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fetchJson from 'lib/fetch-json';
-import { initCommentCount } from './comment-count';
-
-jest.mock('lib/fastdom-promise');
-
-jest.mock('lib/fetch-json', () =>
-    jest.fn(() =>
-        Promise.resolve({
-            counts: [
-                { id: '/p/3ghkT', count: 0 },
-                { id: '/p/3ghv5', count: 100 },
-                { id: '/p/3ghx3', count: 200 },
-                { id: '/p/3gh4n', count: 300 },
-                { id: '/p/3ghNp', count: 400 },
-            ],
-        })
-    )
-);
-
-const fetchJsonSpy: any = fetchJson;
-
-// TODO: Investigate why these sometimes fails and re-enable
-describe.skip('Comment Count', () => {
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `<div class="comment-trails">
-                <div class="trail" data-discussion-closed="true" data-discussion-id="/p/3ghkT"><a href="/article/1">1</a></div>
-                <div class="trail" data-discussion-id="/p/3ghv5"><a href="/article/1">1</a></div>
-                <div class="trail" data-discussion-id="/p/3ghx3"><a href="/article/2">1</a></div>
-                <div class="trail" data-discussion-id="/p/3gh4n"><a href="/article/3">1</a></div>
-                <div class="trail" data-discussion-id="/p/3ghv5"><a href="/article/4">4</a></div>
-                <div class="trail" data-commentcount-format="content" data-discussion-id="/p/3ghNp"><a href="/article/3">1</a></div>
-            </div>`;
-        }
-    });
-
-    afterEach(() => {
-        expect(fetchJsonSpy).toHaveBeenCalled();
-        expect(fetchJsonSpy).toHaveBeenCalledWith(
-            '/discussion/comment-counts.json?shortUrls=/p/3gh4n,/p/3ghNp,/p/3ghkT,/p/3ghv5,/p/3ghx3',
-            { mode: 'cors' }
-        );
-    });
-
-    test('should append comment counts to DOM for open discussions only', () =>
-        initCommentCount().then(() => {
-            expect(
-                document.querySelectorAll(
-                    '.fc-trail__count--commentcount, .commentcount2'
-                ).length
-            ).toBe(5);
-        }));
-
-    test('should append "default" format comment counts to DOM', () =>
-        initCommentCount().then(() => {
-            expect(
-                document.getElementsByClassName('fc-trail__count--commentcount')
-                    .length
-            ).toBe(4);
-        }));
-
-    test('should append "content" format comment counts to DOM', () =>
-        initCommentCount().then(() => {
-            const contentCommentCounts = document.getElementsByClassName(
-                'commentcount2__value'
-            );
-
-            expect(contentCommentCounts.length).toBe(1);
-
-            expect(contentCommentCounts[0].innerHTML).toBe('400');
-        }));
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comments.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/comments.js
deleted file mode 100644
index ceb386feb8c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/comments.js
+++ /dev/null
@@ -1,639 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/comments.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import bean from 'bean';
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import mediator from 'lib/mediator';
-import reportError from 'lib/report-error';
-import { constructQuery } from 'lib/url';
-import { Component } from 'common/modules/component';
-import {
-    reportComment,
-    pickComment,
-    unPickComment,
-} from 'common/modules/discussion/api';
-import { CommentBox } from 'common/modules/discussion/comment-box';
-import { WholeDiscussion } from 'common/modules/discussion/whole-discussion';
-import { init as initRelativeDates } from 'common/modules/ui/relativedates';
-import userPrefs from 'common/modules/user-prefs';
-import { inlineSvg } from 'common/views/svgs';
-
-type CommentType = {
-    id: string,
-    body: string,
-};
-
-const PREF_RELATIVE_TIMESTAMPS: string = 'discussion.enableRelativeTimestamps';
-
-const shouldMakeTimestampsRelative = (): boolean =>
-    userPrefs.get(PREF_RELATIVE_TIMESTAMPS) !== null
-        ? userPrefs.get(PREF_RELATIVE_TIMESTAMPS)
-        : true;
-
-class Comments extends Component {
-    constructor(options: Object): void {
-        super();
-
-        this.componentClass = 'd-comments';
-        this.comments = null;
-        this.topLevelComments = null;
-        this.user = null;
-        this.classes = {
-            comments: 'd-thread--top-level',
-            topLevelComment: 'd-comment--top-level',
-            reply: 'd-comment--response',
-            showReplies: 'd-show-more-replies',
-            showRepliesButton: 'd-show-more-replies__button',
-            newComments: 'js-new-comments',
-            comment: 'd-comment',
-            commentReply: 'd-comment__action--reply',
-            commentPick: 'd-comment__action--pick',
-            commentStaff: 'd-comment--staff',
-            commentBody: 'd-comment__body',
-            commentTimestampJs: 'js-timestamp',
-            commentReport: 'js-report-comment',
-        };
-        this.defaultOptions = {
-            discussionId: null,
-            showRepliesCount: 3,
-            commentId: null,
-            order: 'newest',
-            threading: 'collapsed',
-        };
-
-        this.setOptions(options);
-    }
-
-    getMoreReplies(event: Event): void {
-        event.preventDefault();
-
-        const target: HTMLElement = (event.target: any);
-        const currentTarget: HTMLElement = (event.currentTarget: any);
-        const li = currentTarget.closest(this.getClass('showReplies'));
-
-        if (li) {
-            li.innerHTML = 'Loading…';
-        }
-
-        const source = bonzo(target).data('source-comment');
-        const commentId = currentTarget.getAttribute('data-comment-id');
-
-        if (commentId) {
-            const endpoint = `/discussion/comment/${commentId}.json?displayThreaded=true`;
-
-            fetchJson(endpoint, {
-                mode: 'cors',
-            })
-                .then(resp => {
-                    const comment = bonzo.create(resp.html);
-                    const replies = qwery(
-                        this.getClass('reply'),
-                        comment
-                    ).slice(this.options && this.options.showRepliesCount);
-
-                    bonzo(qwery('.d-thread--responses', source)).append(
-                        replies
-                    );
-                    bonzo(li).addClass('u-h');
-
-                    this.emit('untruncate-thread');
-
-                    if (shouldMakeTimestampsRelative()) {
-                        this.relativeDates();
-                    }
-                })
-                .catch(ex => {
-                    reportError(ex, {
-                        feature: 'comments-more-replies',
-                    });
-                });
-        }
-    }
-
-    comments: ?Comments;
-    topLevelComments: ?qwery;
-    user: ?DiscussionProfile;
-    postedCommentEl: ?string;
-    wholeDiscussionErrors: ?boolean;
-
-    addMoreRepliesButtons(comms: Array<HTMLElement>): void {
-        const comments = comms || this.topLevelComments;
-
-        comments.forEach(elem => {
-            const replies = parseInt(
-                elem.getAttribute('data-comment-replies'),
-                10
-            );
-            const renderedReplies = qwery(this.getClass('reply'), elem);
-
-            if (renderedReplies.length < replies) {
-                const numHiddenReplies = replies - renderedReplies.length;
-                const plusIcon = inlineSvg('plus', ['icon']);
-                const repliesStr = numHiddenReplies === 1 ? 'reply' : 'replies';
-                const btnMarkup = `
-                    <button class="u-button-reset button button--show-more button--small button--tone-news d-show-more-replies__button">
-                        ${plusIcon}Show ${numHiddenReplies} more ${repliesStr}
-                    </button>`;
-                const $btn = $.create(btnMarkup)
-                    .attr({
-                        'data-link-name': 'Show more replies',
-                        'data-is-ajax': '',
-                        'data-comment-id': elem.getAttribute('data-comment-id'),
-                    })
-                    .data('source-comment', elem);
-
-                $.create(
-                    `<li class="${this.getClass('showReplies', true)}"></li>`
-                )
-                    .append($btn)
-                    .appendTo($('.d-thread--responses', elem));
-            }
-        });
-    }
-
-    fetchComments(options: Object = {}): Promise<mixed> {
-        const { discussionId } = this.options || {};
-        const url = `/discussion/${
-            options.comment
-                ? `comment-context/${options.comment}`
-                : discussionId
-        }.json`;
-        let orderBy = options.order || (this.options && this.options.order);
-        let promise;
-        const ajaxParams = { mode: 'cors' };
-
-        if (orderBy === 'recommendations') {
-            orderBy = 'mostRecommended';
-        }
-
-        const queryParams: Object = {
-            orderBy,
-            pageSize:
-                options.pagesize || (this.options && this.options.pagesize),
-            displayThreaded: !!(
-                this.options && this.options.threading !== 'unthreaded'
-            ),
-            commentsClosed: options.commentsClosed,
-        };
-
-        if (options.page) {
-            queryParams.page = options.page;
-        }
-
-        if (
-            !options.comment &&
-            this.options &&
-            this.options.threading === 'collapsed'
-        ) {
-            queryParams.maxResponses = 3;
-        }
-
-        if (this.isAllPageSizeActive()) {
-            promise = new WholeDiscussion({
-                discussionId: this.options && this.options.discussionId,
-                orderBy: queryParams.orderBy,
-                displayThreaded: queryParams.displayThreaded,
-                maxResponses: queryParams.maxResponses,
-                commentsClosed: queryParams.commentsClosed,
-            })
-                .loadAllComments()
-                .catch(() => {
-                    this.wholeDiscussionErrors = true;
-                    queryParams.pageSize = 100;
-
-                    return fetchJson(
-                        `${url}?${constructQuery(queryParams)}`,
-                        ajaxParams
-                    );
-                });
-        } else {
-            // It is possible that the user has chosen to view all comments,
-            // but the WholeDiscussion module has failed. Fall back to 100 comments.
-            if (queryParams.pageSize === 'All') {
-                queryParams.pageSize = 100;
-            }
-
-            promise = fetchJson(
-                `${url}?${constructQuery(queryParams)}`,
-                ajaxParams
-            );
-        }
-
-        return promise.then(resp => this.renderComments(resp));
-    }
-
-    handlePickClick(e: Event): void {
-        e.preventDefault();
-
-        const target: HTMLElement = (e.target: any);
-        const commentId = target.getAttribute('data-comment-id');
-        const $thisButton = $(target);
-        const highlighted = $thisButton[0].getAttribute(
-            'data-comment-highlighted'
-        );
-        const action =
-            highlighted === 'true' ? this.unPickComment : this.pickComment;
-
-        if (commentId) {
-            action.call(this, commentId, $thisButton).catch(resp => {
-                const responseText =
-                    resp.response.length > 0
-                        ? JSON.parse(resp.response).message
-                        : resp.statusText;
-
-                $thisButton.text(responseText);
-            });
-        }
-    }
-
-    pickComment(commentId: string, $thisButton: bonzo): Promise<void> {
-        const comment = qwery(`#comment-${commentId}`, this.elem);
-
-        return pickComment(commentId).then(() => {
-            $(this.getClass('commentPick'), comment).removeClass('u-h');
-            $thisButton.text('Unpick');
-            comment.setAttribute('data-comment-highlighted', true);
-        });
-    }
-
-    ready(): void {
-        this.topLevelComments = qwery(
-            this.getClass('topLevelComment'),
-            this.elem
-        );
-        this.comments = qwery(this.getClass('comment'), this.elem);
-
-        this.on('click', this.getClass('showRepliesButton'), (event: Event) =>
-            this.getMoreReplies(event)
-        );
-
-        this.on('click', this.getClass('commentReport'), (event: Event) =>
-            this.reportComment(event)
-        );
-
-        if (shouldMakeTimestampsRelative()) {
-            window.setInterval(() => this.relativeDates(), 60000);
-            this.relativeDates();
-        }
-
-        this.emit('ready');
-
-        this.on('click', '.js-report-comment-close', () => {
-            const commentForm = document.querySelector(
-                '.js-report-comment-form'
-            );
-
-            if (commentForm) {
-                commentForm.setAttribute('hidden', '');
-            }
-        });
-    }
-
-    showHiddenComments(e?: Event): void {
-        if (e) {
-            e.preventDefault();
-        }
-
-        this.emit('first-load');
-
-        $('.js-discussion-main-comments').css('display', 'block');
-
-        if (shouldMakeTimestampsRelative()) {
-            this.relativeDates();
-        }
-    }
-
-    unPickComment(commentId: string, $thisButton: bonzo): Promise<void> {
-        const comment = qwery(`#comment-${commentId}`);
-
-        return unPickComment(commentId).then(() => {
-            $(this.getClass('commentPick'), comment).addClass('u-h');
-            $thisButton.text('Pick');
-            comment.setAttribute('data-comment-highlighted', false);
-        });
-    }
-
-    isReadOnly(): boolean {
-        return !!(
-            this.elem &&
-            this.elem instanceof HTMLElement &&
-            this.elem.getAttribute('data-read-only') === 'true'
-        );
-    }
-
-    addComment(comment: CommentType, parent?: HTMLElement): void {
-        const commentElem = bonzo.create(this.postedCommentEl)[0];
-        const $commentElem = bonzo(commentElem);
-        const replyButton =
-            commentElem &&
-            commentElem.getElementsByClassName(
-                this.getClass('commentReply', true)
-            )[0];
-        const map: Object = {
-            username: 'd-comment__author',
-            timestamp: 'js-timestamp',
-            body: 'd-comment__body',
-            report: 'd-comment__action--report',
-            avatar: 'd-comment__avatar',
-        };
-        const vals: Object = {
-            username: this.user && this.user.displayName,
-            timestamp: 'Just now',
-            body: `<p>${comment.body.replace(/\n+/g, '</p><p>')}</p>`,
-            report: {
-                href: `http://discussion.theguardian.com/components/report-abuse/${
-                    comment.id
-                }`,
-            },
-            avatar: {
-                src: this.user && this.user.avatar,
-            },
-        };
-
-        $commentElem.addClass('d-comment--new');
-
-        Object.keys(map).forEach(key => {
-            const selector = map[key];
-            const val = vals[key];
-            const elem = qwery(`.${selector}`, commentElem)[0];
-
-            if (typeof val === 'string') {
-                elem.innerHTML = val;
-            } else if (typeof val === 'object') {
-                Object.keys(val).forEach(attr => {
-                    elem.setAttribute(attr, val[attr]);
-                });
-            }
-        });
-
-        commentElem.id = `comment-${comment.id}`;
-
-        if (this.user && !this.user.isStaff) {
-            $commentElem.addClass(this.getClass('commentStaff', true));
-        }
-
-        if (replyButton) {
-            replyButton.setAttribute('data-comment-id', comment.id);
-        }
-
-        if (!parent) {
-            $(this.getClass('newComments'), this.elem).prepend(commentElem);
-        } else {
-            $commentElem.removeClass(this.getClass('topLevelComment', true));
-            $commentElem.addClass(this.getClass('reply', true));
-            bonzo(parent).append($commentElem);
-        }
-
-        window.location.replace(`#comment-${comment.id}`);
-    }
-
-    replyToComment(e: Event): void {
-        e.preventDefault();
-
-        const replyLink: HTMLElement = (e.currentTarget: any);
-        const replyToId = replyLink.getAttribute('data-comment-id');
-
-        if (!replyToId) {
-            return;
-        }
-
-        const replyTo = document.getElementById(`reply-to-${replyToId}`);
-
-        // There is already a comment box for this on the page
-        if (replyTo) {
-            replyTo.focus();
-            return;
-        }
-
-        $('.d-comment-box--response').remove();
-
-        const replyToComment = qwery(`#comment-${replyToId}`)[0];
-        const replyToAuthor = replyToComment.getAttribute(
-            'data-comment-author'
-        );
-        const replyToAuthorId = replyToComment.getAttribute(
-            'data-comment-author-id'
-        );
-        const $replyToComment = bonzo(replyToComment);
-        const replyToBody = qwery(
-            this.getClass('commentBody'),
-            replyToComment
-        )[0].innerHTML;
-        const replyToTimestamp = qwery(
-            this.getClass('commentTimestampJs'),
-            replyToComment
-        )[0].innerHTML;
-        const commentBox = new CommentBox({
-            discussionId: this.options && this.options.discussionId,
-            premod:
-                this.user &&
-                this.user.privateFields &&
-                this.user.privateFields.isPremoderated,
-            state: 'response',
-            replyTo: {
-                commentId: replyToId,
-                author: replyToAuthor,
-                authorId: replyToAuthorId,
-                body: replyToBody,
-                timestamp: replyToTimestamp,
-            },
-            focus: true,
-        });
-
-        // this is a bit toffee, but we don't have .parents() in bonzo
-        const parentCommentEl = $replyToComment.hasClass(
-            this.getClass('topLevelComment', true)
-        )
-            ? $replyToComment[0]
-            : $replyToComment.parent().parent()[0];
-
-        const showRepliesElem = qwery(
-            this.getClass('showReplies'),
-            parentCommentEl
-        );
-
-        if (
-            showRepliesElem.length > 0 &&
-            !bonzo(showRepliesElem).hasClass('u-h')
-        ) {
-            showRepliesElem[0].click();
-        }
-
-        commentBox.render(parentCommentEl);
-
-        commentBox.on('post:success', (comment: CommentType) => {
-            let responses = qwery('.d-thread--responses', parentCommentEl)[0];
-
-            if (!responses) {
-                responses = bonzo.create(
-                    '<ul class="d-thread d-thread--responses"></ul>'
-                )[0];
-                bonzo(parentCommentEl).append(responses);
-            }
-
-            commentBox.destroy();
-            this.addComment(comment, responses);
-        });
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    reportComment(e: Event): void {
-        e.preventDefault();
-
-        const currentTarget: HTMLElement = (e.currentTarget: any);
-        const commentId = currentTarget.getAttribute('data-comment-id');
-        const submitHandler = (form: HTMLFormElement) => {
-            form.removeAttribute('hidden');
-
-            bean.one(form, 'submit', (submitEvent: Event) => {
-                submitEvent.preventDefault();
-                const category: HTMLInputElement = (form.querySelector(
-                    '[name="category"]'
-                ): any);
-                const comment: HTMLInputElement = (form.querySelector(
-                    '[name="comment"]'
-                ): any);
-                const reportCommentSuccess = (formEL: HTMLElement): void => {
-                    formEL.setAttribute('hidden', '');
-                };
-                const reportCommentFailure = (): void => {
-                    const commentClose = document.querySelector(
-                        '.d-report-comment__close'
-                    );
-                    const commentError = document.querySelector(
-                        '.js-discussion__report-comment-error'
-                    );
-
-                    if (commentError) {
-                        commentError.removeAttribute('hidden');
-                    }
-
-                    if (commentClose) {
-                        commentClose.classList.add(
-                            'd-report-comment__close--error'
-                        );
-                    }
-                };
-
-                if (commentId && category.value !== '0') {
-                    const email: HTMLInputElement = (form.querySelector(
-                        '[name="email"]'
-                    ): any);
-
-                    reportComment(commentId, {
-                        emailAddress: email.value,
-                        categoryId: category.value,
-                        reason: comment.value,
-                    })
-                        .then(() => reportCommentSuccess(form))
-                        .catch(() => reportCommentFailure());
-                }
-            });
-        };
-
-        if (commentId) {
-            const reportContainer = document.querySelector(
-                `#comment-${commentId} .js-report-comment-container`
-            );
-
-            $('.js-report-comment-form')
-                .first()
-                .each(submitHandler)
-                .appendTo(reportContainer);
-        }
-    }
-
-    addUser(user: DiscussionProfile): void {
-        this.user = user;
-
-        // Determine user staff status
-        if (this.user && this.user.badge) {
-            // $FlowFixMe
-            this.user.isStaff = this.user.badge.some(e => e.name === 'Staff');
-        }
-
-        if (!this.isReadOnly()) {
-            if (this.user && this.user.privateFields.canPostComment) {
-                // remove sign-in link
-                $(this.getClass('commentReply')).attr('href', '#');
-
-                this.on('click', this.getClass('commentReply'), event =>
-                    this.replyToComment(event)
-                );
-
-                this.on('click', this.getClass('commentPick'), event =>
-                    this.handlePickClick(event)
-                );
-            }
-        }
-
-        mediator.on('user:username:updated', newUsername => {
-            if (this.user) {
-                this.user.displayName = newUsername;
-            }
-        });
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    relativeDates(): void {
-        if (shouldMakeTimestampsRelative()) {
-            initRelativeDates();
-        }
-    }
-
-    isAllPageSizeActive(): boolean {
-        return !!(
-            config.get('switches.discussionAllPageSize') &&
-            (this.options && this.options.pagesize === 'All') &&
-            !this.wholeDiscussionErrors
-        );
-    }
-
-    // Similar to above, but tells the loader that the fallback size should be used.
-    shouldShowPageSizeMessage(): boolean {
-        return !!(
-            config.get('switches.discussionAllPageSize') &&
-            (this.options && this.options.pagesize === 'All') &&
-            this.wholeDiscussionErrors
-        );
-    }
-
-    renderComments(resp: {
-        commentsHtml: string,
-        paginationHtml: string,
-        postedCommentHtml: string,
-    }): void {
-        const contentEl = bonzo.create(resp.commentsHtml);
-        const comments = qwery(this.getClass('comment'), contentEl);
-
-        bonzo(this.elem)
-            .empty()
-            .append(contentEl);
-        this.addMoreRepliesButtons(comments);
-        this.postedCommentEl = resp.postedCommentHtml;
-
-        if (shouldMakeTimestampsRelative()) {
-            this.relativeDates();
-        }
-
-        this.emit('rendered', resp.paginationHtml);
-        mediator.emit('modules:comments:renderComments:rendered');
-    }
-}
-
-export { Comments };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/discussion-frontend.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/discussion-frontend.js
deleted file mode 100644
index 2cf1217fab4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/discussion-frontend.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/discussion-frontend.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import fastdom from 'fastdom';
-import { integerCommas } from 'lib/formatters';
-import { loadScript } from '@guardian/libs';
-import mediator from 'lib/mediator';
-import reportError from 'lib/report-error';
-import type { Loader } from './loader';
-
-const loadDiscussionFrontend = (
-    loader: Loader,
-    opts: Object
-): Promise<void> => {
-    const updateCommentCount = (element: HTMLElement, value: number): void => {
-        const formatted = integerCommas(value);
-
-        if (formatted) {
-            fastdom.mutate(() => {
-                element.textContent = formatted;
-            });
-        }
-    };
-
-    /* emitter is a different mediator instance than lib/mediator */
-    const onDiscussionFrontendLoad = (emitter: mediator): void => {
-        emitter.on('error', (feature, error) => {
-            reportError(error, { feature: `discussion-${feature}` }, false);
-        });
-
-        /* This event is emitted by a separate Preact comment count app, which is
-           located in https://github.com/guardian/discussion-frontend */
-        emitter.once(
-            'comment-count',
-            (value: number): void => {
-                if (value === 0) {
-                    loader.setState('empty');
-                } else {
-                    /* By the time discussion frontent loads, the number of comments
-                   might have changed. If there are other comment counts element
-                   in the page refresh their value. */
-                    const otherValues = Array.from(
-                        document.getElementsByClassName(
-                            'js_commentcount_actualvalue'
-                        )
-                    );
-
-                    otherValues.forEach(el => {
-                        updateCommentCount(el, value);
-                    });
-                }
-
-                mediator.emit('comments-count-loaded');
-            }
-        );
-    };
-
-    const error = (err: Error): void => {
-        reportError(err, { feature: 'discussion' });
-    };
-
-    const init = (frontend: (opts: Object) => Promise<any>): void => {
-        frontend(opts)
-            .then(onDiscussionFrontendLoad)
-            .catch(error);
-    };
-
-    /* - Inject the net module to work around the lack of a global fetch
-         It can be removed once all browsers have window.fetch
-       - Well, it turns out that fetchJson uses reqwest which sends X-Requested-With
-         which is not allowed by Access-Control-Allow-Headers, so don't use reqwest
-         until discussion API is fixed
-       - Once fixed, or a global fetch is available through a polyfill, one can
-         modify discussion-frontend to remove `fetch` polyfill and pass, if needed,
-         opts.net = { json: fetchJson } */
-
-    return loadScript(config.get('page.discussionFrontendUrl'))
-        .then(() => {
-            init(window.guardian.app.discussion);
-        })
-        .catch(error);
-};
-
-export { loadDiscussionFrontend };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/loader.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/loader.js
deleted file mode 100644
index b07960d9984..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/loader.js
+++ /dev/null
@@ -1,667 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/loader.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-import $ from 'lib/$';
-import raven from 'lib/raven';
-import config from 'lib/config';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { scrollToElement } from 'lib/scroller';
-import fastdom from 'lib/fastdom-promise';
-import fetchJson from 'lib/fetch-json';
-import { initDiscussionAnalytics } from 'common/modules/analytics/discussion';
-import { begin, end } from 'common/modules/analytics/register';
-import { Component } from 'common/modules/component';
-import { getUser } from 'common/modules/discussion/api';
-import { CommentBox } from 'common/modules/discussion/comment-box';
-import { Comments } from 'common/modules/discussion/comments';
-import { loadDiscussionFrontend } from 'common/modules/discussion/discussion-frontend';
-import {
-    handle as upvoteHandle,
-    closeTooltip as upvoteCloseTooltip,
-} from 'common/modules/discussion/upvote';
-import { getUserFromCookie, getUserFromApi } from 'common/modules/identity/api';
-import userPrefs from 'common/modules/user-prefs';
-
-class Loader extends Component {
-    constructor(): void {
-        super();
-
-        this.classes = {};
-        this.componentClass = 'discussion';
-        this.comments = null;
-        this.user = null;
-        this.username = null;
-
-        begin('discussion');
-    }
-
-    getUser(): void {
-        if (getUserFromCookie()) {
-            getUser().then(resp => {
-                this.user = resp.userProfile;
-
-                getUserFromApi(user => {
-                    if (user && user.publicFields.username) {
-                        this.username = user.publicFields.username;
-                    }
-
-                    this.emit('user:loaded');
-                });
-            });
-        } else {
-            this.emit('user:loaded');
-        }
-    }
-
-    getDiscussionId(): ?string {
-        if (this.elem && this.elem instanceof HTMLElement) {
-            return this.elem.getAttribute('data-discussion-key');
-        }
-
-        return undefined;
-    }
-
-    getDiscussionClosed(): boolean {
-        return !!(
-            this.elem &&
-            this.elem instanceof HTMLElement &&
-            this.elem.getAttribute('data-discussion-closed') === 'true'
-        );
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    getCommentIdFromHash(): ?number {
-        const reg = /#comment-(\d+)/;
-        const matches = reg.exec(window.location.hash);
-
-        return matches ? parseInt(matches[1], 10) : null;
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    setCommentHash(id: string): void {
-        window.location.replace(`#comment-${id}`);
-    }
-
-    $topCommentsContainer: bonzo;
-    comments: ?Comments;
-    topCommentCount: number;
-    user: ?DiscussionProfile;
-    username: ?string;
-
-    commentPosted(comment: Object): void {
-        this.removeState('truncated');
-
-        if (this.comments) {
-            this.comments.addComment(comment);
-        }
-    }
-
-    initState(): void {
-        if (this.getDiscussionClosed()) {
-            this.setState('closed');
-        } else if (this.comments && this.comments.isReadOnly()) {
-            this.setState('readonly');
-        } else if (getUserFromCookie()) {
-            if (
-                this.user &&
-                this.user.privateFields &&
-                !this.user.privateFields.canPostComment
-            ) {
-                this.setState('banned');
-            } else {
-                this.setState('open');
-            }
-        } else {
-            this.setState('open');
-        }
-    }
-
-    isCommentable(): boolean {
-        // not readonly, not closed and user is signed in
-        const userCanPost =
-            this.user &&
-            this.user.privateFields &&
-            this.user.privateFields.canPostComment;
-
-        const commentsReadOnly = this.comments && !this.comments.isReadOnly();
-
-        return !!(
-            userCanPost &&
-            commentsReadOnly &&
-            !this.getDiscussionClosed()
-        );
-    }
-
-    ready(): void {
-        this.$topCommentsContainer = $('.js-discussion-top-comments');
-
-        this.initTopComments();
-        this.initMainComments();
-        this.initToolbar();
-        this.renderCommentCount();
-        this.initPagination();
-        this.initRecommend();
-
-        initDiscussionAnalytics();
-
-        // More for analytics than anything
-        if (window.location.hash === '#comments') {
-            mediator.emit('discussion:seen:comments-anchor');
-        } else if (this.getCommentIdFromHash()) {
-            mediator.emit('discussion:seen:comment-permalink');
-        }
-
-        mediator.on('discussion:commentbox:post:success', () =>
-            this.removeState('empty')
-        );
-
-        mediator.on('module:clickstream:click', clickspec => {
-            const shouldRemoveTruncation =
-                clickspec &&
-                'hash' in clickspec.target &&
-                clickspec.target.hash === '#comments';
-
-            if (shouldRemoveTruncation) {
-                this.removeTruncation();
-            }
-        });
-
-        end('discussion');
-    }
-
-    initRecommend(): void {
-        this.on('click', '.js-recommend-comment', (e: Event) => {
-            const target: HTMLElement = (e.currentTarget: any);
-
-            if (this.user && this.elem instanceof HTMLElement) {
-                upvoteHandle(target, this.elem, this.user);
-            }
-        });
-
-        this.on('click', '.js-rec-tooltip-close', () => {
-            upvoteCloseTooltip();
-        });
-    }
-
-    initToolbar(): void {
-        const $orderLabel = $('.js-comment-order');
-        const $threadingLabel = $('.js-comment-threading');
-
-        $threadingLabel.text(this.comments && this.comments.options.threading);
-        $orderLabel.text(this.comments && this.comments.options.order);
-
-        this.on(
-            'click',
-            '.js-comment-order-dropdown .popup__action',
-            (e: Event) => {
-                bean.fire(
-                    qwery('.js-comment-order-dropdown [data-toggle]')[0],
-                    'click'
-                );
-
-                if (this.comments) {
-                    // $FlowFixMe
-                    this.comments.options.order = bonzo(e.currentTarget).data(
-                        'order'
-                    );
-                }
-
-                $orderLabel.text(this.comments && this.comments.options.order);
-
-                userPrefs.set(
-                    'discussion.order',
-                    this.comments && this.comments.options.order
-                );
-
-                this.loadComments({ page: 1 });
-            }
-        );
-
-        this.on(
-            'click',
-            '.js-comment-threading-dropdown .popup__action',
-            (e: Event) => {
-                bean.fire(
-                    qwery('.js-comment-threading-dropdown [data-toggle]')[0],
-                    'click'
-                );
-
-                if (this.comments) {
-                    // $FlowFixMe
-                    this.comments.options.threading = bonzo(
-                        e.currentTarget
-                    ).data('threading');
-                }
-
-                $threadingLabel.text(
-                    this.comments && this.comments.options.threading
-                );
-
-                userPrefs.set(
-                    'discussion.threading',
-                    this.comments && this.comments.options.threading
-                );
-
-                this.loadComments();
-            }
-        );
-
-        if (config.get('page.section') === 'crosswords') {
-            const $timestampsLabel = $('.js-timestamps');
-            const updateLabelText = (prefValue?: boolean) => {
-                $timestampsLabel.text(prefValue ? 'Relative' : 'Absolute');
-            };
-
-            updateLabelText();
-
-            const PREF_RELATIVE_TIMESTAMPS =
-                'discussion.enableRelativeTimestamps';
-            // Default to true
-            const prefValue =
-                userPrefs.get(PREF_RELATIVE_TIMESTAMPS) !== null
-                    ? userPrefs.get(PREF_RELATIVE_TIMESTAMPS)
-                    : true;
-
-            updateLabelText(prefValue);
-
-            this.on(
-                'click',
-                '.js-timestamps-dropdown .popup__action',
-                (e: Event) => {
-                    const format = bonzo(e.currentTarget).data('timestamp');
-
-                    bean.fire(
-                        qwery('.js-timestamps-dropdown [data-toggle]')[0],
-                        'click'
-                    );
-
-                    updateLabelText(format === 'relative');
-
-                    userPrefs.set(
-                        PREF_RELATIVE_TIMESTAMPS,
-                        format === 'relative'
-                    );
-
-                    this.loadComments();
-                }
-            );
-        }
-    }
-
-    initPageSizeDropdown(pageSize: number | string): void {
-        const $pagesizeLabel = $('.js-comment-pagesize');
-
-        $pagesizeLabel.text(pageSize);
-
-        this.on(
-            'click',
-            '.js-comment-pagesize-dropdown .popup__action',
-            (e: Event) => {
-                const selectedPageSize = bonzo(e.currentTarget).data(
-                    'pagesize'
-                );
-
-                bean.fire(
-                    qwery('.js-comment-pagesize-dropdown [data-toggle]')[0],
-                    'click'
-                );
-
-                if (this.comments) {
-                    this.comments.options.pagesize = selectedPageSize;
-                }
-
-                $pagesizeLabel.text(selectedPageSize);
-                userPrefs.set('discussion.pagesize', selectedPageSize);
-                this.loadComments({ page: 1 });
-            }
-        );
-    }
-
-    initMainComments(): void {
-        const commentId = this.getCommentIdFromHash();
-        const order =
-            userPrefs.get('discussion.order') ||
-            (this.getDiscussionClosed() ? 'oldest' : 'newest');
-        const threading = userPrefs.get('discussion.threading') || 'collapsed';
-
-        const defaultPagesize = isBreakpoint({ min: 'tablet' }) ? 25 : 10;
-
-        this.comments = new Comments({
-            discussionId: this.getDiscussionId(),
-            order,
-            pagesize: defaultPagesize,
-            threading,
-        });
-
-        if (this.comments) {
-            this.comments.attachTo(qwery('.js-discussion-main-comments')[0]);
-        }
-
-        if (this.comments) {
-            this.comments.on('untruncate-thread', () =>
-                this.removeTruncation()
-            );
-        }
-
-        this.on('click,', '.js-discussion-author-link', () =>
-            this.removeTruncation()
-        );
-
-        this.on(
-            'click',
-            '.js-discussion-change-page, .js-discussion-show-button',
-            () => {
-                mediator.emit('discussion:comments:get-more-replies');
-                this.removeTruncation();
-            }
-        );
-
-        if (this.comments) {
-            this.comments.on('rendered', (paginationHtml: string) => {
-                const newPagination = bonzo.create(paginationHtml);
-                const toolbarEl = qwery('.js-discussion-toolbar', this.elem)[0];
-                const container = $(
-                    '.js-discussion-pagination',
-                    toolbarEl
-                ).empty();
-
-                // When the pagesize is 'All', do not show any pagination.
-                if (this.comments && !this.comments.isAllPageSizeActive()) {
-                    container.html(newPagination);
-                }
-            });
-        }
-
-        this.setState('loading');
-
-        this.on('user:loaded', () => {
-            this.initState();
-            this.renderCommentBar();
-
-            if (this.user) {
-                if (this.comments) {
-                    this.comments.addUser(this.user);
-                }
-
-                const userPageSize = userPrefs.get('discussion.pagesize');
-                let pageSize = defaultPagesize;
-
-                if (typeof userPageSize === 'number') {
-                    pageSize = userPageSize;
-                } else if (userPageSize === 'All') {
-                    pageSize = config.get('switches.discussionAllPageSize')
-                        ? 'All'
-                        : 100;
-                }
-
-                this.initPageSizeDropdown(pageSize);
-
-                if (
-                    this.comments &&
-                    config.get('switches.discussionPageSize') &&
-                    isBreakpoint({ min: 'tablet' })
-                ) {
-                    this.comments.options.pagesize = pageSize;
-                }
-
-                if (this.user && this.user.isStaff) {
-                    this.removeState('not-staff');
-                    this.setState('is-staff');
-                }
-            }
-
-            // Only truncate the loaded comments on this initial fetch,
-            // and when no comment ID or #comments location is present.
-            const shouldTruncate =
-                !commentId && window.location.hash !== '#comments';
-
-            this.loadComments({
-                comment: commentId,
-                shouldTruncate,
-            }).catch(() => this.logError('Comments'));
-        });
-
-        this.getUser();
-    }
-
-    initTopComments(): Promise<void> {
-        const discussionId = this.getDiscussionId();
-
-        this.on('click', '.js-jump-to-comment', (e: Event) => {
-            e.preventDefault();
-            const commentId = bonzo(e.currentTarget).data('comment-id');
-            this.gotoComment(commentId);
-        });
-
-        if (!discussionId) {
-            return Promise.resolve();
-        }
-
-        return fetchJson(
-            `/discussion/top-comments/${discussionId}.json?commentsClosed=${this.getDiscussionClosed().toString()}`,
-            {
-                mode: 'cors',
-            }
-        )
-            .then(resp => {
-                this.$topCommentsContainer.html(resp.html);
-                this.topCommentCount = qwery(
-                    '.d-top-comment',
-                    this.$topCommentsContainer[0]
-                ).length;
-                if (this.topCommentCount !== 0) {
-                    $('.js-discussion-comment-box--bottom').removeClass(
-                        'discussion__comment-box--bottom--hidden'
-                    );
-                    this.setState('has-top-comments');
-                }
-            })
-            .catch(() => this.logError('Top comments'));
-    }
-
-    logError(commentType: string, error?: Error): void {
-        let reportMsg = `${commentType} failed to load: `;
-
-        if (error && error.message) {
-            reportMsg += error.message;
-        }
-
-        raven.captureMessage(reportMsg, {
-            tags: {
-                contentType: 'comments',
-                discussionId: this.getDiscussionId(),
-            },
-        });
-    }
-
-    initPagination(): void {
-        this.on('click', '.js-discussion-change-page', (e: Event) => {
-            const target: HTMLElement = (e.currentTarget: any);
-            const page = parseInt(target.getAttribute('data-page'), 10);
-
-            e.preventDefault();
-
-            this.setState('loading');
-            this.gotoPage(page);
-        });
-    }
-
-    gotoComment(id: string, fromRequest?: boolean): void {
-        const comment = $(`#comment-${id}`, this.elem);
-
-        if (comment.length > 0) {
-            const commentsAreHidden =
-                $('.js-discussion-main-comments').css('display') === 'none';
-            // If comments are hidden, lets show them
-            if (commentsAreHidden) {
-                fastdom
-                    .mutate(() => {
-                        if (this.comments) {
-                            this.comments.showHiddenComments();
-                        }
-
-                        this.removeState('truncated');
-
-                        $('.d-discussion__show-all-comments').addClass('u-h');
-                    })
-                    .then(() => {
-                        this.setCommentHash(id);
-                    });
-            } else {
-                // If comments aren't hidden we can go straight to the comment
-                this.setCommentHash(id);
-            }
-        } else if (!fromRequest) {
-            // If the comment isn't on the page, then we need to load the comment thread
-            this.loadComments({ comment: id });
-        } else {
-            // The comment didn't exist in the response
-
-            // Scroll to toolbar and show message
-            scrollToElement(qwery('.js-discussion-toolbar'), 100);
-
-            fastdom.mutate(() => {
-                $('.js-discussion-main-comments').prepend(
-                    '<div class="d-discussion__message d-discussion__message--error">The comment you requested could not be found.</div>'
-                );
-            });
-
-            // Capture in sentry
-            raven.captureMessage("Comment doesn't exist in response", {
-                level: 'error',
-                extra: {
-                    commentId: id,
-                },
-            });
-        }
-    }
-
-    gotoPage(page: number): void {
-        scrollToElement(qwery('.js-discussion-toolbar'), 100);
-
-        if (this.comments) {
-            this.comments.relativeDates();
-        }
-
-        this.loadComments({ page });
-    }
-
-    loadComments(
-        options?: {
-            comment?: ?(string | number),
-            shouldTruncate?: boolean,
-            page?: number,
-        } = {}
-    ): Promise<void> {
-        const opts = Object.assign({}, options);
-
-        this.setState('loading');
-
-        // If the caller specified truncation, do not load all comments.
-        if (
-            opts.shouldTruncate &&
-            (this.comments && this.comments.isAllPageSizeActive())
-        ) {
-            opts.pageSize = 10;
-        }
-
-        // Closed state of comments is passed so we bust cache of comment thread when it is reopened
-        opts.commentsClosed = this.getDiscussionClosed();
-
-        if (!this.comments) {
-            return Promise.resolve();
-        }
-
-        return this.comments.fetchComments(opts).then(() => {
-            this.removeState('loading');
-
-            if (opts.shouldTruncate) {
-                this.setState('truncated');
-            } else {
-                // do not call removeTruncation because it could invoke another fetch.
-                this.removeState('truncated');
-            }
-
-            if (this.comments && this.comments.shouldShowPageSizeMessage()) {
-                this.setState('pagesize-msg-show');
-            } else {
-                this.removeState('pagesize-msg-show');
-            }
-
-            if (opts.comment) {
-                this.gotoComment(opts.comment.toString(), true);
-            }
-        });
-    }
-
-    removeTruncation(): void {
-        // When the pagesize is 'All', the full page is not yet loaded, so load the comments.
-        if (this.comments && this.comments.isAllPageSizeActive()) {
-            this.loadComments();
-        } else {
-            this.removeState('truncated');
-        }
-    }
-
-    renderCommentBox(elem: HTMLElement): void {
-        new CommentBox({
-            discussionId: this.getDiscussionId(),
-            premod:
-                this.user &&
-                this.user.privateFields &&
-                this.user.privateFields.isPremoderated,
-            newCommenter:
-                this.user &&
-                this.user.privateFields &&
-                !this.user.privateFields.hasCommented,
-            hasUsername: this.username !== null,
-            shouldRenderMainAvatar: false,
-        })
-            .render(elem)
-            .on('post:success', comment => this.commentPosted(comment));
-    }
-
-    renderCommentBar(): void {
-        if (this.isCommentable()) {
-            this.renderCommentBox(qwery('.js-discussion-comment-box--top')[0]);
-            this.renderCommentBox(
-                qwery('.js-discussion-comment-box--bottom')[0]
-            );
-        }
-    }
-
-    renderCommentCount(): void {
-        loadDiscussionFrontend(this, {
-            apiHost: config.get('page.discussionApiUrl'),
-            avatarImagesHost: config.get('page.avatarImagesUrl'),
-            closed: this.getDiscussionClosed(),
-            discussionId: this.getDiscussionId(),
-            element: document.getElementsByClassName(
-                'js-discussion-external-frontend'
-            )[0],
-            userFromCookie: !!getUserFromCookie(),
-            profileUrl: config.get('page.idUrl'),
-            profileClientId: config.get('switches.registerWithPhone')
-                ? 'comments'
-                : '',
-            Promise,
-        });
-    }
-}
-
-export { Loader };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/upvote.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/upvote.js
deleted file mode 100644
index b6fa8866cbb..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/upvote.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/upvote.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import fastdom from 'lib/fastdom-promise';
-import reportError from 'lib/report-error';
-import { getUrlVars, constructQuery } from 'lib/url';
-import { recommendComment } from 'common/modules/discussion/api';
-
-const RECOMMENDATION_CLASS = 'js-recommend-comment';
-const TOOLTIP_CLASS = 'js-rec-tooltip';
-
-const updateReturnUrl = (
-    links: NodeList<HTMLElement>,
-    returnLink: ?string
-): void => {
-    for (let i = 0, len = links.length; i < len; i += 1) {
-        const url = links[i].getAttribute('href');
-
-        if (url) {
-            const baseUrl = url.split('?')[0];
-            const query = getUrlVars(url.split('?')[1] || '&');
-            links[i].setAttribute(
-                'href',
-                `${baseUrl}?${constructQuery(
-                    Object.assign({}, query, {
-                        returnUrl: returnLink,
-                    })
-                )}`
-            );
-        }
-    }
-};
-
-const showSignInTooltip = (target: Element): Promise<void> => {
-    const tooltip = document.querySelector(`.${TOOLTIP_CLASS}`);
-
-    if (!tooltip) {
-        return Promise.resolve();
-    }
-
-    const links = tooltip.querySelectorAll('.js-rec-tooltip-link');
-
-    return fastdom.mutate(() => {
-        updateReturnUrl(links, target.getAttribute('data-comment-url'));
-        tooltip.removeAttribute('hidden');
-        target.appendChild(tooltip);
-    });
-};
-
-const isOpenForRecommendations = (element: ?Element): boolean =>
-    !!element && !!element.querySelector('.d-discussion--recommendations-open');
-
-const setClicked = (target: Element): Promise<void> =>
-    fastdom.mutate(() => {
-        target.classList.remove(RECOMMENDATION_CLASS);
-        target.classList.add('d-comment__recommend--clicked');
-    });
-
-const unsetClicked = (target: Element): Promise<void> =>
-    fastdom.mutate(() => {
-        target.classList.add(RECOMMENDATION_CLASS);
-        target.classList.remove('d-comment__recommend--clicked');
-    });
-
-const setRecommended = (target: Element): Promise<void> =>
-    fastdom.mutate(() => {
-        target.classList.add('d-comment__recommend--recommended');
-    });
-
-const handle = (
-    target: Element,
-    container: ?Element,
-    user: ?DiscussionProfile
-): Promise<void> => {
-    const discussionAllowAnonymousRecommendsSwitch = config.get(
-        'switches.discussionAllowAnonymousRecommendsSwitch'
-    );
-    if (!discussionAllowAnonymousRecommendsSwitch && !user) {
-        target.setAttribute('data-link-name', 'Recommend comment anonymous');
-        return showSignInTooltip(target);
-    } else if (
-        (discussionAllowAnonymousRecommendsSwitch || user) &&
-        isOpenForRecommendations(container)
-    ) {
-        const id = target.getAttribute('data-comment-id');
-
-        if (!id) {
-            return Promise.resolve();
-        }
-
-        return Promise.all([setClicked(target), recommendComment(id)])
-            .then(() => setRecommended(target))
-            .catch(ex =>
-                unsetClicked(target).then(() => {
-                    reportError(ex, {
-                        feature: 'comments-recommend',
-                    });
-                })
-            );
-    }
-
-    return Promise.resolve();
-};
-
-const closeTooltip = (): Promise<void> =>
-    fastdom.mutate(() => {
-        const tooltip = document.querySelector(`.${TOOLTIP_CLASS}`);
-
-        if (tooltip) {
-            tooltip.setAttribute('hidden', '');
-        }
-    });
-
-export { handle, closeTooltip };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/upvote.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/upvote.spec.js
deleted file mode 100644
index 0c9f340efa7..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/upvote.spec.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/upvote.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { handle, closeTooltip } from 'common/modules/discussion/upvote';
-import { recommendComment as recommendComment_ } from 'common/modules/discussion/api';
-import config from 'lib/config';
-
-jest.mock('lib/raven');
-jest.mock('common/modules/discussion/api', () => ({
-    recommendComment: jest.fn(),
-}));
-
-const recommendComment: any = recommendComment_;
-
-const fakeUser = {
-    userId: 'fakeUserId',
-    displayName: 'fakeDisplayName',
-    webUrl: 'fakeWebUrl',
-    apiUrl: 'fakeApiUrl',
-    avatar: 'fakeAvatar',
-    secureAvatarUrl: 'fakeSecureAvatarUrl',
-    badge: [],
-    details: {
-        about: 'aboutAbout',
-        age: 'fakeAge',
-        gender: 'fakeGender',
-        interests: 'interestsFake',
-        location: 'locationFake',
-        realName: 'realNameFake',
-        webPage: 'webPageFake',
-    },
-    privateFields: {
-        canPostComment: true,
-        hasCommented: true,
-        isPremoderated: true,
-    },
-};
-
-describe('Recommendations of comments', () => {
-    beforeEach(() => {
-        // The contract to keep in mind is that comments loader calls
-        // `handle` when clicking on a recommendation
-        // `closeTooltip` when clicking on the tooltip close
-        if (document.body) {
-            document.body.innerHTML = `
-            <div class="recommendation-test">
-                <div class="js-recommend-comment" data-comment-id="1" data-comment-url="http://theguardian.com/comment-1">
-                    icon
-                </div>
-                <div class="js-rec-tooltip" hidden>
-                    <a class="js-rec-tooltip-link" href="http://theguardian.com/test/signin?keep=this">Sign in</a>
-                </div>
-                <div class="d-discussion--recommendations-open"></div>
-            </div>`;
-        }
-
-        recommendComment.mockReset();
-
-        config.set('switches.discussionAllowAnonymousRecommendsSwitch', false);
-    });
-
-    it('should send a request to discussion API if the user is logged in', () => {
-        const target = document.querySelector('.js-recommend-comment');
-
-        if (!target) {
-            return Promise.reject(new Error('Error querying DOM'));
-        }
-
-        recommendComment.mockImplementationOnce(() => Promise.resolve());
-
-        config.set('switches.discussionAllowAnonymousRecommendsSwitch', false);
-
-        return handle(
-            target,
-            document.querySelector('.recommendation-test'),
-            fakeUser
-        ).then(() => {
-            expect(recommendComment).toHaveBeenCalled();
-            expect(
-                target.classList.contains('d-comment__recommend--recommended')
-            ).toBe(true);
-            expect(target.classList.contains('js-recommend-comment')).toBe(
-                false
-            );
-        });
-    });
-
-    it('should send an anonymous request to the discussion API when permitted', () => {
-        const target = document.querySelector('.js-recommend-comment');
-
-        if (!target) {
-            return Promise.reject(new Error('Error querying DOM'));
-        }
-
-        recommendComment.mockImplementationOnce(() => Promise.resolve());
-
-        config.set('switches.discussionAllowAnonymousRecommendsSwitch', true);
-
-        return handle(
-            target,
-            document.querySelector('.recommendation-test'),
-            null
-        ).then(() => {
-            expect(recommendComment).toHaveBeenCalled();
-            expect(
-                target.classList.contains('d-comment__recommend--recommended')
-            ).toBe(true);
-            expect(target.classList.contains('js-recommend-comment')).toBe(
-                false
-            );
-        });
-    });
-
-    it('should allow retry if the discussion api returns an error', () => {
-        const target = document.querySelector('.js-recommend-comment');
-
-        if (!target) {
-            return Promise.reject(new Error('Error querying DOM'));
-        }
-
-        recommendComment.mockImplementationOnce(() =>
-            Promise.reject(new Error('discussion api error'))
-        );
-
-        config.set('switches.discussionAllowAnonymousRecommendsSwitch', false);
-
-        return handle(
-            target,
-            document.querySelector('.recommendation-test'),
-            fakeUser
-        ).catch(() => {
-            expect(recommendComment).toHaveBeenCalled();
-            expect(
-                target.classList.contains('d-comment__recommend--recommended')
-            ).toBe(false);
-            expect(target.classList.contains('js-recommend-comment')).toBe(
-                true
-            );
-        });
-    });
-
-    it('should show a tooltip with a return link to the upvoted comment', () => {
-        const target = document.querySelector('.js-recommend-comment');
-        const tooltip = document.querySelector('.js-rec-tooltip');
-        const link = document.querySelector('.js-rec-tooltip-link');
-
-        if (!target || !tooltip || !link) {
-            return Promise.reject(new Error('Error querying DOM'));
-        }
-
-        recommendComment.mockImplementationOnce(() =>
-            Promise.reject(new Error('discussion api error'))
-        );
-
-        config.set('switches.discussionAllowAnonymousRecommendsSwitch', false);
-
-        return handle(
-            target,
-            document.querySelector('.recommendation-test'),
-            null
-        )
-            .then(() => {
-                expect(recommendComment).not.toHaveBeenCalled();
-                expect(
-                    target.classList.contains(
-                        'd-comment__recommend--recommended'
-                    )
-                ).toBe(false);
-                expect(tooltip.hasAttribute('hidden')).toBe(false);
-                expect(link.getAttribute('href')).toBe(
-                    'http://theguardian.com/test/signin?keep=this&returnUrl=http%3A%2F%2Ftheguardian.com%2Fcomment-1'
-                );
-
-                return closeTooltip();
-            })
-            .then(() => {
-                expect(tooltip.hasAttribute('hidden')).toBe(true);
-            });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/urlify.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/urlify.js
deleted file mode 100644
index 83a9825f7d1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/urlify.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/urlify.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export const urlify = (str: string): string => {
-    const reOutsideTags = '(?![^<]*>|[^<>]*</)';
-    const reUrl = '\\b((https?://|www.)\\S+)\\b';
-    const regexp = new RegExp(reUrl + reOutsideTags, 'g');
-
-    return str.replace(regexp, (match, url, protocol) => {
-        const fullUrl = protocol === 'www.' ? `http://${url}` : url;
-        return `<a href="${fullUrl}">${url}</a>`;
-    });
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/urlify.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/urlify.spec.js
deleted file mode 100644
index a16cb929047..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/urlify.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/urlify.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { urlify } from './urlify';
-
-describe('urlify', () => {
-    it('should convert unlinked urls to urls', () => {
-        const post = `
-            <a href="http://example.com/existinglink">http://example.com/existinglink</a>
-            www.example.com
-            <a href="http://example.com/existinglink">http://example.com/existinglink</a>
-            www.example.com/test?test#test
-            https://example.com
-            http://example.com
-            asfdahttp://example.com www.example.com
-            <a href="http://example.com/existinglink">http://example.com/existinglink</a>`;
-
-        const expected = `
-            <a href="http://example.com/existinglink">http://example.com/existinglink</a>
-            <a href="http://www.example.com">www.example.com</a>
-            <a href="http://example.com/existinglink">http://example.com/existinglink</a>
-            <a href="http://www.example.com/test?test#test">www.example.com/test?test#test</a>
-            <a href="https://example.com">https://example.com</a>
-            <a href="http://example.com">http://example.com</a>
-            asfdahttp://example.com <a href="http://www.example.com">www.example.com</a>
-            <a href="http://example.com/existinglink">http://example.com/existinglink</a>`;
-
-        expect(urlify(post)).toBe(expected);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/user-avatars.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/user-avatars.js
deleted file mode 100644
index 09ec170e253..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/user-avatars.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/user-avatars.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import avatarApi from 'common/modules/avatar/api';
-import bonzo from 'bonzo';
-import config from 'lib/config';
-import fastdom from 'lib/fastdom-promise';
-
-const avatarify = (container: HTMLElement): void => {
-    const updating = bonzo(bonzo.create('<div class="is-updating"></div>'));
-    const avatar = bonzo(
-        bonzo.create('<img class="user-avatar__image" alt="" />')
-    );
-    const avatarUserId = container.dataset.userid;
-    const userId = config.get('user.id', null);
-
-    const updateCleanup = (upd: bonzo, avat: bonzo) => {
-        upd.remove();
-        avat.appendTo(container);
-    };
-
-    container.classList.remove('is-hidden');
-    updating.css('display', 'block').appendTo(container);
-
-    if (avatarUserId === userId) {
-        avatarApi
-            .getActive()
-            .then(response => {
-                avatar.attr('src', response.data.avatarUrl);
-            })
-            .catch(() => {
-                const url = avatarApi.deterministicUrl(avatarUserId);
-                avatar.attr('src', url);
-            })
-            .always(() => {
-                updateCleanup(updating, avatar);
-            });
-    } else {
-        avatar.attr('src', avatarApi.deterministicUrl(avatarUserId));
-        updateCleanup(updating, avatar);
-    }
-};
-
-const initUserAvatars = (): Promise<void> =>
-    fastdom
-        .measure(() => document.getElementsByClassName('user-avatar'))
-        .then(avatars => {
-            if (avatars) {
-                Array.from(avatars).forEach(avatarify);
-            }
-        });
-
-export { initUserAvatars, avatarify };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/user-edit-link.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/user-edit-link.js
deleted file mode 100644
index 5a6291c34f3..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/user-edit-link.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/user-edit-link.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import fastdom from 'lib/fastdom-promise';
-
-const addEditLink = (containerEl: HTMLElement): void => {
-    const myUserId: ?string = config.get('user.id');
-    const pageUserId: string = containerEl.dataset.userid;
-
-    const parentNode: ?Element = containerEl.parentElement;
-
-    if (parentNode && myUserId && myUserId === pageUserId) {
-        const linkEl = document.createElement('a');
-        linkEl.innerText = 'Edit your public profile';
-        linkEl.dataset.linkName = 'comments : edit profile';
-        linkEl.href = `${config.get('page.idUrl')}/public/edit`;
-        linkEl.classList.add('u-underline');
-
-        const holderEl = document.createElement('p');
-        holderEl.appendChild(linkEl);
-        holderEl.classList.add('user-profile__edit-link');
-
-        fastdom.mutate(() => {
-            containerEl.insertAdjacentElement('afterend', holderEl);
-        });
-    }
-};
-
-const initUserEditLink = (): Promise<void> =>
-    fastdom
-        .measure(() =>
-            Array.from(document.getElementsByClassName('user-profile__name'))
-        )
-        .then(names => {
-            names.forEach(addEditLink);
-        });
-
-export { initUserEditLink };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/discussion/whole-discussion.js b/static/src/javascripts.flow.archive/projects/common/modules/discussion/whole-discussion.js
deleted file mode 100644
index c24448dcb34..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/discussion/whole-discussion.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/discussion/whole-discussion.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import bonzo from 'bonzo';
-import fetchJson from 'lib/fetch-json';
-import { constructQuery } from 'lib/url';
-import range from 'lodash/range';
-
-declare type DiscussionResponse = {
-    commentsHtml: string,
-    lastPage: number,
-    paginationHtml: string,
-    postedCommentHtml: string,
-};
-
-/* This size effectively determines how many calls this module needs to make.
-   Number of ajax calls = number of comments / comments per page */
-const COMMENTS_PER_PAGE = 50;
-const CONCURRENT_LIMIT = 3;
-const MAX_COMMENT_COUNT = 1000;
-
-// A basic Promise queue based on: http://talks.joneisen.me/presentation-javascript-concurrency-patterns/refactoru-9-23-2014.slide#25
-const runConcurrently = (
-    workFunction: (num: number) => Promise<any>,
-    items: Array<number>
-): Promise<void> =>
-    new Promise(resolve => {
-        const queue = items;
-        let workers = 0;
-
-        const onComplete = () => {
-            workers -= 1;
-            if (queue.length) {
-                // eslint-disable-next-line no-use-before-define
-                start(queue.shift());
-            } else if (!workers) {
-                resolve();
-            }
-        };
-
-        const start = item => {
-            workers += 1;
-            workFunction.call(null, item).then(onComplete, onComplete);
-        };
-
-        if (!items || !items.length) {
-            resolve();
-            return;
-        }
-
-        const initialItems = items.splice(0, CONCURRENT_LIMIT);
-
-        initialItems.forEach(start);
-    });
-
-class WholeDiscussion {
-    commentsThread: bonzo;
-    discussion: Array<Object>;
-    discussionContainer: bonzo;
-    discussionId: number;
-    lastPage: number;
-    params: {
-        commentsClosed: boolean,
-        displayThreaded: boolean,
-        maxResponses: number,
-        orderBy: 'newest' | 'oldest',
-    };
-    postedCommentHtml: string;
-
-    constructor(options: Object): void {
-        this.discussionId = options.discussionId;
-        this.discussion = [];
-        this.params = {
-            orderBy: options.orderBy,
-            displayThreaded: options.displayThreaded,
-            maxResponses: options.maxResponses,
-            commentsClosed: options.commentsClosed,
-        };
-    }
-
-    firstPageLoaded(resp: Object): Array<number> {
-        // Add the first page of comments to the discussion object.
-        this.storeCommentPage(resp, 1);
-
-        /* Keep a copy of the comments thread and discussion container so it
-           can be easily reduced later. */
-        this.discussionContainer = bonzo.create(resp.commentsHtml);
-        this.postedCommentHtml = resp.postedCommentHtml;
-        this.lastPage = resp.lastPage;
-        this.commentsThread = $(
-            '.d-thread--comments',
-            this.discussionContainer
-        ).empty();
-
-        // Decide if this discussion is too big to load the remaining pages for.
-        if (resp.commentCount > MAX_COMMENT_COUNT) {
-            throw new Error('Discussion comment count too large');
-        }
-
-        // Return a collection of the indices of the remaining pages.
-        return range(2, this.lastPage + 1);
-    }
-
-    /* Caches a bonzo object/array of comments, so that they can be
-       re-assembled when the load is complete. */
-    storeCommentPage(response: Object, page: number): void {
-        const container = $(
-            '.d-thread--comments',
-            bonzo.create(response.commentsHtml)
-        );
-        let comments = $('.d-comment--top-level', container);
-
-        if (this.params.orderBy === 'newest') {
-            comments = comments.map(comment => comment).reverse();
-        }
-
-        this.discussion[page] = comments;
-    }
-
-    loadPage(pageNumber: number): Promise<Object> {
-        // Always load in oldest order, to ensure pages are consistent whilst new comments are posted.
-        const queryParams: Object = {
-            orderBy: 'oldest',
-            page: pageNumber,
-            pageSize: COMMENTS_PER_PAGE,
-            displayThreaded: this.params.displayThreaded,
-            commentsClosed: this.params.commentsClosed,
-        };
-
-        if (this.params.maxResponses) {
-            queryParams.maxResponses = this.params.maxResponses;
-        }
-
-        const url = `/discussion/${this.discussionId}.json?${constructQuery(
-            queryParams
-        )}`;
-
-        return fetchJson(url, {
-            mode: 'cors',
-        });
-    }
-
-    loadPageAndStore(pageNumber: number): Promise<void> {
-        return this.loadPage(pageNumber).then(response => {
-            this.storeCommentPage(response, pageNumber);
-        });
-    }
-
-    loadRemainingPages(pages: Array<number>): Promise<void> {
-        return runConcurrently(this.loadPageAndStore.bind(this), pages);
-    }
-
-    makeDiscussionResponseObject(): DiscussionResponse {
-        if (this.params.orderBy === 'newest') {
-            this.discussion.reverse();
-        }
-
-        this.discussion.reduce((result, comments) => {
-            result.append(comments);
-            return result;
-        }, this.commentsThread);
-
-        return {
-            paginationHtml: '',
-            postedCommentHtml: this.postedCommentHtml,
-            commentsHtml: this.discussionContainer.html(),
-            lastPage: this.lastPage,
-        };
-    }
-
-    // Always load the first page, to retrieve the number of comments in the discussion.
-    loadAllComments(): Promise<DiscussionResponse> {
-        return this.loadPage(1)
-            .then(resp => this.firstPageLoaded(resp))
-            .then(pages => this.loadRemainingPages(pages))
-            .then(() => this.makeDiscussionResponseObject());
-    }
-}
-
-export { WholeDiscussion };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/__fixtures__/ab-test.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/__fixtures__/ab-test.js
deleted file mode 100644
index d533a0976fd..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/__fixtures__/ab-test.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/__fixtures__/ab-test.js
- * to .ts, then delete it.
- */
-
-// @flow
-export const genVariant = (id: string, canRun: ?boolean): Variant => ({
-    id,
-    test: () => undefined,
-    ...(canRun != null ? { canRun: () => !!canRun } : {}),
-});
-
-export const genAbTest = (
-    id: string,
-    canRun: ?boolean,
-    expiry: ?string,
-    variants: ?(Variant[])
-): ABTest => ({
-    id,
-    audienceCriteria: 'n/a',
-    audienceOffset: 0,
-    audience: 1,
-    author: 'n/a',
-    showForSensitive: false,
-    canRun: () => {
-        if (canRun != null) return !!canRun;
-        return true;
-    },
-    description: 'n/a',
-    start: '0001-01-01',
-    expiry: expiry || '9999-12-12',
-    successMeasure: 'n/a',
-    variants: variants || [genVariant('control'), genVariant('variant')],
-});
-
-export const genRunnableAbTestWhereControlIsRunnable = (
-    id: string,
-    canRun: ?boolean
-): Runnable<ABTest> => {
-    const abTest = genAbTest(id, canRun);
-    return {
-        ...abTest,
-        variantToRun: abTest.variants[0],
-    };
-};
-
-export const genRunnableAbTestWhereVariantIsRunnable = (
-    id: string,
-    canRun: ?boolean
-): Runnable<ABTest> => {
-    const abTest = genAbTest(id, canRun);
-    return {
-        ...abTest,
-        variantToRun: abTest.variants[1],
-    };
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/__mocks__/ab-tests.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/__mocks__/ab-tests.js
deleted file mode 100644
index 0954f29788c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/__mocks__/ab-tests.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/__mocks__/ab-tests.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { genAbTest, genVariant } from '../__fixtures__/ab-test';
-
-export const concurrentTests = [
-    genAbTest('DummyTest'),
-    genAbTest('DummyTest2'),
-    genAbTest('DummyTest3CanRunIsFalse', false),
-    genAbTest('DummyTest4ControlCanRunIsFalse', true, '9999-01-01', [
-        genVariant('control', false),
-        genVariant('variant', true),
-    ]),
-];
-export const epicTests = [genAbTest('EpicTest'), genAbTest('EpicTest2')];
-export const engagementBannerTests = [
-    genAbTest('BannerTest'),
-    genAbTest('BannerTest2'),
-];
-
-export const priorityEpicTest = genAbTest('PriorityEpicTest');
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-core.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-core.spec.js
deleted file mode 100644
index e44a9889556..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-core.spec.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/ab-core.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {
-    genAbTest,
-    genVariant,
-} from 'common/modules/experiments/__fixtures__/ab-test';
-import { runnableTest } from 'common/modules/experiments/ab-core';
-import {
-    clearParticipations,
-    setParticipationsInLocalStorage,
-} from 'common/modules/experiments/ab-local-storage';
-import { overwriteMvtCookie } from 'common/modules/analytics/mvt-cookie';
-import { runnableTestsToParticipations } from 'common/modules/experiments/ab-utils';
-
-jest.mock('common/modules/analytics/mvt-cookie');
-jest.mock('common/modules/experiments/ab-tests');
-
-jest.mock('common/modules/experiments/ab', () => ({
-    logAutomatEvent: () => {},
-}));
-
-/* eslint guardian-frontend/global-config: "off" */
-/* eslint guardian-frontend/no-direct-access-config: "off" */
-const cfg = window.guardian.config;
-
-describe('A/B tests', () => {
-    beforeEach(() => {
-        cfg.page = {};
-        cfg.page.isSensitive = false;
-        cfg.switches = {
-            abDummyTest: true,
-        };
-        overwriteMvtCookie(1234);
-        window.location.hash = '';
-        setParticipationsInLocalStorage({});
-    });
-
-    describe('runnableTest', () => {
-        test('should return null for an expired test', () => {
-            const expiredTest = genAbTest('DummyTest', true, '2000-01-01');
-            expect(runnableTest(expiredTest)).toEqual(null);
-        });
-
-        test('should return null for a test which is switched off', () => {
-            cfg.switches.abDummyTest = false;
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).toBeNull();
-        });
-
-        test('should return null if the test cannot be run', () => {
-            const test = genAbTest('DummyTest', false);
-            expect(runnableTest(test)).toBeNull();
-        });
-
-        test('should return null if the test can be run but the variant cannot', () => {
-            const test = genAbTest('DummyTest', true, '9999-12-12', [
-                genVariant('control', false),
-            ]);
-            expect(runnableTest(test)).toBeNull();
-        });
-
-        test('should return a different variantToRun if the MVT cookie is different and localStorage is cleared', () => {
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).not.toBeNull();
-            if (rt) {
-                expect(rt.variantToRun).toHaveProperty('id', 'control');
-                setParticipationsInLocalStorage(
-                    runnableTestsToParticipations([rt])
-                );
-            }
-
-            clearParticipations();
-            overwriteMvtCookie(1235);
-
-            const rt2 = runnableTest(test);
-            expect(rt2).not.toBeNull();
-            if (rt2) {
-                expect(rt2.variantToRun).toHaveProperty('id', 'variant');
-            }
-        });
-
-        test('should return the same variantToRun if the MVT cookie is different but the localStorage participations are preserved', () => {
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).not.toBeNull();
-            if (rt) {
-                expect(rt.variantToRun).toHaveProperty('id', 'control');
-                setParticipationsInLocalStorage(
-                    runnableTestsToParticipations([rt])
-                );
-            }
-
-            overwriteMvtCookie(1235);
-
-            const rt2 = runnableTest(test);
-            expect(rt2).not.toBeNull();
-            if (rt2) {
-                expect(rt2.variantToRun).toHaveProperty('id', 'control');
-            }
-        });
-
-        test('should return the variantToRun specified by the URL, overriding localStorage and cookie', () => {
-            window.location.hash = '#ab-DummyTest=variant';
-            setParticipationsInLocalStorage({
-                DummyTest: { variant: 'control' },
-            });
-
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).not.toBeNull();
-            if (rt) {
-                expect(rt.variantToRun).toHaveProperty('id', 'variant');
-            }
-        });
-
-        test('should return the variantToRun specified by localStorage, overriding cookie', () => {
-            setParticipationsInLocalStorage({
-                DummyTest: { variant: 'variant' },
-            });
-
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).not.toBeNull();
-            if (rt) {
-                expect(rt.variantToRun).toHaveProperty('id', 'variant');
-            }
-        });
-
-        test('should return the variantToRun specified by the cookie, iff URL and localStorage are absent', () => {
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).not.toBeNull();
-            if (rt) {
-                expect(rt.variantToRun).toHaveProperty('id', 'control');
-            }
-        });
-
-        test('should return null if notintest is specified in the URL hash', () => {
-            window.location.hash = '#ab-DummyTest=notintest';
-
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).toBeNull();
-        });
-
-        test('should return null if notintest is specified in localStorage', () => {
-            setParticipationsInLocalStorage({
-                DummyTest: { variant: 'notintest' },
-            });
-
-            const test = genAbTest('DummyTest');
-            const rt = runnableTest(test);
-            expect(rt).toBeNull();
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-ophan.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-ophan.spec.js
deleted file mode 100644
index 4893360ca91..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-ophan.spec.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/ab-ophan.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {
-    registerCompleteEvents,
-    registerImpressionEvents,
-    buildOphanPayload,
-} from 'common/modules/experiments/ab-ophan';
-
-import { storage } from '@guardian/libs';
-
-import { concurrentTests } from 'common/modules/experiments/ab-tests';
-import config from 'lib/config';
-
-import { genRunnableAbTestWhereControlIsRunnable } from './__fixtures__/ab-test';
-
-jest.mock('lib/raven');
-jest.mock('lib/report-error');
-jest.mock('common/modules/analytics/mvt-cookie');
-jest.mock('lodash/memoize', () => f => f);
-jest.mock('ophan/ng', () => null);
-
-describe('A/B Ophan analytics', () => {
-    beforeEach(() => {
-        // enable all test switches
-        concurrentTests.forEach(test => {
-            config.set(`switches.ab${test.id}`, true);
-        });
-
-        // empty server-side tests
-        config.set('tests', []);
-    });
-
-    afterEach(() => {
-        storage.local.storage = {};
-    });
-
-    test('Ophan data structure contains the correct values', () => {
-        expect(
-            buildOphanPayload([
-                genRunnableAbTestWhereControlIsRunnable('DummyTest'),
-                genRunnableAbTestWhereControlIsRunnable('DummyTest2'),
-            ])
-        ).toEqual({
-            DummyTest: {
-                variantName: 'control',
-                complete: 'false',
-            },
-
-            DummyTest2: {
-                variantName: 'control',
-                complete: 'false',
-            },
-        });
-    });
-
-    test('success function fires when canRun is true', () => {
-        const dummy = genRunnableAbTestWhereControlIsRunnable('DummyTest');
-        dummy.variants[0].success = () => undefined;
-        const spy = jest.spyOn(dummy.variants[0], 'success');
-
-        registerCompleteEvents([dummy]);
-
-        expect(spy).toHaveBeenCalled();
-    });
-
-    test('success function fires when canRun is false', () => {
-        const dummy = genRunnableAbTestWhereControlIsRunnable('DummyTest');
-        dummy.variants[0].success = () => undefined;
-        const spy = jest.spyOn(dummy.variants[0], 'success');
-
-        dummy.canRun = () => false;
-        registerCompleteEvents([dummy]);
-
-        expect(spy).toHaveBeenCalled();
-    });
-
-    test('defer firing the impression when the function is provided', () => {
-        const dummy = genRunnableAbTestWhereControlIsRunnable('DummyTest');
-
-        /**
-         * impression events are only registered if every variant has an `impression` function
-         */
-        dummy.variants.forEach(v => {
-            v.impression = () => undefined;
-        });
-
-        const controlSpy = jest.spyOn(dummy.variants[0], 'impression');
-        const variantSpy = jest.spyOn(dummy.variants[1], 'impression');
-
-        registerImpressionEvents([dummy]);
-
-        expect(
-            controlSpy.mock.calls.length + variantSpy.mock.calls.length
-        ).toEqual(1);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-tests.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-tests.js
deleted file mode 100644
index ee1d646927f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-tests.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/ab-tests.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { commercialPrebidSafeframe } from 'common/modules/experiments/tests/commercial-prebid-safeframe.js';
-import { signInGateMainVariant } from 'common/modules/experiments/tests/sign-in-gate-main-variant';
-import { signInGateMainControl } from 'common/modules/experiments/tests/sign-in-gate-main-control';
-import { newsletterEmbeds } from 'common/modules/experiments/tests/newsletter-embed-test';
-import { globalEoyHeaderTest } from 'common/modules/experiments/tests/global-eoy-header-test';
-
-export const concurrentTests: $ReadOnlyArray<ABTest> = [
-    commercialPrebidSafeframe,
-    signInGateMainVariant,
-    signInGateMainControl,
-    newsletterEmbeds,
-    globalEoyHeaderTest,
-];
-
-export const epicTests: $ReadOnlyArray<EpicABTest> = [];
-
-export const engagementBannerTests: $ReadOnlyArray<AcquisitionsABTest> = [];
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-url.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-url.spec.js
deleted file mode 100644
index 705cd0e4894..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-url.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/ab-url.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { getForcedParticipationsFromUrl } from 'common/modules/experiments/ab-url';
-
-describe('A/B URL', () => {
-    test('getForcedParticipationsFromUrl should correctly get participations from URL', () => {
-        window.location.hash = '#ab-Test=Variant,Test2=Variant2';
-
-        expect(getForcedParticipationsFromUrl()).toEqual({
-            Test: { variant: 'Variant' },
-            Test2: { variant: 'Variant2' },
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-utils.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-utils.spec.js
deleted file mode 100644
index 366d2c47f5a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/ab-utils.spec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/ab-utils.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {
-    genAbTest,
-    genRunnableAbTestWhereControlIsRunnable,
-    genRunnableAbTestWhereVariantIsRunnable,
-    genVariant,
-} from './__fixtures__/ab-test';
-import {
-    runnableTestsToParticipations,
-    testAndParticipationsToVariant,
-    testExclusionsWhoseSwitchExists,
-} from './ab-utils';
-import { NOT_IN_TEST } from './ab-constants';
-
-describe('A/B utils', () => {
-    describe('runnableTestsToParticipations', () => {
-        it('should set the runnable variant in the participations', () => {
-            expect(
-                runnableTestsToParticipations([
-                    genRunnableAbTestWhereControlIsRunnable('a'),
-                    genRunnableAbTestWhereControlIsRunnable('b'),
-                ])
-            ).toEqual({
-                a: { variant: 'control' },
-                b: { variant: 'control' },
-            });
-
-            expect(
-                runnableTestsToParticipations([
-                    genRunnableAbTestWhereControlIsRunnable('c'),
-                    genRunnableAbTestWhereVariantIsRunnable('d'),
-                ])
-            ).toEqual({
-                c: { variant: 'control' },
-                d: { variant: 'variant' },
-            });
-        });
-    });
-
-    describe('testExclusionsWhoseSwitchExists', () => {
-        /* eslint guardian-frontend/global-config: "off" */
-        /* eslint guardian-frontend/no-direct-access-config: "off" */
-        beforeEach(() => {
-            window.guardian.config.switches = {};
-        });
-        it('should filter out non-NOT_IN_TEST variants', () => {
-            window.guardian.config.switches.abSwitchExists = false;
-            window.guardian.config.switches.abSwitchExists2 = true;
-
-            expect(
-                testExclusionsWhoseSwitchExists({
-                    SwitchExists: { variant: NOT_IN_TEST },
-                    SwitchExists2: { variant: NOT_IN_TEST },
-                    SwitchExists3: { variant: 'real' },
-                })
-            ).toEqual({
-                SwitchExists: { variant: NOT_IN_TEST },
-                SwitchExists2: { variant: NOT_IN_TEST },
-            });
-        });
-
-        it('should exclude NOT_IN_TEST variants whose switch does not exist', () => {
-            expect(
-                testExclusionsWhoseSwitchExists({
-                    SwitchExists: { variant: NOT_IN_TEST },
-                    SwitchExists2: { variant: NOT_IN_TEST },
-                    SwitchExists3: { variant: 'real' },
-                })
-            ).toEqual({});
-        });
-    });
-
-    describe('testAndParticipationsToVariant', () => {
-        it('should return the NOT_IN_TEST variant if present', () => {
-            const notInTestVariant = genVariant(NOT_IN_TEST);
-            expect(
-                testAndParticipationsToVariant(
-                    genAbTest('a', true, '9999-12-12', [
-                        genVariant('control'),
-                        notInTestVariant,
-                    ]),
-                    {
-                        a: { variant: NOT_IN_TEST },
-                        b: { variant: 'hey' },
-                    }
-                )
-            ).toHaveProperty('id', NOT_IN_TEST);
-        });
-
-        it('should return a normal variant if no NOT_IN_TEST variant present', () => {
-            const variant = genVariant('Variant');
-            expect(
-                testAndParticipationsToVariant(
-                    genAbTest('b', true, '9999-12-12', [
-                        genVariant('control'),
-                        variant,
-                    ]),
-                    {
-                        a: { variant: 'hey' },
-                        b: { variant: 'Variant' },
-                    }
-                )
-            ).toEqual(variant);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/affix.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/affix.js
deleted file mode 100644
index 9ec8fc1f62b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/affix.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/affix.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bonzo from 'bonzo';
-import mediator from 'lib/mediator';
-import fastdom from 'lib/fastdom-promise';
-
-const getPixels = (top: string): number =>
-    top !== 'auto' ? parseInt(top, 10) : 0;
-
-class Affix {
-    affixed: boolean;
-    $markerTop: bonzo;
-    $markerBottom: bonzo;
-    $container: bonzo;
-    $element: bonzo;
-    $window: bonzo;
-
-    constructor(options: {
-        element: ?HTMLElement,
-        topMarker: ?HTMLElement,
-        bottomMarker: ?HTMLElement,
-        containerElement: ?HTMLElement,
-    }): void {
-        window.addEventListener('click', () => {
-            this.checkPosition();
-        });
-
-        mediator.addListener('window:throttledScroll', () => {
-            this.checkPosition();
-        });
-
-        mediator.addListener('window:throttledResize', () => {
-            this.calculateContainerPositioning();
-        });
-
-        this.affixed = false;
-        this.$markerTop = bonzo(options.topMarker);
-        this.$markerBottom = bonzo(options.bottomMarker);
-        this.$container = bonzo(options.containerElement);
-        this.$element = bonzo(options.element);
-        this.$window = bonzo(document.body);
-
-        this.checkPosition();
-        this.calculateContainerPositioning();
-    }
-
-    calculateContainerPositioning(): void {
-        fastdom
-            .mutate(() => {
-                this.$container.css('top', '0');
-            })
-            .then(() =>
-                fastdom.measure(
-                    () =>
-                        this.$markerTop.offset().top -
-                        this.$container.offset().top
-                )
-            )
-            .then(containerTop => {
-                fastdom.mutate(() => {
-                    this.$container.css('top', `${containerTop}px`);
-                });
-            });
-    }
-
-    checkPosition(): void {
-        const scrollTop = this.$window.scrollTop();
-        const markerTopTop = this.$markerTop.offset().top;
-        const markerBottomTop = this.$markerBottom.offset().top;
-        const elHeight = this.$element.dim().height;
-        const topCheck = scrollTop >= markerTopTop;
-        const bottomCheck = scrollTop + elHeight < markerBottomTop;
-        const viewportCheck = elHeight < bonzo.viewport().height;
-        const affixClass = 'affix';
-        const affixBottomClass = 'affix-bottom';
-        const affix = bottomCheck && topCheck && viewportCheck; // This is true when the element is positioned below the top threshold and above the bottom threshold.
-
-        if (this.affixed !== affix) {
-            this.affixed = affix;
-
-            // Lock the affix container to the bottom marker.
-            if (bottomCheck) {
-                fastdom.mutate(() => {
-                    this.$container.removeClass(affixBottomClass);
-                });
-                this.calculateContainerPositioning();
-            } else {
-                // Store the container top, which needs to be re-applied when affixed to bottom.
-                const oldContainerStyling = getPixels(
-                    this.$container.css('top')
-                );
-                const topStyle =
-                    markerBottomTop -
-                    markerTopTop -
-                    elHeight +
-                    oldContainerStyling;
-                fastdom.mutate(() => {
-                    this.$container.css('top', `${topStyle}px`);
-                    this.$container.addClass(affixBottomClass);
-                });
-            }
-
-            fastdom.mutate(() => {
-                if (affix) {
-                    this.$element.addClass(affixClass);
-                } else {
-                    this.$element.removeClass(affixClass);
-                }
-            });
-        }
-    }
-}
-
-export { Affix };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/index.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/index.js
deleted file mode 100644
index c98ceb0f09f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/index.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/index.js
- * to .ts, then delete it.
- */
-
-// @flow
-import template from 'lodash/template';
-import { storage } from '@guardian/libs';
-import $ from 'lib/$';
-import bean from 'bean';
-import config from 'lib/config';
-import overlay from 'raw-loader!common/views/experiments/overlay.html';
-import styles from 'raw-loader!common/views/experiments/styles.css';
-import {
-    concurrentTests,
-    engagementBannerTests,
-    epicTests,
-} from 'common/modules/experiments/ab-tests';
-import { isExpired } from 'lib/time-utils';
-import {
-    getParticipationsFromLocalStorage,
-    setParticipationsInLocalStorage,
-} from 'common/modules/experiments/ab-local-storage';
-import {
-    getEngagementBannerTestsFromGoogleDoc,
-} from 'common/modules/commercial/contributions-utilities';
-
-const selectRadios = () => {
-    const participations = getParticipationsFromLocalStorage();
-
-    $('.js-experiments-radio').each(radio => {
-        $(radio).attr('checked', false);
-    });
-
-    Object.keys(participations).forEach(testId => {
-        $(`#${testId}-${participations[testId].variant}`).attr('checked', true);
-    });
-};
-
-const bindEvents = () => {
-    $('.js-experiments-force-ab').each(label => {
-        bean.on(label, 'click', () => {
-            const testId = label.getAttribute('data-ab-test');
-            const variantId = label.getAttribute('data-ab-variant');
-            const participations = getParticipationsFromLocalStorage();
-
-            participations[testId] = {
-                variant: variantId,
-            };
-
-            setParticipationsInLocalStorage(participations);
-        });
-    });
-
-    bean.on($('.js-experiments-clear-ab')[0], 'click', () => {
-        storage.local.set('gu.experiments.ab', []);
-        selectRadios();
-    });
-
-    bean.on($('.js-experiments-reload')[0], 'click', () => {
-        window.location.reload();
-    });
-
-    bean.on($('.js-experiments-toggle')[0], 'click', () => {
-        const toggleButton = $('.js-experiments-toggle');
-
-        if (toggleButton.text() === 'X') {
-            toggleButton.text('>');
-        } else {
-            toggleButton.text('X');
-        }
-        $('.experiments').toggleClass('experiments--hidden');
-    });
-};
-
-const applyCss = () => {
-    const el = $.create('<style type="text/css"></style>');
-
-    el.append(styles);
-    $('head').append(el);
-};
-
-const appendOverlay = (): Promise<void> => {
-    const extractData = ({ id, variants, description, expiry }) => ({
-        id,
-        variants,
-        description,
-        isSwitchedOn: config.get(`switches.ab${id}`),
-        isExpired: isExpired(expiry),
-    });
-    return Promise.all([
-        getEngagementBannerTestsFromGoogleDoc(),
-    ]).then(([asyncEpicTests, asyncBannerTests]) => {
-        const data = {
-            testGroups: [
-                {
-                    name: 'Epic',
-                    tests: [...asyncEpicTests, ...epicTests].map(extractData),
-                },
-                {
-                    name: 'Banner',
-                    tests: [...asyncBannerTests, ...engagementBannerTests].map(
-                        extractData
-                    ),
-                },
-                { name: 'Other', tests: concurrentTests.map(extractData) },
-            ],
-        };
-
-        $('body').prepend(template(overlay)(data));
-    });
-};
-
-export const showExperiments = () => {
-    appendOverlay().then(() => {
-        bindEvents();
-        selectRadios();
-        applyCss();
-    });
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/commercial-prebid-safeframe.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/commercial-prebid-safeframe.js
deleted file mode 100644
index 8c9fa02d2c5..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/commercial-prebid-safeframe.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/tests/commercial-prebid-safeframe.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export const commercialPrebidSafeframe: ABTest = {
-    id: 'CommercialPrebidSafeframe',
-    start: '2018-06-29',
-    expiry: '2019-10-18',
-    author: 'Jerome Eteve',
-    description: 'This test will serve prebid ads via safeframe line items',
-    audience: 0.01,
-    audienceOffset: 0,
-    successMeasure: 'Measurement of prebid ads yield',
-    audienceCriteria: 'n/a',
-    dataLinkNames: 'n/a',
-    idealOutcome: 'No difference between safeframe and standard',
-    showForSensitive: false,
-    canRun: () => true,
-    variants: [
-        {
-            id: 'control',
-            test: (): void => {},
-        },
-        {
-            id: 'variant',
-            test: (): void => {},
-        },
-    ],
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/global-eoy-header-test.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/global-eoy-header-test.js
deleted file mode 100644
index 59a76f31f7f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/global-eoy-header-test.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/tests/global-eoy-header-test.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from "lib/config";
-import {
-    addTrackingCodesToUrl,
-    submitViewEvent,
-} from 'common/modules/commercial/acquisitions-ophan';
-import {addCountryGroupToSupportLink} from "common/modules/commercial/support-utilities";
-
-const edition = config.get('page.edition', '').toLowerCase();
-
-const month = new Date().getMonth() + 1;    // js date month begins at 0
-
-const componentType = 'ACQUISITIONS_HEADER';
-const componentId = 'header_support';
-const campaignCode = 'header_support';
-const testName = 'GlobalEoyHeaderTest';
-
-type VariantName = 'variant' | 'variant2' | 'control';
-
-const onView = (variant: VariantName): void => submitViewEvent({
-    component: {
-        componentType,
-        products: [],
-        campaignCode,
-        id: componentId,
-    },
-    abTest: {
-        name: testName,
-        variant,
-    }
-});
-
-const buildUrl = (rrType: 'contribute' | 'subscribe', variant: VariantName): string => addTrackingCodesToUrl({
-    base: addCountryGroupToSupportLink(`https://support.theguardian.com/${rrType}`),
-    componentType,
-    componentId,
-    campaignCode,
-    abTest: {
-        name: testName,
-        variant,
-    },
-});
-
-const buildHtml = (heading: string, subheading: string, variant: VariantName): string => `
-    <div class="cta-bar__text hide-until-tablet">
-        <div class="cta-bar__heading">${heading}</div>
-        <div class="cta-bar__subheading">${subheading}</div>
-    </div>
-
-    <a class="cta-bar__cta hide-until-tablet js-change-become-member-link js-acquisition-link" data-link-name="nav2 : contribute-cta" data-edition="${edition}" href="${buildUrl('contribute', variant)}">
-        Contribute
-        <span class="inline-arrow-right inline-icon ">
-            <svg width="30" height="30" viewBox="0 0 30 30" class="inline-arrow-right__svg inline-icon__svg">
-                <path d="M22.8 14.6L15.2 7l-.7.7 5.5 6.6H6v1.5h14l-5.5 6.6.7.7 7.6-7.6v-.9"></path>
-            </svg>
-        </span>
-    </a>
-
-    <a class="cta-bar__cta hide-until-tablet js-subscribe js-acquisition-link" data-link-name="nav2 : subscribe-cta" data-edition="${edition}" href="${buildUrl('subscribe', variant)}">
-        Subscribe
-        <span class="inline-arrow-right inline-icon ">
-            <svg width="30" height="30" viewBox="0 0 30 30" class="inline-arrow-right__svg inline-icon__svg">
-                <path d="M22.8 14.6L15.2 7l-.7.7 5.5 6.6H6v1.5h14l-5.5 6.6.7.7 7.6-7.6v-.9"></path>
-            </svg>
-        </span>
-    </a>
-
-    ${edition === 'uk' ?
-        `<a class="cta-bar__cta hide-from-tablet js-change-become-member-link js-acquisition-link" data-link-name="nav2 : support-cta" data-edition="${edition}" href="${buildUrl('subscribe', variant)}">
-            Subscribe
-            <span class="inline-arrow-right inline-icon ">
-                <svg width="30" height="30" viewBox="0 0 30 30" class="inline-arrow-right__svg inline-icon__svg">
-                    <path d="M22.8 14.6L15.2 7l-.7.7 5.5 6.6H6v1.5h14l-5.5 6.6.7.7 7.6-7.6v-.9"></path>
-                </svg>
-            </span>
-        </a>` :
-        `<a class="cta-bar__cta hide-from-tablet js-change-become-member-link js-acquisition-link"
-           data-link-name="nav2 : contribute-cta" data-edition="${edition}"
-           href="${buildUrl('contribute', variant)}">
-            Contribute
-            <span class="inline-arrow-right inline-icon ">
-                <svg width="30" height="30" viewBox="0 0 30 30" class="inline-arrow-right__svg inline-icon__svg">
-                    <path d="M22.8 14.6L15.2 7l-.7.7 5.5 6.6H6v1.5h14l-5.5 6.6.7.7 7.6-7.6v-.9"></path>
-                </svg>
-            </span>
-        </a>`
-    }
-`;
-
-const getHeaderCtaBar = () => window.document.querySelector('.new-header__cta-bar');
-
-export const globalEoyHeaderTest: ABTest = {
-    id: testName,
-    start: '2020-12-02',
-    expiry: '2021-02-01',
-    author: 'Tom Forbes',
-    description: 'Test reader revenue message in header',
-    audience: 1.0,
-    audienceOffset: 0,
-    successMeasure: 'AV',
-    idealOutcome: 'AV',
-    showForSensitive: false,
-    audienceCriteria: 'All',
-    canRun: () => edition !== 'us' && (month === 12 || month === 1),
-    variants: [
-        {
-            id: 'control',
-            test: (): void => {
-                const bar = getHeaderCtaBar();
-                if (bar) {
-                    bar.innerHTML = buildHtml('Support The Guardian', 'Available for everyone, funded by readers', 'control');
-                    onView('control')
-                }
-            },
-        },
-        {
-            id: 'variant',
-            test: (): void => {
-                const bar = getHeaderCtaBar();
-                if (bar) {
-                    const heading = month === 12 ? `Support us this December` : 'Support us in 2021';
-                    bar.innerHTML = buildHtml(heading, 'Power vital, open, independent journalism', 'variant');
-                    onView('variant')
-                }
-            },
-        },
-        {
-            id: 'variant2',
-            test: (): void => {
-                const bar = getHeaderCtaBar();
-                if (bar) {
-                    const heading = month === 12 ? `Support us this December` : 'Support us in 2021';
-                    bar.innerHTML = buildHtml(heading, 'Available for everyone, funded by readers', 'variant2');
-                    onView('variant2')
-                }
-            },
-        },
-    ],
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/sign-in-gate-main-control.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/sign-in-gate-main-control.js
deleted file mode 100644
index 6fd8959d4d9..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/sign-in-gate-main-control.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/tests/sign-in-gate-main-control.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// Main test is a feature switch where we roll out winning changes from other AB sign in gate tests
-// control audience does not see the gate
-
-export const signInGateMainControl: ABTest = {
-    id: 'SignInGateMainControl',
-    start: '2020-05-20',
-    expiry: '2021-12-01',
-    author: 'Mahesh Makani',
-    description:
-        'Show sign in gate to 100% of users on 3rd article view of simple article templates, with higher priority over banners and epic. Control Audience.',
-    audience: 0.1,
-    audienceOffset: 0.9,
-    successMeasure: 'N/A - User does not see gate, only to compare to variant.',
-    audienceCriteria:
-        '3rd article of the day, lower priority than consent banner, simple articles (not gallery, live etc.), not signed in, not shown after dismiss, not on help, info sections etc. Exclude iOS 9 and guardian-live-australia. Suppresses other banners, and appears over epics',
-    ophanComponentId: 'main_control_3',
-    dataLinkNames: 'SignInGateMain',
-    idealOutcome:
-        'Increase the number of users signed in whilst running at a reasonable scale',
-    showForSensitive: false,
-    canRun: () => true,
-    variants: [
-        {
-            id: 'main-control-3',
-            test: (): void => {},
-        },
-    ],
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/sign-in-gate-main-variant.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/sign-in-gate-main-variant.js
deleted file mode 100644
index b434a79295b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/sign-in-gate-main-variant.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/tests/sign-in-gate-main-variant.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// Main test is a feature switch where we roll out winning changes from other AB sign in gate tests
-// variant audience sees the gate
-
-export const signInGateMainVariant: ABTest = {
-    id: 'SignInGateMainVariant',
-    start: '2020-05-20',
-    expiry: '2021-12-01',
-    author: 'Mahesh Makani',
-    description:
-        'Show sign in gate to 100% of users on 3rd article view of simple article templates, with higher priority over banners and epic. Main/Variant Audience.',
-    audience: 0.9,
-    audienceOffset: 0.0,
-    successMeasure: 'Users sign in or create a Guardian account',
-    audienceCriteria:
-        '3rd article of the day, lower priority than consent banner, simple articles (not gallery, live etc.), not signed in, not shown after dismiss, not on help, info sections etc. Exclude iOS 9 and guardian-live-australia. Suppresses other banners, and appears over epics',
-    ophanComponentId: 'main_variant_3',
-    dataLinkNames: 'SignInGateMain',
-    idealOutcome:
-        'Increase the number of users signed in whilst running at a reasonable scale',
-    showForSensitive: false,
-    canRun: () => true,
-    variants: [
-        {
-            id: 'main-variant-3',
-            test: (): void => {},
-        },
-    ],
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/story-questions-answer-delivery-mech.js b/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/story-questions-answer-delivery-mech.js
deleted file mode 100644
index a28a4f6360e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/experiments/tests/story-questions-answer-delivery-mech.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/experiments/tests/story-questions-answer-delivery-mech.js
- * to .ts, then delete it.
- */
-
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/fix-secondary-column.js b/static/src/javascripts.flow.archive/projects/common/modules/fix-secondary-column.js
deleted file mode 100644
index d25669e1d8e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/fix-secondary-column.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/fix-secondary-column.js
- * to .ts, then delete it.
- */
-
-// @flow strict
-
-import fastdom from 'lib/fastdom-promise';
-
-type Rect = {
-    top: number,
-    height: number,
-};
-
-const calcShowcaseOffset = (showcaseRect: Rect, mainColRect: Rect): number => {
-    const headlineHeight = showcaseRect.top - mainColRect.top;
-    const showcaseHeight = showcaseRect.height;
-    return headlineHeight + showcaseHeight;
-};
-
-export const fixSecondaryColumn = (): void => {
-    const secondaryCol = document.querySelector('.js-secondary-column');
-    const mainCol = document.querySelector('.js-content-main-column');
-    const showcase = document.querySelector('.media-primary--showcase');
-
-    if (!mainCol || !secondaryCol || !showcase) {
-        return;
-    }
-
-    fastdom
-        .measure(() => {
-            const mainColDim = mainCol.getBoundingClientRect();
-            const showcaseDim = showcase.getBoundingClientRect();
-            return calcShowcaseOffset(showcaseDim, mainColDim);
-        })
-        .then(offset =>
-            fastdom.mutate(() => {
-                secondaryCol.style.paddingTop = `${offset}px`;
-            })
-        );
-};
-
-export const _ = { calcShowcaseOffset };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/fix-secondary-column.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/fix-secondary-column.spec.js
deleted file mode 100644
index 167064e45b4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/fix-secondary-column.spec.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/fix-secondary-column.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-import { fixSecondaryColumn, _ } from './fix-secondary-column';
-
-const { calcShowcaseOffset } = _;
-
-describe('calcShowcaseOffset', () => {
-    it('should return the correct number based on the dimensions provided', () => {
-        expect(
-            calcShowcaseOffset(
-                { top: 440, height: 770 },
-                { top: 330, height: 2000 }
-            )
-        ).toBe(880);
-    });
-});
-
-describe('fixSecondaryColumn when there is no showcase element', () => {
-    const domSnippet = `
-        <div class="js-content-main-column"></div>
-        <div class="content__secondary-column js-secondary-column">
-            <div class="aside-slot-container js-aside-slot-container">
-            </div>
-        </div>
-    `;
-
-    beforeEach(() => {
-        jest.resetAllMocks();
-        if (document.body) {
-            document.body.innerHTML = domSnippet;
-        }
-    });
-
-    it('should do nothing if a showcase element does not exist', () => {
-        fixSecondaryColumn();
-        // $FlowFixMe: This is a test and it will not be null.
-        const col: HTMLElement = document.querySelector('.js-secondary-column');
-        expect(col.style.paddingTop).toBe('');
-    });
-});
-
-describe('fixSecondaryColumn when showcase element is present', () => {
-    const showcaseDomSnippet = `
-        <div class="js-content-main-column">
-            <figure class="media-primary--showcase"></figure>
-        </div>
-        <div class="content__secondary-column js-secondary-column">
-            <div class="aside-slot-container js-aside-slot-container">
-            </div>
-        </div>
-    `;
-
-    beforeEach(() => {
-        jest.resetAllMocks();
-        if (document.body) {
-            document.body.innerHTML = showcaseDomSnippet;
-        }
-    });
-
-    it('should set the padding-top of the secondary column to the correct value', done => {
-        jest.spyOn(fastdom, 'measure').mockReturnValue(Promise.resolve(880));
-
-        fastdom
-            .mutate(() => {
-                fixSecondaryColumn();
-            })
-            .then(() => {
-                // $FlowFixMe: This is a test and it will not be null.
-                const secondaryCol: HTMLElement = document.querySelector(
-                    '.js-secondary-column'
-                );
-                expect(secondaryCol.style.paddingTop).toEqual('880px');
-                done();
-            });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/gallery/lightbox.js b/static/src/javascripts.flow.archive/projects/common/modules/gallery/lightbox.js
deleted file mode 100644
index 8ae71b75687..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/gallery/lightbox.js
+++ /dev/null
@@ -1,726 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/gallery/lightbox.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { getBreakpoint, hasTouchScreen, isBreakpoint } from 'lib/detect';
-import FiniteStateMachine from 'lib/fsm';
-import mediator from 'lib/mediator';
-import template from 'lodash/template';
-import throttle from 'lodash/throttle';
-import { supportsPushState, pushUrl, back as urlBack } from 'lib/url';
-import { Component } from 'common/modules/component';
-import { inlineSvg } from 'common/views/svgs';
-import blockSharingTpl from 'raw-loader!common/views/content/block-sharing.html';
-import buttonTpl from 'raw-loader!common/views/content/button.html';
-import endslateTpl from 'raw-loader!common/views/content/endslate.html';
-import loaderTpl from 'raw-loader!common/views/content/loader.html';
-import shareButtonTpl from 'raw-loader!common/views/content/share-button.html';
-import { loadCssPromise } from 'lib/load-css-promise';
-import fetch from 'lib/fetch';
-
-type ImageJson = {
-    caption: string,
-    credit: string,
-    displayCredit: string,
-    ratio: number,
-    role: string,
-    sizes: string,
-    src: string,
-    srcsets: string,
-};
-
-type GalleryJson = {
-    id: string,
-    headline: string,
-    shouldHideAdverts: boolean,
-    standfirst: string,
-    images: Array<ImageJson>,
-};
-
-const pulseButton = (button: HTMLElement): void => {
-    const $btn: bonzo = bonzo(button);
-    $btn.addClass('gallery-lightbox__button-pulse');
-
-    window.setTimeout(() => {
-        $btn.removeClass('gallery-lightbox__button-pulse');
-    }, 75);
-};
-
-class Endslate extends Component {
-    prerender(): void {
-        bonzo(this.elem).addClass(this.componentClass);
-    }
-}
-
-class GalleryLightbox {
-    showEndslate: boolean;
-    useSwipe: boolean;
-    swipeThreshold: number;
-    lightboxEl: bonzo;
-    $lightboxEl: bonzo;
-    $indexEl: bonzo;
-    $countEl: bonzo;
-    $contentEl: bonzo;
-    nextBtn: HTMLElement;
-    prevBtn: HTMLElement;
-    closeBtn: HTMLElement;
-    infoBtn: HTMLElement;
-    $swipeContainer: bonzo;
-    resize: Function;
-    toggleInfo: Function;
-    fsm: FiniteStateMachine;
-    states: Object;
-    images: Array<ImageJson>;
-    swipeContainerWidth: number;
-    $slides: bonzo;
-    index: number;
-    $images: bonzo;
-    galleryJson: GalleryJson;
-    bodyScrollPosition: number;
-    endslateEl: bonzo;
-    endslate: Object;
-    startIndex: number;
-    handleKeyEvents: (KeyboardEvent) => void;
-
-    constructor(): void {
-        // CONFIG
-        this.showEndslate =
-            getBreakpoint() !== 'mobile' &&
-            config.get('page.section') !== 'childrens-books-site' &&
-            config.get('page.contentType') === 'Gallery';
-        this.useSwipe = hasTouchScreen();
-        this.swipeThreshold = 0.05;
-        this.handleKeyEvents = this.unboundHandleKeyEvents.bind(this);
-
-        // TEMPLATE
-        const generateButtonHTML = (label: string): string => {
-            const tmpl: string = buttonTpl;
-            return template(tmpl)({
-                label,
-            });
-        };
-
-        const galleryLightboxHtml: string = `<div class="overlay gallery-lightbox gallery-lightbox--closed gallery-lightbox--hover">
-                <div class="gallery-lightbox__sidebar">
-                    ${generateButtonHTML('close')}
-                    <div class="gallery-lightbox__progress  gallery-lightbox__progress--sidebar">
-                        <span class="gallery-lightbox__index js-gallery-index"></span>
-                        <span class="gallery-lightbox__progress-separator"></span>
-                        <span class="gallery-lightbox__count js-gallery-count"></span>
-                    </div>
-                    ${generateButtonHTML('next')}
-                    ${generateButtonHTML('prev')}
-                    ${generateButtonHTML('info-button')}
-                </div>
-                <div class="js-gallery-swipe gallery-lightbox__swipe-container">
-                    <ul class="gallery-lightbox__content js-gallery-content"></ul>
-                </div>
-            </div>`;
-
-        // ELEMENT BINDINGS
-        this.lightboxEl = bonzo.create(galleryLightboxHtml);
-        this.$lightboxEl = bonzo(this.lightboxEl).prependTo(document.body);
-        this.$indexEl = $('.js-gallery-index', this.lightboxEl);
-        this.$countEl = $('.js-gallery-count', this.lightboxEl);
-        this.$contentEl = $('.js-gallery-content', this.lightboxEl);
-        this.nextBtn = qwery('.js-gallery-next', this.lightboxEl)[0];
-        this.prevBtn = qwery('.js-gallery-prev', this.lightboxEl)[0];
-        this.closeBtn = qwery('.js-gallery-close', this.lightboxEl)[0];
-        this.infoBtn = qwery('.js-gallery-info-button', this.lightboxEl)[0];
-        this.$swipeContainer = $('.js-gallery-swipe');
-        bean.on(this.nextBtn, 'click', this.trigger.bind(this, 'next'));
-        bean.on(this.prevBtn, 'click', this.trigger.bind(this, 'prev'));
-        bean.on(this.closeBtn, 'click', this.close.bind(this));
-        bean.on(this.infoBtn, 'click', this.trigger.bind(this, 'toggleInfo'));
-        this.resize = this.trigger.bind(this, 'resize');
-        this.toggleInfo = (e): void => {
-            const infoPanelClick =
-                bonzo(e.target).hasClass('js-gallery-lightbox-info') ||
-                $.ancestor(e.target, 'js-gallery-lightbox-info');
-
-            if (!infoPanelClick) {
-                this.trigger('toggleInfo');
-            }
-        };
-
-        if (hasTouchScreen()) {
-            this.disableHover();
-        }
-
-        bean.on(window, 'popstate', event => {
-            if (!event.state) {
-                this.trigger('close');
-            }
-        });
-
-        // FSM CONFIG
-        this.fsm = new FiniteStateMachine({
-            initial: 'closed',
-            onChangeState(oldState: string, newState: string): void {
-                this.$lightboxEl
-                    .removeClass(`gallery-lightbox--${oldState}`)
-                    .addClass(`gallery-lightbox--${newState}`);
-            },
-            context: this,
-            states: this.states,
-        });
-    }
-
-    generateImgHTML(img: Object, i: number): string {
-        const blockShortUrl = config.get('page.host') + config.get('page.shortUrlId');
-        const urlPrefix = img.src.startsWith('//') ? 'http:' : '';
-        const shareItems: Array<{
-            text: string,
-            css: string,
-            icon: string,
-            url: string,
-        }> = [
-            {
-                text: 'Facebook',
-                css: 'facebook',
-                icon: inlineSvg('shareFacebook', ['icon']),
-                url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-                    `${blockShortUrl}/sfb#img-${i}`
-                )}`,
-            },
-            {
-                text: 'Twitter',
-                css: 'twitter',
-                icon: inlineSvg('shareTwitter', ['icon']),
-                url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-                    config.get('page.webTitle')
-                )}&url=${encodeURIComponent(`${blockShortUrl}/stw#img-${i}`)}`,
-            },
-            {
-                text: 'Pinterest',
-                css: 'pinterest',
-                icon: inlineSvg('sharePinterest', ['icon']),
-                url: encodeURI(
-                    `http://www.pinterest.com/pin/create/button/?description=${config.get(
-                        'page.webTitle'
-                    )}&url=${blockShortUrl}&media=${urlPrefix}${img.src}`
-                ),
-            },
-        ];
-
-        return template(blockSharingTpl.replace(/^\s+|\s+$/gm, ''))({
-            articleType: 'gallery',
-            count: this.images.length,
-            index: i,
-            caption: img.caption,
-            credit: img.displayCredit ? img.credit : '',
-            shareButtons: shareItems
-                .map(s => template(shareButtonTpl)(s))
-                .join(''),
-        });
-    }
-
-    initSwipe(): void {
-        let threshold; // time in ms
-        let ox;
-        let dx;
-        const updateTime = 20;
-
-        bean.on(
-            this.$swipeContainer[0],
-            'touchstart',
-            (e: TouchEvent): void => {
-                threshold = this.swipeContainerWidth * this.swipeThreshold;
-                ox = e.touches[0].pageX;
-                dx = 0;
-            }
-        );
-
-        const touchMove = (e: TouchEvent): void => {
-            e.preventDefault();
-
-            // Flow doesn't accept the WebKit-specific TouchEvent.scale
-            // https://developer.apple.com/documentation/webkitjs/touchevent/1632169-scale
-            // $FlowFixMe
-            if (e.touches.length > 1 || (e.scale && e.scale !== 1)) {
-                return;
-            }
-
-            dx = e.touches[0].pageX - ox;
-            this.translateContent(this.index, dx, updateTime);
-        };
-
-        bean.on(
-            this.$swipeContainer[0],
-            'touchmove',
-            throttle(touchMove, updateTime, {
-                trailing: false,
-            })
-        );
-
-        bean.on(
-            this.$swipeContainer[0],
-            'touchend',
-            (): void => {
-                let direction;
-
-                if (Math.abs(dx) > threshold) {
-                    direction = dx > threshold ? 1 : -1;
-                } else {
-                    direction = 0;
-                }
-
-                dx = 0;
-
-                if (direction === 1) {
-                    if (this.index > 1) {
-                        this.trigger('prev');
-                    } else {
-                        this.trigger('reload');
-                    }
-                } else if (direction === -1) {
-                    if (this.index < this.$slides.length) {
-                        this.trigger('next');
-                    } else {
-                        this.trigger('reload');
-                    }
-                } else {
-                    this.trigger('reload');
-                }
-            }
-        );
-    }
-
-    disableHover(): void {
-        this.$lightboxEl.removeClass('gallery-lightbox--hover');
-    }
-
-    trigger(event: string, data?: GalleryJson): void {
-        this.fsm.trigger(event, data);
-    }
-
-    static loadNextOrPrevious(
-        currentImageId: string,
-        direction: string
-    ): Promise<Object> {
-        const pathPrefix = direction === 'forwards' ? 'getnext' : 'getprev';
-        const seriesTag = config
-            .get('page.nonKeywordTagIds', '')
-            .split(',')
-            .filter(tag => tag.includes('series'))[0];
-        const fetchUrl = `/${pathPrefix}/${seriesTag}/${currentImageId}`;
-        return fetch(fetchUrl)
-            .then(response => response.json())
-            .then(json =>
-                // filter out non-lightbox items in the series
-                json.filter(image => image.images.length > 0)
-            );
-    }
-
-    loadOrOpen(newGalleryJson: GalleryJson, index: number): void {
-        this.index = index;
-        if (
-            this.galleryJson &&
-            newGalleryJson.id === this.galleryJson.id &&
-            newGalleryJson.images.length === this.galleryJson.images.length
-        ) {
-            this.trigger('open');
-        } else {
-            this.trigger('loadJson', newGalleryJson);
-        }
-    }
-
-    fetchSurroundingJson(galleryJson: GalleryJson): Promise<Object> {
-        // if this is an image page, load series of images into the lightbox
-        if (
-            config.get('page.contentType') === 'ImageContent' &&
-            galleryJson.images.length < 2
-        ) {
-            // store current path with leading slash removed
-            const currentId = window.location.pathname.substring(1);
-            // fetch next and previous images and load them
-            return Promise.all([
-                GalleryLightbox.loadNextOrPrevious(currentId, 'forwards'),
-                GalleryLightbox.loadNextOrPrevious(currentId, 'backwards'),
-            ])
-                .then(([nextResult, previousResult]) => ({
-                    next: nextResult.map(e => e.images[0]),
-                    previous: previousResult.map(e => e.images[0]),
-                }))
-                .then(({ next, previous }) => {
-                    // combine this image, and the ones before and after it, into one big array
-                    const allImages = previous
-                        .reverse()
-                        .concat(galleryJson.images, next);
-                    if (allImages.length < 2) {
-                        bonzo([this.nextBtn, this.prevBtn]).hide();
-                        $(
-                            '.gallery-lightbox__progress',
-                            this.lightboxEl
-                        ).hide();
-                    }
-
-                    galleryJson.images = allImages;
-                    this.startIndex = previous.length + 1;
-
-                    return galleryJson;
-                });
-        }
-
-        return Promise.resolve(galleryJson);
-    }
-
-    loadHtml(json: GalleryJson): void {
-        this.images = json.images || [];
-        const imagesHtml = json.images
-            .map((img, i) => this.generateImgHTML(img, i + 1))
-            .join('');
-        this.$contentEl.html(imagesHtml);
-        this.$images = $('.js-gallery-lightbox-img', this.$contentEl[0]);
-        this.$countEl.text(this.images.length);
-    }
-
-    loadSurroundingImages(index: number, count: number): void {
-        let imageContent;
-        let $img;
-
-        [-1, 0, 1]
-            .map(i => (index + i === 0 ? count - 1 : (index - 1 + i) % count))
-            .forEach(i => {
-                imageContent = this.images[i];
-                $img = bonzo(this.$images[i]);
-
-                if (!$img.attr('src')) {
-                    $img.parent().append(bonzo.create(loaderTpl));
-
-                    $img.attr('src', imageContent.src);
-                    $img.attr('srcset', imageContent.srcsets);
-                    $img.attr('sizes', imageContent.sizes);
-
-                    bean.one($img[0], 'load', () => {
-                        $('.js-loader').remove();
-                    });
-                }
-            });
-    }
-
-    translateContent(imgIndex: number, offset: number, duration: number): void {
-        const px = -1 * (imgIndex - 1) * this.swipeContainerWidth;
-        const contentEl = this.$contentEl[0];
-
-        Object.assign(contentEl.style, {
-            webkitTransitionDuration: `${duration}ms`,
-            mozTransitionDuration: `${duration}ms`,
-            msTransitionDuration: `${duration}ms`,
-            transitionDuration: `${duration}ms`,
-            webkitTransform: `translate(${px + offset}px,0) translateZ(0)`,
-            mozTransform: `translate(${px + offset}px,0)`,
-            msTransform: `translate(${px + offset}px,0)`,
-            transform: `translate(${px + offset}px,0) translateZ(0)`,
-        });
-    }
-
-    show(): void {
-        const $body = bonzo(document.body);
-        this.bodyScrollPosition = $body.scrollTop();
-        $body.addClass('has-overlay');
-        this.$lightboxEl.addClass('gallery-lightbox--open');
-        bean.off(document.body, 'keydown', this.handleKeyEvents); // prevent double binding
-        bean.on(document.body, 'keydown', this.handleKeyEvents);
-    }
-
-    close(): void {
-        if (supportsPushState) {
-            urlBack();
-        } else {
-            this.trigger('close');
-        }
-        this.trigger('close');
-    }
-
-    hide(): void {
-        // remove has-overlay first to show body behind lightbox then scroll and
-        // close the lightbox at the same time. this way we get no scroll flicker
-        const $body = bonzo(document.body);
-        $body.removeClass('has-overlay');
-        bean.off(document.body, 'keydown', this.handleKeyEvents);
-        window.setTimeout(() => {
-            if (this.bodyScrollPosition) {
-                $body.scrollTop(this.bodyScrollPosition);
-            }
-            this.$lightboxEl.removeClass('gallery-lightbox--open');
-            mediator.emit('ui:images:vh');
-        }, 1);
-    }
-
-    unboundHandleKeyEvents(e: KeyboardEvent): void {
-        if (e.keyCode === 37) {
-            // left
-            this.trigger('prev');
-        } else if (e.keyCode === 39) {
-            // right
-            this.trigger('next');
-        } else if (e.keyCode === 38) {
-            // up
-            this.trigger('showInfo');
-        } else if (e.keyCode === 40) {
-            // down
-            this.trigger('hideInfo');
-        } else if (e.keyCode === 27) {
-            // esc
-            this.close();
-        } else if (e.keyCode === 73) {
-            // 'i'
-            this.trigger('toggleInfo');
-        }
-    }
-
-    endslate = new Endslate();
-
-    loadEndslate(): void {
-        if (!this.endslate.rendered && this.$contentEl) {
-            this.endslateEl = bonzo.create(endslateTpl);
-            this.$contentEl.append(this.endslateEl);
-
-            this.endslate.componentClass = 'gallery-lightbox__endslate';
-            this.endslate.endpoint = '/gallery/most-viewed.json';
-
-            this.endslate.fetch(
-                qwery('.js-gallery-endslate', this.endslateEl),
-                'html'
-            );
-        }
-    }
-
-    states = {
-        closed: {
-            enter(): void {
-                this.hide();
-            },
-            leave(): void {
-                this.show();
-                pushUrl({}, document.title, `/${this.galleryJson.id}`);
-            },
-            events: {
-                open(): void {
-                    if (this.swipe) {
-                        this.swipe.slide(this.index, 0);
-                    }
-                    this.state = 'image';
-                },
-                loadJson(json: GalleryJson): void {
-                    this.galleryJson = json;
-                    this.loadHtml(json);
-
-                    if (this.showEndslate) {
-                        this.loadEndslate();
-                    }
-
-                    this.$slides = $('.js-gallery-slide', this.$contentEl[0]);
-
-                    if (this.useSwipe) {
-                        this.initSwipe();
-                    }
-
-                    this.state = 'image';
-                },
-            },
-        },
-
-        image: {
-            enter(): void {
-                this.swipeContainerWidth = this.$swipeContainer.dim().width;
-
-                // load prev/current/next
-                this.loadSurroundingImages(this.index, this.images.length);
-
-                this.translateContent(
-                    this.index,
-                    0,
-                    this.useSwipe &&
-                        isBreakpoint({
-                            max: 'tablet',
-                        })
-                        ? 100
-                        : 0
-                );
-
-                pushUrl(
-                    {},
-                    document.title,
-                    `/${this.galleryJson.id}#img-${this.index}`,
-                    true
-                );
-
-                // event bindings
-                bean.on(
-                    this.$swipeContainer[0],
-                    'click',
-                    '.js-gallery-content',
-                    this.toggleInfo
-                );
-                mediator.on('window:throttledResize', this.resize);
-
-                // meta
-                this.$indexEl.text(this.index);
-            },
-            leave(): void {
-                bean.off(this.$swipeContainer[0], 'click', this.toggleInfo);
-                mediator.off('window:throttledResize', this.resize);
-            },
-            events: {
-                next(): void {
-                    pulseButton(this.nextBtn);
-
-                    if (this.index === this.images.length) {
-                        // last img
-                        if (this.showEndslate) {
-                            this.state = 'endslate';
-                        } else {
-                            this.index = 1;
-                            this.reloadState = true;
-                        }
-                    } else {
-                        this.index += 1;
-                        this.reloadState = true;
-                    }
-                },
-                prev(): void {
-                    pulseButton(this.prevBtn);
-
-                    if (this.index === 1) {
-                        // first img
-                        if (this.showEndslate) {
-                            this.state = 'endslate';
-                        } else {
-                            this.index = this.images.length;
-                            this.reloadState = true;
-                        }
-                    } else {
-                        this.index -= 1;
-                        this.reloadState = true;
-                    }
-                },
-                reload(): void {
-                    this.reloadState = true;
-                },
-                toggleInfo(): void {
-                    pulseButton(this.infoBtn);
-                    this.$lightboxEl.toggleClass('gallery-lightbox--show-info');
-                },
-                hideInfo(): void {
-                    pulseButton(this.infoBtn);
-                    this.$lightboxEl.removeClass('gallery-lightbox--show-info');
-                },
-                showInfo(): void {
-                    pulseButton(this.infoBtn);
-                    this.$lightboxEl.addClass('gallery-lightbox--show-info');
-                },
-                resize(): void {
-                    this.swipeContainerWidth = this.$swipeContainer.dim().width;
-                    this.loadSurroundingImages(this.index, this.images.length); // regenerate src
-                    this.translateContent(this.index, 0, 0);
-                },
-                close(): void {
-                    this.state = 'closed';
-                },
-            },
-        },
-
-        endslate: {
-            enter(): void {
-                this.translateContent(this.$slides.length, 0, 0);
-                this.index = this.images.length + 1;
-                mediator.on('window:throttledResize', this.resize);
-            },
-            leave(): void {
-                mediator.off('window:throttledResize', this.resize);
-            },
-            events: {
-                next(): void {
-                    pulseButton(this.nextBtn);
-                    this.index = 1;
-                    this.state = 'image';
-                },
-                prev(): void {
-                    pulseButton(this.prevBtn);
-                    this.index = this.images.length;
-                    this.state = 'image';
-                },
-                reload(): void {
-                    this.reloadState = true;
-                },
-                resize(): void {
-                    this.swipeContainerWidth = this.$swipeContainer.dim().width;
-                    this.translateContent(this.$slides.length, 0, 0);
-                },
-                close(): void {
-                    this.state = 'closed';
-                },
-            },
-        },
-    };
-}
-
-const init = (): void => {
-    loadCssPromise.then(() => {
-        const images = config.get('page.lightboxImages');
-
-        if (images && images.images.length > 0) {
-            const lightbox = new GalleryLightbox();
-            const galleryHash = window.location.hash;
-
-            bean.on(document.body, 'click', '.js-gallerythumbs', (e: Event) => {
-                e.preventDefault();
-
-                const $el = bonzo(e.currentTarget);
-                const galleryHref =
-                    $el.attr('href') || $el.attr('data-gallery-url');
-                const galleryHrefParts = galleryHref.split('#img-');
-                const parsedGalleryIndex = parseInt(galleryHrefParts[1], 10);
-                const galleryIndex = Number.isNaN(parsedGalleryIndex)
-                    ? 1
-                    : parsedGalleryIndex; // 1-based index
-
-                lightbox.fetchSurroundingJson(images).then(allImages => {
-                    const startIndex = lightbox.startIndex
-                        ? lightbox.startIndex
-                        : galleryIndex;
-                    lightbox.loadOrOpen(allImages, startIndex);
-                });
-            });
-
-            const galleryId = `/${config.get('page.pageId')}`;
-            const match = /\?index=(\d+)/.exec(document.location.href);
-            const res = /^#(?:img-)?(\d+)$/.exec(galleryHash);
-
-            let lightboxIndex = 0;
-
-            if (match) {
-                // index specified so launch lightbox at that index
-                pushUrl({}, document.title, galleryId, true); // lets back work properly
-                lightboxIndex = parseInt(match[1], 10);
-            } else if (res) {
-                lightboxIndex = parseInt(res[1], 10);
-            }
-
-            if (lightboxIndex > 0) {
-                lightbox.fetchSurroundingJson(images).then(allImages => {
-                    lightbox.loadOrOpen(allImages, lightboxIndex);
-                });
-            }
-        }
-    });
-};
-
-export { init };
-export const _ = { GalleryLightbox };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/account-profile.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/account-profile.js
deleted file mode 100644
index 57a48298b25..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/account-profile.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/account-profile.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/*
- *  Handle History updates and monitor for unsaved changes on account profile
- *  forms.
- */
-import $ from 'lib/$';
-import bean from 'bean';
-import bonzo from 'bonzo';
-import { pushUrl } from 'lib/url';
-import avatarApi from 'common/modules/avatar/api';
-import {
-    prependSuccessMessage,
-    prependErrorMessage,
-} from './modules/prependMessage';
-
-const classes = {
-    forms: '.js-account-profile-forms',
-    accountForm: '.js-account-details-form',
-    publicForm: '.js-public-profile-form',
-    tabs: '.js-tabs',
-    formError: '.form__error',
-    formSuccess: '.form__success',
-    changed: 'js-form-changed',
-    textInput: '.text-input',
-    avatarUploadForm: '.js-avatar-upload-form',
-    avatarUploadButton: '.js-avatar-upload-button',
-    memberShipContainer: '.js-memebership-tab-container',
-    tabsContainer: '.js-account-profile-tabs',
-};
-
-const messages = {
-    noServerError:
-        'Sorry, the Avatar upload service is currently unavailable. Please try again shortly.',
-    avatarUploadSuccess:
-        'Thank you for uploading your avatar. It will be checked by Guardian moderators shortly.',
-    avatarUploadFailure: 'Sorry, something went wrong. Please try again.',
-};
-
-const avatarUploadByApi = (avatarForm: HTMLFormElement): void => {
-    const form = ((document.querySelector(
-        `form${classes.avatarUploadForm}`
-    ): any): HTMLFormElement);
-    if (form) {
-        const formData = new FormData(form);
-
-        // disable form while submitting to prevent overlapping submissions
-        const avatarUploadButton = ((document.querySelector(
-            classes.avatarUploadButton
-        ): any): HTMLButtonElement);
-        avatarUploadButton.disabled = true;
-
-        avatarApi.updateAvatar(formData).then(
-            () => {
-                prependSuccessMessage(messages.avatarUploadSuccess, avatarForm);
-            },
-            err => {
-                if (err.status >= 400 && err.status < 500) {
-                    prependErrorMessage(
-                        JSON.parse(err.responseText).message ||
-                            messages.avatarUploadFailure,
-                        avatarForm
-                    );
-                } else {
-                    prependErrorMessage(messages.noServerError, avatarForm);
-                }
-
-                avatarUploadButton.disabled = false;
-            }
-        );
-    }
-};
-
-class AccountProfile {
-    unsavedFields: Array<HTMLElement>;
-    accountProfileForms: HTMLFormElement;
-    unsavedChangesForm: ?HTMLFormElement;
-
-    constructor() {
-        this.unsavedFields = [];
-
-        this.accountProfileForms = ((document.querySelector(
-            classes.forms
-        ): any): HTMLFormElement);
-
-        if (this.accountProfileForms) {
-            this.bindAvatarUpload();
-
-            this.bindInputs(
-                this.accountProfileForms.querySelector(classes.accountForm)
-            );
-            this.bindInputs(
-                this.accountProfileForms.querySelector(classes.publicForm)
-            );
-
-            const tabs = document.querySelector(classes.tabsContainer);
-
-            require.ensure(
-                [],
-                // webpack needs the require function to be called 'require'
-                // eslint-disable-next-line no-shadow
-                require => {
-                    require('bootstraps/enhanced/membership').init();
-                },
-                'membership'
-            );
-
-            $(`${classes.tabs} .tabs__tab a`).each(function() {
-                // enhance tab urls to work with JS tabs module
-                if (!this.dataset.tabsIgnore) {
-                    this.href = this.getAttribute('data-tabs-href');
-                }
-            });
-            if (tabs) {
-                bean.on(tabs, 'click', event => this.handleTabsClick(event));
-            }
-        }
-    }
-
-    /*
-     *   Handle click on form tabs, change history if necessary and render error
-     *   message if form contains unsaved changes.
-     */
-    handleTabsClick(event: Event) {
-        if (
-            event.target instanceof HTMLElement &&
-            event.target.nodeName.toLowerCase() === 'a'
-        ) {
-            const eventTarget: HTMLAnchorElement = (event.target: any);
-            if (eventTarget.dataset.tabsIgnore) {
-                if (eventTarget.href) window.location.assign(eventTarget.href);
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            } else if (this.unsavedChangesForm) {
-                // This aliasing needs to happen immediately after the null check or flow will be sad
-                const form = this.unsavedChangesForm;
-                event.preventDefault();
-                event.stopImmediatePropagation();
-                // Prevent multiple errors from appearing
-                if (!form.querySelector(classes.formError)) {
-                    // Append error message
-                    bonzo(form).prepend(this.genUnsavedError());
-                    // Bind form submit to error message 'save' action
-                    bean.on(
-                        form.querySelector('.js-save-unsaved'),
-                        'click',
-                        () => {
-                            form.submit();
-                        }
-                    );
-                }
-            } else {
-                const nextUrl = eventTarget.getAttribute('data-pushstate-url');
-                if (nextUrl) {
-                    pushUrl({}, eventTarget.innerHTML, nextUrl);
-                }
-            }
-        }
-    }
-
-    /*
-     *   Handle user avatar upload
-     *   TO DO: Use html5 file api to validate file size prior to upload @chrisfinch
-     */
-    bindAvatarUpload() {
-        const avatarForm = this.accountProfileForms.querySelector(
-            classes.avatarUploadForm
-        );
-
-        if (avatarForm) {
-            bean.on(avatarForm, 'submit', event => {
-                event.preventDefault();
-
-                avatarUploadByApi(((avatarForm: any): HTMLFormElement));
-            });
-        }
-    }
-
-    /*
-     *   Generate a descriptive error message for when a user attempts to leave
-     *   a form with unsaved changes.
-     */
-    genUnsavedError() {
-        let labelId;
-        let text;
-        const errorDivStart = '<div class="form__error">';
-        const errorDivEnd = '</div>';
-        const errorSaveLink =
-            '<a href="#" class="js-save-unsaved">Save changes</a>';
-        let errorMessageStart = 'Your form has unsaved changes in ';
-
-        for (let i = 0; i < this.unsavedFields.length; i += 1) {
-            labelId = this.unsavedFields[i].id;
-            const label = this.accountProfileForms.querySelector(
-                `[for="${labelId}"]`
-            );
-            if (label) {
-                text = label.innerHTML;
-                errorMessageStart += `"${text}"`;
-                if (i === this.unsavedFields.length - 1) {
-                    errorMessageStart += '. ';
-                } else if (i === this.unsavedFields.length - 2) {
-                    errorMessageStart += ' and ';
-                } else {
-                    errorMessageStart += ', ';
-                }
-            }
-        }
-
-        return errorDivStart + errorMessageStart + errorSaveLink + errorDivEnd;
-    }
-
-    /*
-     *   Register a form and form field as containing unsaved changes
-     */
-    onInputChange(event: Event) {
-        const input = ((event.target: any):
-            | HTMLInputElement
-            | HTMLTextAreaElement);
-        bonzo(input.form).addClass(classes.changed);
-        this.unsavedChangesForm = input.form;
-        if (!this.unsavedFields.some(el => el === input)) {
-            this.unsavedFields.push(input);
-        }
-    }
-
-    /*
-     *   Bind keyup events on input fields and register parent form on element
-     */
-    bindInputs(form: ?HTMLElement) {
-        if (form instanceof HTMLFormElement) {
-            const inputs: Array<HTMLInputElement> = (Array.from(
-                form.querySelectorAll(classes.textInput)
-            ): Array<any>);
-            inputs
-                .concat(Array.from(form.querySelectorAll('select')))
-                .forEach(input => {
-                    if (input.type === 'select-one') {
-                        input.addEventListener('change', event =>
-                            this.onInputChange(event)
-                        );
-                    } else {
-                        input.addEventListener('input', event =>
-                            this.onInputChange(event)
-                        );
-                    }
-                });
-        }
-    }
-}
-
-export { AccountProfile };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs.js
deleted file mode 100644
index c9a87dfe359..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/ad-prefs.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React, { Component, render } from 'preact/compat';
-import { FeedbackFlashBox } from 'common/modules/identity/ad-prefs/FeedbackFlashBox';
-import { ConsentBox } from 'common/modules/identity/ad-prefs/ConsentBox';
-
-import fastdom from 'lib/fastdom-promise';
-import {
-    getAdConsentState,
-    setAdConsentState,
-    getAllAdConsentsWithState,
-} from 'common/modules/commercial/ad-prefs.lib';
-import type {
-    AdConsent,
-    AdConsentWithState,
-} from 'common/modules/commercial/ad-prefs.lib';
-
-type AdPrefsWrapperProps = {
-    getAdConsentState: (consent: AdConsent) => ?boolean,
-    setAdConsentState: (consent: AdConsent, state: boolean) => void,
-    initialConsentsWithState: AdConsentWithState[],
-};
-
-const rootSelector: string = '.js-manage-account__ad-prefs';
-
-class AdPrefsWrapper extends Component<
-    AdPrefsWrapperProps,
-    {
-        consentsWithState: AdConsentWithState[],
-        changesPending: boolean,
-        flashing: boolean,
-    }
-> {
-    constructor(props: AdPrefsWrapperProps): void {
-        super(props);
-        this.state = {
-            changesPending: false,
-            flashing: false,
-            consentsWithState: [...this.props.initialConsentsWithState],
-        };
-    }
-
-    onUpdate(consentId: number, state: ?boolean): void {
-        const consentsWithState = [...this.state.consentsWithState];
-        const changesPending =
-            this.props.getAdConsentState(
-                consentsWithState[consentId].consent
-            ) !== state;
-        consentsWithState[consentId].state = state;
-        if (this.SubmitButtonRef) {
-            this.SubmitButtonRef.scrollIntoView(false);
-        }
-        this.setState({
-            consentsWithState,
-            changesPending,
-            flashing: false,
-        });
-    }
-
-    onSubmit(event: SyntheticInputEvent<HTMLFormElement>): void {
-        event.preventDefault();
-        this.state.consentsWithState.forEach(consentWithState => {
-            if (typeof consentWithState.state === 'boolean') {
-                this.props.setAdConsentState(
-                    consentWithState.consent,
-                    consentWithState.state
-                );
-            }
-        });
-        this.setState({
-            changesPending: false,
-            flashing: true,
-        });
-    }
-
-    FeedbackFlashBoxRef: ?FeedbackFlashBox;
-    SubmitButtonRef: ?HTMLElement;
-
-    render() {
-        return (
-            <form
-                className="identity-ad-prefs-manager"
-                onSubmit={ev => this.onSubmit(ev)}>
-                <div>
-                    {this.state.consentsWithState.map(
-                        (consentWithState, index) => (
-                            <ConsentBox
-                                consent={consentWithState.consent}
-                                state={consentWithState.state}
-                                key={consentWithState.consent.cookie}
-                                onUpdate={(state: ?boolean) => {
-                                    this.onUpdate(index, state);
-                                }}
-                            />
-                        )
-                    )}
-                </div>
-                <div
-                    className="identity-ad-prefs-manager__footer"
-                    ref={child => {
-                        this.SubmitButtonRef = child;
-                    }}>
-                    <button
-                        disabled={this.state.changesPending ? null : 'disabled'}
-                        className="manage-account__button manage-account__button--center"
-                        data-link-name="ad-prefs : submit"
-                        type="submit">
-                        Save my settings
-                    </button>
-                    <FeedbackFlashBox flashing={this.state.flashing}>
-                        Your settings have been saved.
-                    </FeedbackFlashBox>
-                </div>
-            </form>
-        );
-    }
-}
-
-const enhanceAdPrefs = (): void => {
-    fastdom
-        .measure(() => Array.from(document.querySelectorAll(rootSelector)))
-        .then((wrapperEls: HTMLElement[]) => {
-            wrapperEls.forEach(_ => {
-                fastdom.mutate(() => {
-                    render(
-                        <AdPrefsWrapper
-                            initialConsentsWithState={getAllAdConsentsWithState()}
-                            getAdConsentState={getAdConsentState}
-                            setAdConsentState={setAdConsentState}
-                        />,
-                        _
-                    );
-                });
-            });
-        });
-};
-
-export { enhanceAdPrefs };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/ConsentBox.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/ConsentBox.js
deleted file mode 100644
index 03403aec7ff..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/ConsentBox.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/ad-prefs/ConsentBox.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React, { Component } from 'preact/compat';
-import type { AdConsent } from 'common/modules/commercial/ad-prefs.lib';
-import { getConsentWording } from './wordings';
-import type { ConsentWording, CheckboxWording } from './wordings';
-
-type ConsentRadioButtonProps = {
-    value: string,
-    checked: boolean,
-    wording: CheckboxWording,
-    consent: AdConsent,
-    onToggle: () => void,
-};
-
-type ConsentBoxProps = {
-    consent: AdConsent,
-    state: ?boolean,
-    onUpdate: (state: ?boolean) => void,
-};
-
-class ConsentRadioButton extends Component<ConsentRadioButtonProps, {}> {
-    handleChange(event: SyntheticInputEvent<HTMLInputElement>): void {
-        if (event.target.checked) {
-            this.props.onToggle();
-        }
-    }
-    render() {
-        const id = `gu-ad-prefs-${this.props.value.toString()}-${
-            this.props.consent.cookie
-        }`;
-        const name = `gu-ad-prefs-${this.props.consent.cookie}`;
-
-        return (
-            <div className="identity-ad-prefs-input identity-ad-prefs-manager">
-                <label className="identity-ad-prefs-input__label" htmlFor={id}>
-                    <input
-                        type="radio"
-                        name={name}
-                        id={id}
-                        data-link-name={`ad-prefs - ${
-                            this.props.consent.cookie
-                        } - ${this.props.value.toString()}`}
-                        value={this.props.value.toString()}
-                        checked={this.props.checked}
-                        onChange={this.handleChange.bind(this)}
-                    />
-                    <span>{this.props.wording.title}</span>
-                </label>
-                {this.props.wording.text && (
-                    <span
-                        className="identity-ad-prefs-input__wording"
-                        dangerouslySetInnerHTML={{
-                            __html: this.props.wording.text,
-                        }}
-                    />
-                )}
-            </div>
-        );
-    }
-}
-
-class ConsentBox extends Component<ConsentBoxProps, {}> {
-    render() {
-        const wording: ConsentWording = getConsentWording(this.props.consent);
-
-        return (
-            <fieldset>
-                <legend className="identity-title identity-title--small">
-                    {wording.question.title}
-                </legend>
-                {wording.question.text && (
-                    <div className="identity-ad-prefs-input__wording">
-                        {wording.question.text}
-                    </div>
-                )}
-
-                <div className="identity-ad-prefs-options">
-                    <ConsentRadioButton
-                        value="true"
-                        wording={wording.yesCheckbox}
-                        checked={this.props.state === true}
-                        consent={this.props.consent}
-                        onToggle={() => this.props.onUpdate(true)}
-                    />
-                    <ConsentRadioButton
-                        value="false"
-                        wording={wording.noCheckbox}
-                        checked={this.props.state === false}
-                        consent={this.props.consent}
-                        onToggle={() => this.props.onUpdate(false)}
-                    />
-                </div>
-            </fieldset>
-        );
-    }
-}
-
-export { ConsentBox };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/FeedbackFlashBox.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/FeedbackFlashBox.js
deleted file mode 100644
index 735e3a4515d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/FeedbackFlashBox.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/ad-prefs/FeedbackFlashBox.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-
-type FeedbackFlashBoxProps = {
-    children: any,
-    flashing: boolean,
-};
-
-class FeedbackFlashBox extends Component<FeedbackFlashBoxProps> {
-    render() {
-        return (
-            <div
-                className={[
-                    'identity-ad-prefs-manager__flash',
-                    this.props.flashing
-                        ? 'identity-ad-prefs-manager__flash--flashing'
-                        : '',
-                ].join(' ')}
-                aria-hidden="true">
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-export { FeedbackFlashBox };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/wordings.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/wordings.js
deleted file mode 100644
index 82db523ff6f..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/ad-prefs/wordings.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/ad-prefs/wordings.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Node } from 'preact/compat';
-import type { AdConsent } from 'common/modules/commercial/ad-prefs.lib';
-import { thirdPartyTrackingAdConsent } from 'common/modules/commercial/ad-prefs.lib';
-
-type CheckboxWording = {
-    title: string,
-    text?: string,
-};
-
-type QuestionWording = {
-    title: string,
-    text?: Node,
-};
-
-type ConsentWording = {
-    question: QuestionWording,
-    yesCheckbox: CheckboxWording,
-    noCheckbox: CheckboxWording,
-};
-
-const ThirdPartyConsentWording: ConsentWording = {
-    question: {
-        title: 'Set your personalised ads preferences',
-        text: (
-            <div>
-                <p>
-                    We work with{' '}
-                    <a
-                        className="u-underline"
-                        href="https://www.theguardian.com/info/cookies">
-                        advertising partners
-                    </a>{' '}
-                    (including Google and the Ozone project) to show you ads for
-                    products and services you might be interested in. You can
-                    choose whether the ads you see on our sites are personalised
-                    by selecting one of the options below.
-                </p>
-                <p>
-                    Don&apos;t worry, you can always revisit these settings by
-                    following the link on our{' '}
-                    <a
-                        className="u-underline"
-                        href="https://www.theguardian.com/info/cookies#nav4">
-                        cookies policy page.
-                    </a>
-                </p>
-            </div>
-        ),
-    },
-    yesCheckbox: {
-        title: 'I am OK with personalised ads',
-        text: `We and our advertising partners will use your data to show you ads that you might be interested in.`,
-    },
-    noCheckbox: {
-        title: 'I do not want to see personalised ads',
-        text: `We will ask our advertising partners not to show you personalised ads. Please note that you will still see advertising, but it will be less relevant.`,
-    },
-};
-
-const getConsentWording = (consent: AdConsent): ConsentWording => {
-    if (consent.cookie === thirdPartyTrackingAdConsent.cookie)
-        return ThirdPartyConsentWording;
-    return {
-        question: { title: consent.label },
-        yesCheckbox: {
-            title: 'yes',
-        },
-        noCheckbox: {
-            title: 'no',
-        },
-    };
-};
-
-export type { ConsentWording, CheckboxWording, QuestionWording };
-export { getConsentWording };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/api.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/api.js
deleted file mode 100644
index dca8d81d9e2..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/api.js
+++ /dev/null
@@ -1,359 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/api.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/* global escape:true */
-import { ajax } from 'lib/ajax';
-import config from 'lib/config';
-import { getCookie as getCookieByName } from 'lib/cookies';
-import mediator from 'lib/mediator';
-import { storage } from '@guardian/libs';
-import { mergeCalls } from 'common/modules/async-call-merger';
-import { getUrlVars } from 'lib/url';
-import fetch from 'lib/fetch-json';
-import qs from 'qs';
-import reqwest from 'reqwest';
-import { createAuthenticationComponentEvent, createAuthenticationComponentEventParams } from "common/modules/identity/auth-component-event-params";
-import type { AuthenticationComponentId } from "common/modules/identity/auth-component-event-params";
-
-let userFromCookieCache = null;
-
-const cookieName = 'GU_U';
-const signOutCookieName = 'GU_SO';
-const fbCheckKey = 'gu.id.nextFbCheck';
-let idApiRoot = null;
-let profileRoot = null;
-
-type PasswordCredential = {
-    id: string,
-    password: string,
-};
-
-export type SettableConsent = {
-    id: string,
-    consented: boolean,
-};
-
-export type Newsletter = {
-    id: string,
-    subscribed: boolean,
-};
-
-export type IdentityUser = {
-    id: number,
-    primaryEmailAddress: string,
-    displayName: string,
-    accountCreatedDate: string,
-    emailVerified: string,
-    rawResponse: ?string,
-};
-
-export const init = (): void => {
-    idApiRoot = config.get('page.idApiUrl');
-    mediator.emit('module:identity:api:loaded');
-    profileRoot = config.get('page.idUrl');
-};
-
-export const decodeBase64 = (str: string): string =>
-    decodeURIComponent(
-        escape(
-            window.atob(
-                str
-                    .replace(/-/g, '+')
-                    .replace(/_/g, '/')
-                    .replace(/,/g, '=')
-            )
-        )
-    );
-
-export const getUserFromCookie = (): ?IdentityUser => {
-    if (userFromCookieCache === null) {
-        const cookieData = getCookieByName(cookieName);
-        let userData = null;
-
-        if (cookieData) {
-            userData = JSON.parse(decodeBase64(cookieData.split('.')[0]));
-        }
-        if (userData) {
-            const displayName = decodeURIComponent(userData[2]);
-            userFromCookieCache = {
-                id: userData[0],
-                primaryEmailAddress: userData[1], // not sure where this is stored now - not in the cookie any more
-                displayName,
-                accountCreatedDate: userData[6],
-                emailVerified: userData[7],
-                rawResponse: cookieData,
-            };
-        }
-    }
-
-    return userFromCookieCache;
-};
-
-export const updateNewsletter = (newsletter: Newsletter): Promise<void> =>
-    reqwest({
-        url: `${config.get('page.idApiUrl')}/users/me/newsletters`,
-        method: 'PATCH',
-        type: 'json',
-        contentType: 'application/json',
-        withCredentials: true,
-        crossOrigin: true,
-        data: JSON.stringify(newsletter),
-    });
-
-export const buildNewsletterUpdatePayload = (
-    action: string = 'none',
-    newsletterId: string
-): Newsletter => {
-    const newsletter = {};
-    switch (action) {
-        case 'add':
-            newsletter.id = newsletterId;
-            newsletter.subscribed = true;
-            break;
-        case 'remove':
-            newsletter.id = newsletterId;
-            newsletter.subscribed = false;
-            break;
-        default:
-            throw new Error(`Undefined newsletter action type (${action})`);
-    }
-    return newsletter;
-};
-
-export const isUserLoggedIn = (): boolean => getUserFromCookie() !== null;
-
-export const getUserFromApi = mergeCalls(mergingCallback => {
-    const apiRoot = idApiRoot || '';
-
-    if (isUserLoggedIn()) {
-        ajax({
-            url: `${apiRoot}/user/me`,
-            type: 'jsonp',
-            crossOrigin: true,
-        }).then(response => {
-            if (response.status === 'ok') {
-                mergingCallback(response.user);
-            } else {
-                mergingCallback(null);
-            }
-        });
-    } else {
-        mergingCallback(null);
-    }
-});
-
-export const reset = (): void => {
-    getUserFromApi.reset();
-    userFromCookieCache = null;
-};
-
-export const getCookie = (): ?string => getCookieByName(cookieName);
-
-export const getUrl = (): string => config.get('page.idUrl');
-
-export const getUserFromApiWithRefreshedCookie = () => {
-    const endpoint = '/user/me';
-    const request = ajax({
-        url: (idApiRoot || '') + endpoint,
-        type: 'jsonp',
-        data: {
-            refreshCookie: true,
-        },
-    });
-
-    return request;
-};
-
-export const redirectTo = (url: string): void => {
-    window.location.assign(url);
-};
-
-export const getUserOrSignIn = (componentId: AuthenticationComponentId, paramUrl: ?string): ?Object => {
-    let returnUrl = paramUrl;
-
-    if (isUserLoggedIn()) {
-        return getUserFromCookie();
-    }
-
-    returnUrl = encodeURIComponent(returnUrl || document.location.href);
-    let url = `${getUrl() || ''}/signin?returnUrl=${returnUrl}`;
-
-    if (componentId) {
-        url += `&${createAuthenticationComponentEventParams(componentId)}`
-    }
-
-    redirectTo(url);
-};
-
-export const hasUserSignedOutInTheLast24Hours = (): boolean => {
-    const cookieData = getCookieByName(signOutCookieName);
-
-    if (cookieData) {
-        return (
-            Math.round(new Date().getTime() / 1000) <
-            parseInt(cookieData, 10) + 86400
-        );
-    }
-    return false;
-};
-
-export const shouldAutoSigninInUser = (): boolean => {
-    const signedInUser = !!getCookieByName(cookieName);
-    const checkFacebook = !!storage.local.get(fbCheckKey);
-    return (
-        !signedInUser && !checkFacebook && !hasUserSignedOutInTheLast24Hours()
-    );
-};
-
-export const getUserEmailSignUps = (): Promise<any> => {
-    const user = getUserFromCookie();
-
-    if (user) {
-        const endpoint = `/useremails/${user.id}`;
-        const request = ajax({
-            url: (idApiRoot || '') + endpoint,
-            type: 'jsonp',
-            crossOrigin: true,
-            withCredentials: true,
-        });
-
-        return request;
-    }
-
-    return Promise.resolve(null);
-};
-
-export const sendValidationEmail = (): any => {
-    const defaultReturnEndpoint = '/email-prefs';
-    const endpoint = '/user/send-validation-email';
-    const returnUrl = getUrlVars().returnUrl
-        ? decodeURIComponent(getUrlVars().returnUrl)
-        : (profileRoot || '') + defaultReturnEndpoint;
-
-    const request = ajax({
-        url: (idApiRoot || '') + endpoint,
-        type: 'jsonp',
-        crossOrigin: true,
-        data: {
-            method: 'post',
-            returnUrl,
-        },
-    });
-
-    return request;
-};
-
-export const updateUsername = (username: string): any => {
-    const endpoint = '/user/me';
-    const data = {
-        publicFields: {
-            username,
-            displayName: username,
-        },
-    };
-    const request = ajax({
-        url: (idApiRoot || '') + endpoint,
-        type: 'json',
-        crossOrigin: true,
-        method: 'POST',
-        contentType: 'application/json; charset=utf-8',
-        data: JSON.stringify(data),
-        withCredentials: true,
-    });
-
-    return request;
-};
-
-export const getAllConsents = () => {
-    const endpoint = '/consents';
-    const url = (idApiRoot || '') + endpoint;
-    return fetch(url, {
-        mode: 'cors',
-        method: 'GET',
-        headers: { Accept: 'application/json' },
-    });
-};
-
-export const getAllNewsletters = () => {
-    const endpoint = '/newsletters';
-    const url = (idApiRoot || '') + endpoint;
-    return fetch(url, {
-        mode: 'cors',
-        method: 'GET',
-        headers: { Accept: 'application/json' },
-    });
-};
-
-export const getSubscribedNewsletters = () => {
-    const endpoint = '/users/me/newsletters';
-    const url = (idApiRoot || '') + endpoint;
-    return fetch(url, {
-        mode: 'cors',
-        method: 'GET',
-        headers: { Accept: 'application/json' },
-        credentials: 'include',
-    })
-        .then(json => {
-            if (json.result.subscriptions) {
-                return json.result.subscriptions.map(sub => sub.listId);
-            }
-            return [];
-        })
-        .catch(() => []);
-};
-
-export const setConsent = (consents: SettableConsent[]): Promise<void> =>
-    new Promise((success, error) => {
-        reqwest({
-            url: `${idApiRoot || ''}/users/me/consents`,
-            method: 'PATCH',
-            type: 'json',
-            contentType: 'application/json',
-            withCredentials: true,
-            crossOrigin: true,
-            data: JSON.stringify(consents),
-            error,
-            success,
-        });
-    });
-export const ajaxSignIn = (credentials: PasswordCredential) => {
-    const url = `${profileRoot || ''}/actions/auth/ajax`;
-    const body: Object = {
-        email: credentials.id,
-        password: credentials.password,
-    };
-
-    if (
-        window.guardian &&
-        window.guardian.ophan &&
-        window.guardian.ophan.viewId
-    ) {
-        body.componentEventParams = createAuthenticationComponentEvent('guardian_smartlock', window.guardian.ophan.viewId);
-    }
-
-    return fetch(url, {
-        mode: 'cors',
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: qs.stringify(body),
-        credentials: 'include',
-    });
-};
-
-export const getUserData = (): Promise<Response> =>
-    fetch(`${idApiRoot || ''}/user/me`, {
-        method: 'GET',
-        mode: 'cors',
-        credentials: 'include',
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/api.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/api.spec.js
deleted file mode 100644
index fa1c68b2008..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/api.spec.js
+++ /dev/null
@@ -1,235 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/api.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* global jsdom */
-
-import {
-    getUserFromApi,
-    init,
-    decodeBase64,
-    getUserFromCookie,
-    reset,
-    getUserOrSignIn,
-    shouldAutoSigninInUser,
-} from 'common/modules/identity/api.js';
-import config from 'lib/config';
-import { getCookie as getCookie_ } from 'lib/cookies';
-import { ajax as ajax_ } from 'lib/ajax';
-import { storage } from '@guardian/libs';
-
-jest.mock('lib/config');
-jest.mock('lib/ajax', () => ({
-    ajax: jest.fn(),
-}));
-jest.mock('lib/cookies', () => ({
-    getCookie: jest.fn(),
-}));
-jest.mock('common/modules/async-call-merger', () => ({
-    mergeCalls(callback) {
-        callback.reset = jest.fn();
-
-        return callback;
-    },
-}));
-
-const getCookieStub: any = getCookie_;
-const ajax: any = ajax_;
-
-const originalAssign = window.location.assign;
-
-describe('Identity API', () => {
-    beforeEach(() => {
-        config.page = {
-            idApiUrl: 'https://idapi.theguardian.com',
-            idUrl: 'https://profile.theguardian.com',
-        };
-        getCookieStub.mockImplementation(
-            () =>
-                'WyIyMzEwOTU5IiwiamdvcnJpZUBnbWFpbC5jb20iLCJBbSVDMyVBOWxpZSBKJUMzJUI0c2UiLCI1MzQiLDEzODI5NTMwMzE1OTEsMV0' +
-                '.MC0CFBsFwIEITO91EGONK4puyO2ZgGQcAhUAqRa7PVDCoAjrbnJNYYvMFec4fAY'
-        );
-
-        window.location.assign = (url: string) => {
-            jsdom.reconfigure({
-                url,
-            });
-        };
-    });
-
-    afterEach(() => {
-        reset();
-        jest.resetAllMocks();
-
-        window.location.assign = originalAssign;
-    });
-
-    it('gets user from cookie', () => {
-        const user = getUserFromCookie();
-        const displayName = user && user.displayName;
-
-        expect(displayName).toBe('Amélie Jôse');
-    });
-
-    it('decodes a base64 string', () => {
-        const string = 'sammandoo';
-        const encodedString = window.btoa(string);
-        const decodedString = decodeBase64(encodedString);
-
-        expect(decodedString).toBe(string);
-    });
-
-    it('gets user from the idapi', done => {
-        const expectedUser = {};
-        const apiCallback = user => {
-            expect(user).toBe(expectedUser);
-            expect(ajax).toHaveBeenCalledWith({
-                url: 'https://idapi.theguardian.com/user/me',
-                type: 'jsonp',
-                crossOrigin: true,
-            });
-            done();
-        };
-
-        ajax.mockImplementationOnce(() =>
-            Promise.resolve({
-                status: 'ok',
-                user: expectedUser,
-            })
-        );
-
-        init();
-        getUserFromApi(apiCallback);
-    });
-
-    it('should not call api if the cookie does not exist', done => {
-        getCookieStub.mockImplementationOnce(() => null);
-
-        const apiCallback = user => {
-            expect(user).toBe(null);
-            expect(ajax).not.toHaveBeenCalled();
-            done();
-        };
-
-        getUserFromApi(apiCallback);
-    });
-
-    it('should redirect to sign in when user is not signed in', () => {
-        const origHref = window.location.href;
-
-        const returnUrl = 'https://theguardian.com/uk';
-        window.location.assign(returnUrl);
-
-        getCookieStub.mockImplementationOnce(() => null);
-        getUserOrSignIn('email_sign_in_banner');
-
-        expect(window.location.href).toBe(
-            `${config.page.idUrl}/signin?returnUrl=${encodeURIComponent(
-                returnUrl
-            )}&componentEventParams=componentType%3Didentityauthentication%26componentId%3Demail_sign_in_banner`
-        );
-
-        window.location.assign(origHref);
-    });
-
-    it('should not redirect to sign in when user is already signed in', () => {
-        const user = getUserOrSignIn('email_sign_in_banner');
-        const displayName = user && user.displayName;
-
-        expect(displayName).toBe('Amélie Jôse');
-    });
-
-    it('should redirect with return URL when given', () => {
-        const origHref = window.location.href;
-        const returnUrl = 'http://www.theguardian.com/foo';
-
-        getCookieStub.mockImplementationOnce(() => null);
-        getUserOrSignIn('email_sign_in_banner', returnUrl);
-
-        expect(window.location.href).toBe(
-            `${config.page.idUrl}/signin?returnUrl=${encodeURIComponent(
-                returnUrl
-            )}&componentEventParams=componentType%3Didentityauthentication%26componentId%3Demail_sign_in_banner`
-        );
-
-        window.location.assign(origHref);
-    });
-
-    it('should attempt to autosigin an user who is not currently signed in and has not previously signed out', () => {
-        getCookieStub
-            .mockImplementationOnce(() => null) // GU_U
-            .mockImplementationOnce(() => null); // GU_SO
-            storage.local.set('gu.id.nextFbCheck', 'blah|blah');
-
-        expect(shouldAutoSigninInUser()).toBe(false);
-
-        storage.local.remove('gu.id.nextFbCheck');
-    });
-
-    it('should not attempt to autosigin a user who is not currently signed in, has not previously signed out, before the facebook check overlaps', () => {
-        getCookieStub
-            .mockImplementationOnce(() => null) // GU_U
-            .mockImplementationOnce(() => null); // GU_SO
-
-        expect(shouldAutoSigninInUser()).toBe(true);
-    });
-
-    it('should not attempt to autosignin a signed in user', () => {
-        expect(shouldAutoSigninInUser()).toBe(false);
-    });
-
-    it('should attempt to autosignin a user who has signed out more than 24 hours ago after the facebook check has ellapsed', () => {
-        const today = new Date();
-        const theDayBeforeYesterday = new Date();
-
-        theDayBeforeYesterday.setDate(today.getDate() - 2);
-
-        const timeStampInSeconds = theDayBeforeYesterday.getTime() / 1000;
-
-        getCookieStub
-            .mockImplementationOnce(() => null) // GU_U
-            .mockImplementationOnce(() => timeStampInSeconds.toString()); // GU_SO
-
-        expect(shouldAutoSigninInUser()).toBe(true);
-    });
-
-    it('should not attempt to autosignin a user who has signed out more than 24 hours ago before the facebook check has ellapsed', () => {
-        const theDayBeforeYesterday = new Date();
-
-        theDayBeforeYesterday.setDate(new Date().getDate() - 2);
-
-        const timeStampInSeconds = theDayBeforeYesterday.getTime() / 1000;
-
-        getCookieStub
-            .mockImplementationOnce(() => null) // GU_U
-            .mockImplementationOnce(() => timeStampInSeconds.toString()); // GU_SO
-            storage.local.set('gu.id.nextFbCheck', 'blah|blah');
-
-        expect(shouldAutoSigninInUser()).toBe(false);
-
-        storage.local.remove('gu.id.nextFbCheck');
-    });
-
-    it('should not attempt to autosignin a user who has signed out within the last 24 hours', () => {
-        const fourHoursAgo = new Date();
-
-        fourHoursAgo.setHours(new Date().getHours() - 4);
-
-        const timeStampInSeconds = fourHoursAgo.getTime() / 1000;
-
-        getCookieStub
-            .mockImplementationOnce(() => null) // GU_U
-            .mockImplementationOnce(() => timeStampInSeconds.toString()); // GU_SO
-
-        expect(shouldAutoSigninInUser()).toBe(false);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/auth-component-event-params.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/auth-component-event-params.js
deleted file mode 100644
index 618d48e0525..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/auth-component-event-params.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/auth-component-event-params.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {constructQuery} from "../../../../lib/url";
-
-export type AuthenticationComponentId = 'email_sign_in_banner' | 'subscription_sign_in_banner' | 'guardian_smartlock' | 'signin_from_formstack'
-
-export const createAuthenticationComponentEvent = (componentId: AuthenticationComponentId, pageViewId?: string) => {
-    const params: Object = {
-        componentType: 'identityauthentication',
-        componentId,
-    };
-
-    if (pageViewId) {
-        params.viewId = pageViewId;
-    }
-
-    return constructQuery(params);
-};
-
-export const createAuthenticationComponentEventParams = (componentId: AuthenticationComponentId, pageViewId?: string) => `componentEventParams=${encodeURIComponent(createAuthenticationComponentEvent(componentId, pageViewId))}`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/auth-component-event-params.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/auth-component-event-params.spec.js
deleted file mode 100644
index 8d4fe994f13..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/auth-component-event-params.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/auth-component-event-params.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { createAuthenticationComponentEventParams } from "common/modules/identity/auth-component-event-params";
-
-describe('createAuthenticationComponentEventParams', () => {
-    it('should create component event params using the component ID passed', () => {
-        expect(createAuthenticationComponentEventParams('email_sign_in_banner')).toBe('componentEventParams=componentType%3Didentityauthentication%26componentId%3Demail_sign_in_banner')
-    })
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/consent-journey.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/consent-journey.js
deleted file mode 100644
index c96e5c75de6..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/consent-journey.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/consent-journey.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-
-import loadEnhancers from './modules/loadEnhancers';
-
-const showJourney = (journeyEl: HTMLElement): Promise<void> =>
-    fastdom.mutate(() => journeyEl.classList.remove('u-h'));
-
-const hideLoading = (loadingEl: HTMLElement): Promise<void> =>
-    fastdom.mutate(() => loadingEl.remove());
-
-const enhanceConsentJourney = (): void => {
-    const loaders = [
-        ['.identity-consent-journey', showJourney],
-        ['#identityConsentsLoadingError', hideLoading],
-    ];
-    loadEnhancers(loaders);
-};
-
-export { enhanceConsentJourney };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/consents.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/consents.js
deleted file mode 100644
index 7001a8a8487..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/consents.js
+++ /dev/null
@@ -1,332 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/consents.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import reqwest from 'reqwest';
-import fastdom from 'lib/fastdom-promise';
-import config from 'lib/config';
-import loadEnhancers from './modules/loadEnhancers';
-
-import { push as pushError } from './modules/show-errors';
-import {
-    addSpinner,
-    bindAnalyticsEventsOnce as bindCheckboxAnalyticsEventsOnce,
-    flip as flipCheckbox,
-    getInfo as getCheckboxInfo,
-    removeSpinner,
-} from './modules/switch';
-import { prependSuccessMessage } from './modules/prependMessage';
-import {
-    buildNewsletterUpdatePayload,
-    setConsent,
-    updateNewsletter,
-} from './api';
-import type { SettableConsent } from './api';
-
-const consentCheckboxClassName = 'js-manage-account__consentCheckbox';
-const newsletterCheckboxClassName = 'js-manage-account__newsletterCheckbox';
-const checkAllCheckboxClassName = 'js-manage-account__check-allCheckbox';
-const checkAllIgnoreClassName = 'js-manage-account__check-allCheckbox__ignore';
-const unsubscribeButtonClassName = 'js-unsubscribe';
-const isHiddenClassName = 'is-hidden';
-const isLoadingClassName = 'loading';
-const optOutClassName = 'fieldset__fields--opt-out';
-const optInClassName = 'fieldset__fields--opt-in';
-
-const LC_CHECK_ALL = 'Select all';
-const LC_UNCHECK_ALL = 'Deselect all';
-const UNSUBSCRIPTION_SUCCESS_MESSAGE =
-    "You've been unsubscribed from all Guardian marketing newsletters and emails.";
-const ERR_MALFORMED_HTML = 'Something went wrong';
-
-const buildConsentUpdatePayload = (
-    fields: NodeList<any> = new NodeList()
-): SettableConsent => {
-    const consent = {};
-    Array.from(fields).forEach((field: HTMLInputElement) => {
-        switch (field.type) {
-            case 'checkbox':
-                consent.consented = field.checked;
-                break;
-            default:
-                if (field.name.includes('.id')) {
-                    consent.id = field.value;
-                }
-                break;
-        }
-    });
-
-    return consent;
-};
-
-const getInputFields = (labelEl: HTMLElement): Promise<NodeList<HTMLElement>> =>
-    fastdom.measure(() => labelEl.querySelectorAll('[name][value]'));
-
-const unsubscribeFromAll = (buttonEl: HTMLButtonElement): Promise<void> => {
-    buttonEl.classList.add(isLoadingClassName);
-    return reqwest({
-        url: `${config.get('page.idApiUrl')}/remove/consent/all`,
-        method: 'POST',
-        withCredentials: true,
-        crossOrigin: true,
-    });
-};
-
-const toggleInputsWithSelector = (className: string, checked: boolean) =>
-    fastdom
-        .measure(() =>
-            Array.from(
-                document.querySelectorAll(
-                    `.${className} input[type="checkbox"]`
-                )
-            )
-        )
-        .then(boxes =>
-            boxes.forEach(b => {
-                b.checked = checked;
-            })
-        );
-
-const checkAllOptOuts = (): Promise<void> =>
-    toggleInputsWithSelector(optOutClassName, true);
-
-const uncheckAllOptIns = (): Promise<void> =>
-    toggleInputsWithSelector(optInClassName, false);
-
-const showUnsubscribeConfirmation = (): Promise<void> => {
-    const fetchButton = (): Promise<HTMLButtonElement> =>
-        fastdom.measure(() =>
-            document.querySelector(`.${unsubscribeButtonClassName}`)
-        );
-
-    const updateVisibilityAndShowMessage = (
-        elem: HTMLButtonElement
-    ): Promise<void> =>
-        fastdom.mutate(() => {
-            if (elem.parentElement) {
-                prependSuccessMessage(
-                    UNSUBSCRIPTION_SUCCESS_MESSAGE,
-                    elem.parentElement
-                );
-            }
-            elem.classList.add(isHiddenClassName);
-        });
-
-    return fetchButton().then(button => updateVisibilityAndShowMessage(button));
-};
-
-const bindUnsubscribeFromAll = (buttonEl: HTMLButtonElement) => {
-    buttonEl.addEventListener('click', () => {
-        toggleInputsWithSelector(newsletterCheckboxClassName, false);
-        unsubscribeFromAll(buttonEl)
-            .then(() =>
-                Promise.all([
-                    showUnsubscribeConfirmation(),
-                    uncheckAllOptIns(),
-                    checkAllOptOuts(),
-                ])
-            )
-            .catch((err: Error) => {
-                pushError(err, 'reload').then(() => {
-                    window.scrollTo(0, 0);
-                });
-            });
-    });
-};
-
-const updateNewsletterSwitch = (labelEl: HTMLElement): Promise<void> =>
-    Promise.all([getCheckboxInfo(labelEl), addSpinner(labelEl)])
-        .then(([checkbox]) =>
-            buildNewsletterUpdatePayload(
-                checkbox.checked ? 'add' : 'remove',
-                checkbox.name
-            )
-        )
-        .then(newsletter => updateNewsletter(newsletter))
-        .catch((err: Error) => {
-            pushError(err, 'reload').then(() => {
-                window.scrollTo(0, 0);
-            });
-            return flipCheckbox(labelEl);
-        })
-        .then(() => removeSpinner(labelEl));
-
-const bindNewsletterSwitch = (labelEl: HTMLElement): void => {
-    getCheckboxInfo(labelEl).then(info => {
-        if (info.shouldUpdate) {
-            updateNewsletterSwitch(labelEl);
-        }
-    });
-
-    labelEl.addEventListener(
-        'change',
-        (ev: Event, isNotUserInitiated: boolean = false) => {
-            if (isNotUserInitiated) {
-                return;
-            }
-            updateNewsletterSwitch(labelEl);
-        },
-        false
-    );
-};
-
-const updateConsentSwitch = (labelEl: HTMLElement): Promise<void> =>
-    Promise.all([getInputFields(labelEl), addSpinner(labelEl)])
-        .then(([fields]) => buildConsentUpdatePayload(fields))
-        .then(consent => setConsent([consent]))
-        .catch((err: Error) => {
-            pushError(err, 'reload').then(() => {
-                window.scrollTo(0, 0);
-            });
-            return flipCheckbox(labelEl);
-        })
-        .then(() => removeSpinner(labelEl));
-
-const bindConsentSwitch = (labelEl: HTMLElement): void => {
-    getCheckboxInfo(labelEl).then(info => {
-        if (info.shouldUpdate) {
-            updateConsentSwitch(labelEl);
-        }
-    });
-
-    labelEl.addEventListener(
-        'change',
-        (ev: Event, isNotUserInitiated: boolean = false) => {
-            if (isNotUserInitiated) {
-                return;
-            }
-            updateConsentSwitch(labelEl);
-        },
-        false
-    );
-};
-
-const getCheckedAllStatus = (checkboxesEl: HTMLInputElement[]): boolean =>
-    checkboxesEl.reduce((acc, checkboxEl) => checkboxEl.checked && acc, true);
-
-const bindCheckAllSwitch = (labelEl: HTMLElement): void => {
-    const fetchElements = (): Promise<(HTMLInputElement | HTMLElement)[]> =>
-        fastdom.measure(() => [
-            labelEl.querySelector('input'),
-            labelEl.querySelector('.manage-account__switch-title'),
-        ]);
-
-    const fetchWrappedCheckboxes = (): Promise<HTMLInputElement[]> =>
-        fastdom
-            .measure(() => [
-                labelEl.dataset.wrapper
-                    ? labelEl.dataset.wrapper
-                    : '.manage-account__switches',
-            ])
-            .then(selector =>
-                fastdom.measure(() => {
-                    const nearestWrapperEl = labelEl.closest(selector);
-                    if (!nearestWrapperEl) throw new Error(ERR_MALFORMED_HTML);
-                    return Array.from(
-                        nearestWrapperEl.querySelectorAll(
-                            'input[type=checkbox]'
-                        )
-                    ).filter(
-                        $checkbox =>
-                            $checkbox.closest(
-                                `.${checkAllCheckboxClassName}`
-                            ) === null &&
-                            $checkbox.closest(`.${checkAllIgnoreClassName}`) ===
-                                null
-                    );
-                })
-            );
-
-    Promise.all([
-        fetchElements(),
-        fetchWrappedCheckboxes(),
-        bindCheckboxAnalyticsEventsOnce(labelEl),
-    ]).then(([[checkboxEl, titleEl], wrappedCheckboxEls]) => {
-        if (!(checkboxEl instanceof HTMLInputElement)) {
-            throw new Error(ERR_MALFORMED_HTML);
-        }
-
-        const getTextForStatus = (status: boolean) =>
-            status ? LC_UNCHECK_ALL : LC_CHECK_ALL;
-
-        const updateCheckStatus = () =>
-            fastdom.mutate(() => {
-                checkboxEl.checked = getCheckedAllStatus(wrappedCheckboxEls);
-                titleEl.innerHTML = getTextForStatus(checkboxEl.checked);
-                labelEl.style.visibility = 'visible';
-                labelEl.style.pointerEvents = 'all';
-            });
-
-        const getInputFieldsFromCheckboxes = checkboxesToUpdate =>
-            checkboxesToUpdate.map(checkboxElToUpdate => {
-                const checkboxLabelEl = checkboxElToUpdate.labels[0];
-                if (!(checkboxLabelEl instanceof HTMLLabelElement)) {
-                    throw new Error(ERR_MALFORMED_HTML);
-                }
-                return getInputFields(checkboxLabelEl);
-            });
-
-        const handleChangeEvent = () => {
-            addSpinner(labelEl, 9999)
-                .then(() => new Promise(accept => setTimeout(accept, 300)))
-                .then(() => removeSpinner(labelEl));
-
-            const checkboxesToUpdate = wrappedCheckboxEls.filter(
-                wrappedCheckboxEl =>
-                    wrappedCheckboxEl.checked !== checkboxEl.checked
-            );
-
-            checkboxesToUpdate.forEach(wrappedCheckboxEl => {
-                fastdom.mutate(() => {
-                    wrappedCheckboxEl.checked = checkboxEl.checked;
-                });
-            });
-
-            Promise.all(getInputFieldsFromCheckboxes(checkboxesToUpdate))
-                .then(checkboxInputs =>
-                    checkboxInputs.map(buildConsentUpdatePayload)
-                )
-                .then(setConsent);
-
-            updateCheckStatus();
-        };
-
-        if (getCheckedAllStatus(wrappedCheckboxEls) === false) {
-            updateCheckStatus();
-        }
-
-        wrappedCheckboxEls.forEach(wrappedCheckboxEl => {
-            wrappedCheckboxEl.addEventListener('change', () =>
-                updateCheckStatus()
-            );
-        });
-
-        labelEl.addEventListener('change', () => handleChangeEvent());
-    });
-};
-
-const enhanceConsents = (): void => {
-    const loaders = [
-        [`.${checkAllCheckboxClassName}`, bindCheckAllSwitch],
-        [`.${consentCheckboxClassName}`, bindConsentSwitch],
-        [`.${newsletterCheckboxClassName}`, bindNewsletterSwitch],
-        [`.${unsubscribeButtonClassName}`, bindUnsubscribeFromAll],
-    ];
-    loadEnhancers(loaders);
-};
-
-export {
-    enhanceConsents,
-    consentCheckboxClassName,
-    newsletterCheckboxClassName,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/delete-account.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/delete-account.js
deleted file mode 100644
index f0bb037b81a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/delete-account.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/delete-account.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import bean from 'bean';
-import fastdom from 'fastdom';
-
-const deleteButtonElm = $('#deleteButton')[0];
-const deleteFormElm = $('#deleteForm')[0];
-const deleteLoaderElm = $('#deleteLoader')[0];
-
-const disableDeleteButton = (): void => {
-    if (deleteButtonElm) {
-        fastdom.mutate(() => {
-            deleteButtonElm.disabled = true;
-        });
-    }
-};
-
-const showLoader = (): void => {
-    if (deleteLoaderElm) {
-        fastdom.mutate(() => {
-            deleteLoaderElm.classList.remove('is-hidden');
-        });
-    }
-};
-
-const setupLoadingAnimation = (): void => {
-    if (deleteFormElm && deleteLoaderElm) {
-        bean.on(deleteFormElm, 'submit', () => {
-            disableDeleteButton();
-            showLoader();
-        });
-    }
-};
-
-export { setupLoadingAnimation };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/campaigns.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/campaigns.js
deleted file mode 100644
index 7a6b197ee62..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/campaigns.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/email-sign-in-banner/campaigns.js
- * to .ts, then delete it.
- */
-
-// @flow
-type Campaign = {
-    name: string,
-    utm: string,
-};
-
-const campaigns: Campaign[] = [
-    {
-        name: 'Guardian Today UK',
-        utm: 'GU Today main NEW H categories',
-    },
-    {
-        name: 'Test Campaign',
-        utm: 'test1212',
-    },
-];
-
-const getEmailCampaignFromUtm = (utm: string): ?Campaign =>
-    campaigns.find((campaign: Campaign) => campaign.utm === utm);
-
-const getEmailCampaignFromUrl = (): ?Campaign => {
-    const emailCampaignInUrl = (new window.URLSearchParams(
-        window.location.search
-    ).getAll('utm_campaign') || [''])[0];
-    return getEmailCampaignFromUtm(emailCampaignInUrl);
-};
-
-export type { Campaign };
-export { campaigns, getEmailCampaignFromUtm, getEmailCampaignFromUrl };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/index.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/index.js
deleted file mode 100644
index 245059a55ed..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/index.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/email-sign-in-banner/index.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { Message, hasUserAcknowledgedBanner } from 'common/modules/ui/message';
-import { trackNonClickInteraction } from 'common/modules/analytics/google';
-import ophan from 'ophan/ng';
-import config from 'lib/config';
-import userPrefs from 'common/modules/user-prefs';
-import type { Banner } from 'common/modules/ui/bannerPicker';
-import {createAuthenticationComponentEventParams} from "common/modules/identity/auth-component-event-params";
-import { make as makeTemplate, messageCode } from './template';
-import { getEmailCampaignFromUrl, getEmailCampaignFromUtm } from './campaigns';
-
-const displayEventKey: string = `${messageCode} : display`;
-const userPrefsStoreKey = 'emailbanner.referrerEmail';
-
-const emailPrefsLink = `https://${config.get('page.host')}/email-newsletters`;
-
-const signInLink = `${config.get('page.idUrl')}/signin?returnUrl=${config.get(emailPrefsLink)}&${createAuthenticationComponentEventParams('email_sign_in_banner')}`;
-
-const isSecondEmailPageview = (): boolean => {
-    const prefs = userPrefs.get(userPrefsStoreKey) || {};
-    return prefs.pv && prefs.pv >= 2;
-};
-
-const isInExperiment = (): boolean =>
-    config.get('switches.idEmailSignInUpsell', false);
-
-const trackInteraction = (interaction: string): void => {
-    ophan.record({
-        component: `${messageCode}`,
-        value: interaction,
-    });
-    trackNonClickInteraction(interaction);
-};
-
-const canShow: () => Promise<boolean> = () => {
-    const can = Promise.resolve(
-        !hasUserAcknowledgedBanner(messageCode) &&
-            isInExperiment() &&
-            isSecondEmailPageview()
-    );
-    return can;
-};
-
-const sideEffects: () => void = () => {
-    const cmp = getEmailCampaignFromUrl();
-    const existing = userPrefs.get(userPrefsStoreKey);
-    if (cmp && !existing) {
-        userPrefs.set(userPrefsStoreKey, {
-            utm: cmp.utm,
-            pv: 1,
-        });
-    } else if (existing && cmp && existing.utm !== cmp.utm) {
-        userPrefs.remove(userPrefsStoreKey);
-        userPrefs.set(userPrefsStoreKey, {
-            utm: cmp.utm,
-            pv: 1,
-        });
-    } else if (existing) {
-        userPrefs.set(userPrefsStoreKey, {
-            ...existing,
-            pv: existing.pv + 1,
-        });
-    }
-};
-
-const show: () => Promise<boolean> = () => {
-    trackInteraction(displayEventKey);
-    const store = userPrefs.get(userPrefsStoreKey) || {};
-    if (!store || !store.utm) {
-        throw new Error(`email-sign-in : wrong store format`);
-    }
-    const campaign = getEmailCampaignFromUtm(store.utm);
-    if (!campaign) {
-        throw new Error(
-            `email-sign-in missing campaign for utm (${store.utm})`
-        );
-    }
-    userPrefs.remove(userPrefsStoreKey);
-    const message = new Message(messageCode, {
-        cssModifierClass: messageCode,
-        trackDisplay: true,
-        siteMessageLinkName: messageCode,
-        siteMessageComponentName: messageCode,
-    });
-
-    return Promise.resolve(
-        message.show(
-            makeTemplate({
-                campaign,
-                signInLink,
-                emailPrefsLink,
-            })
-        )
-    );
-};
-
-sideEffects();
-
-export const emailSignInBanner: Banner = {
-    id: messageCode,
-    show,
-    canShow,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/template.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/template.js
deleted file mode 100644
index 0029f2d2cf7..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/email-sign-in-banner/template.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/email-sign-in-banner/template.js
- * to .ts, then delete it.
- */
-
-// @flow
-import type { Campaign } from './campaigns';
-
-export type Params = {
-    signInLink: string,
-    emailPrefsLink: string,
-    campaign: Campaign,
-};
-
-export const messageCode: string = 'email-sign-in-banner';
-
-export const make = (params: Params): string =>
-    `<div class="site-message--email-sign-in-banner-slide">
-        <h3 class="site-message--email-sign-in-banner-title">
-            Enjoying ${params.campaign.name}?
-         </h3>
-         <p class="site-message--email-sign-in-banner-text">
-            We want to help you find more newsletters you'll love. If you sign in we can suggest you newsletters tailored to your personal taste. And you can manage your preferences at any time.
-         </p>
-         <a data-link-name="${messageCode} : to-sign-in" data-link-name="${messageCode} : success" class="site-message--email-sign-in-banner-cta">
-            Sign in / Register
-         </a>
-         <p class="site-message--email-sign-in-banner-text">
-            Free. Takes a minute. 
-         </p>
-    </div>`;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/follow.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/follow.js
deleted file mode 100644
index 45593153374..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/follow.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/follow.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { render } from 'preact/compat';
-import fastdom from 'lib/fastdom-promise';
-import { FollowButtonWrap } from './upsell/button/FollowButtonWrap';
-import loadEnhancers from './modules/loadEnhancers';
-
-const bindFollow = (el): void => {
-    fastdom
-        .measure(() => el.querySelector('.identity-follow__button-target'))
-        .then((wrapperEl: HTMLElement) => {
-            fastdom.mutate(() => {
-                render(
-                    <FollowButtonWrap
-                        following
-                        onFollow={() => {
-                            console.log('following');
-                        }}
-                        onUnfollow={() => {
-                            console.log('not following');
-                        }}
-                    />,
-                    wrapperEl
-                );
-            });
-        });
-};
-
-const enhanceFollow = (): void => {
-    loadEnhancers([['.identity-follow', bindFollow]]);
-};
-
-export { enhanceFollow };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/form-ajax.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/form-ajax.js
deleted file mode 100644
index d179735a98a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/form-ajax.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/form-ajax.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import loadEnhancers from './modules/loadEnhancers';
-
-const bindAjaxFormEventOverride = (formEl: HTMLFormElement): void => {
-    formEl.addEventListener('submit', (ev: Event) => {
-        ev.preventDefault();
-    });
-};
-
-const enhanceFormAjax = (): void => {
-    const loaders = [
-        ['.js-manage-account__ajaxForm', bindAjaxFormEventOverride],
-        [
-            '.js-manage-account__ajaxForm-submit',
-            (el: HTMLElement) => el.remove(),
-        ],
-    ];
-    loadEnhancers(loaders);
-};
-
-export { enhanceFormAjax };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/forms.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/forms.js
deleted file mode 100644
index c8227198d59..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/forms.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/forms.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import bonzo from 'bonzo';
-
-export const forgottenEmail = (): void => {
-    let hashEmail;
-    let input;
-
-    if (document.body) {
-        const form = document.body.querySelector('.js-reset-form');
-        if (form) {
-            hashEmail = window.location.hash.match('email=([^&#]*)');
-            input = form.querySelector('.js-reset-email');
-            if (hashEmail && input && input instanceof HTMLInputElement) {
-                input.value = hashEmail[1];
-            }
-        }
-    }
-};
-
-export const passwordToggle = (): void => {
-    if (document.body) {
-        const form = document.body.querySelector('.js-register-form');
-        if (form) {
-            const password = form.querySelector('.js-register-password');
-            const toggleClass = 'js-toggle-password';
-            const toggleTmpl = `<div class="form-field__note form-field__note--right mobile-only"> 
-                    <a href="#toggle-password" class="'${toggleClass}" data-password-label="Show password"
-                    data-text-label="Hide password" data-link-name="Toggle password field">Show password</a>
-                </div>`;
-            const $toggle = bonzo(bonzo.create(toggleTmpl)).insertBefore(
-                password
-            );
-
-            $toggle.previous().addClass('form-field__note--left');
-
-            bean.add($toggle[0], `.${toggleClass}`, 'click', e => {
-                e.preventDefault();
-                const link = e.target;
-                const inputType =
-                    password && password.getAttribute('type') === 'password'
-                        ? 'text'
-                        : 'password';
-                const label = link.getAttribute(`data-${inputType}-label`);
-                if (password) {
-                    password.setAttribute('type', inputType);
-                }
-                bonzo(link).text(label);
-            });
-        }
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack-iframe-embed.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack-iframe-embed.js
deleted file mode 100644
index 3d333fe0685..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack-iframe-embed.js
+++ /dev/null
@@ -1,318 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/formstack-iframe-embed.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/**
-    Formstack - composer integration
-
-    This script runs INSIDE a formstack iframe.
-
-    It is set up to send messages to the parent script in window.top to allow
-    the cross domain adjustment of height for variable content from formstack.
-
-    It also takes care of removing the formstack default styling and applying
-    Guardian styling via the NGW scss system.
-
-     - Chris Finch, CSD - Identity, March '14
-*/
-
-import config from 'lib/config';
-import { getUserOrSignIn } from 'common/modules/identity/api';
-
-const postMessage = (
-    type: string,
-    value: string | number,
-    x?: number,
-    y?: number
-): void => {
-    const message: {
-        type: string,
-        value: string | number,
-        href: string,
-        x?: number,
-        y?: number,
-    } = {
-        type,
-        value,
-        href: window.location.href,
-    };
-
-    if (x) {
-        message.x = x;
-    }
-
-    if (y) {
-        message.y = y;
-    }
-
-    window.top.postMessage(JSON.stringify(message), '*');
-};
-
-const sendHeight = (): void => {
-    const body = document.body;
-    const html = document.documentElement;
-
-    if (body && html) {
-        const height = Math.max(
-            body.scrollHeight,
-            body.offsetHeight,
-            html.clientHeight,
-            html.scrollHeight,
-            html.offsetHeight
-        );
-
-        postMessage('set-height', height);
-    }
-};
-
-// TODO: Remove repitition with common/modules/identity/formstack
-class FormstackEmbedIframe {
-    el: HTMLElement;
-    form: HTMLFormElement;
-    formId: string;
-    config: Object;
-
-    constructor(el: HTMLElement, formstackId: string): void {
-        this.el = el;
-        this.formId = formstackId.split('-')[0];
-
-        const defaultConfig = {
-            idClasses: {
-                form: 'form',
-                field: 'form-field',
-                note: 'form-field__note form-field__note--below',
-                label: 'label',
-                checkboxLabel: 'check-label',
-                textInput: 'text-input',
-                textArea: 'textarea textarea--no-resize',
-                submit: 'submit-input',
-                fieldError: 'form-field--error',
-                formError: 'form__error',
-                fieldset: 'formstack-fieldset',
-                required: 'formstack-required',
-                sectionHeader: 'formstack-heading',
-                sectionHeaderFirst: 'formstack-heading--first',
-                sectionText: 'formstack-section',
-                characterCount: 'formstack-count',
-                hide: 'is-hidden',
-            },
-            fsSelectors: {
-                form: `#fsForm${this.formId}`,
-                field: '.fsRow',
-                note: '.fsSupporting, .showMobile',
-                label: '.fsLabel',
-                checkboxLabel: '.fsOptionLabel',
-                textInput:
-                    '.fsField[type="text"], .fsField[type="email"], .fsField[type="number"], .fsField[type="tel"]',
-                textArea: 'textarea.fsField',
-                submit: '.fsSubmitButton',
-                fieldError: '.fsValidationError',
-                formError: '.fsError',
-                fieldset: 'fieldset',
-                required: '.fsRequiredMarker',
-                sectionHeader: '.fsSectionHeading',
-                sectionHeaderFirst: '.fsSection:first-child .fsSectionHeading',
-                sectionText: '.fsSectionText',
-                characterCount: '.fsCounter',
-                hide: '.hidden, .fsHidden, .ui-datepicker-trigger',
-            },
-            hiddenSelectors: {
-                userId: '[type="number"]',
-                email: '[type="email"]',
-            },
-        };
-
-        this.config = Object.assign({}, defaultConfig, config);
-    }
-
-    init(): void {
-        // User object required to populate fields
-        const user = getUserOrSignIn('signin_from_formstack');
-
-        if (!user) {
-            return;
-        }
-
-        this.dom(user);
-
-        this.el.classList.remove(this.config.idClasses.hide);
-
-        if (document.documentElement) {
-            document.documentElement.classList.add('iframed--overflow-hidden');
-        }
-
-        // Update iframe height
-        sendHeight();
-    }
-
-    dom(user: Object): void {
-        const form: HTMLFormElement = (document.getElementById(
-            this.config.fsSelectors.form
-        ): any);
-
-        if (!form) {
-            return;
-        }
-
-        this.form = form;
-
-        // Formstack generates some awful HTML, so we'll remove the CSS links,
-        // loop their selectors and add our own classes instead
-        this.form.classList.add(this.config.idClasses.form);
-
-        const links = Array.from(this.el.getElementsByTagName('link'));
-
-        links.forEach(link => {
-            link.remove();
-        });
-
-        Object.keys(this.config.fsSelectors).forEach(key => {
-            const selector = this.config.fsSelectors[key];
-            const elems = Array.from(this.form.querySelectorAll(selector));
-            const classNames = this.config.idClasses[key].split(' ');
-
-            elems.forEach(elem => {
-                classNames.forEach(className => {
-                    elem.classList.add(className);
-                });
-            });
-        });
-
-        // Formstack also don't have capturable hidden fields,
-        // so we remove ID text inputs and append hidden equivalents
-        const userId = this.form.querySelector(
-            this.config.hiddenSelectors.userId
-        );
-
-        if (!userId) {
-            return;
-        }
-
-        userId.remove();
-
-        const email = this.form.querySelector(
-            this.config.hiddenSelectors.email
-        );
-
-        if (!email) {
-            return;
-        }
-
-        email.remove();
-
-        const userName = userId.getAttribute('name') || '';
-
-        const emailName = email.getAttribute('name') || '';
-
-        const html = `<input type="hidden" name="${userName}" value="${
-            user.id
-        }">
-                        <input type="hidden" name="${emailName}" value="${
-            user.primaryEmailAddress
-        }">`;
-
-        this.form.insertAdjacentHTML('beforeend', html);
-
-        // Events
-        window.addEventListener('unload', () => {
-            // Listen for navigation to success page
-            sendHeight();
-        });
-
-        this.form.addEventListener('submit', event => {
-            this.submit(event);
-        });
-
-        // Listen for message from top window,
-        // only message we are listening for is the iframe position..
-        window.addEventListener(
-            'message',
-            event => {
-                const message = JSON.parse(event.data);
-
-                if (message.iframeTop) {
-                    postMessage('scroll-to', 'scroll-to', 0, message.iframeTop);
-                }
-            },
-            false
-        );
-    }
-
-    submit(event: Event): void {
-        const triggerKeyUp = el => {
-            const e = document.createEvent('HTMLEvents');
-            e.initEvent('keyup', false, true);
-            el.dispatchEvent(e);
-        };
-
-        event.preventDefault();
-
-        setTimeout(() => {
-            // Remove any existing errors
-            const formErrorClass = this.config.idClasses.formError;
-            const formErrors = Array.from(
-                document.getElementsByClassName(formErrorClass)
-            );
-
-            formErrors.forEach(formError => {
-                formError.classList.remove(formErrorClass);
-            });
-
-            const fieldErrorClass = this.config.idClasses.fieldError;
-            const fieldErrors = Array.from(
-                document.getElementsByClassName(fieldErrorClass)
-            );
-
-            fieldErrors.forEach(fieldError => {
-                fieldError.classList.remove(fieldErrorClass);
-            });
-
-            // Handle new errors
-            const fsFormErrorClass = this.config.fsSelectors.formError;
-            const fsFormErrors = Array.from(
-                this.form.getElementsByClassName(fsFormErrorClass)
-            );
-
-            fsFormErrors.forEach(fsFormError => {
-                fsFormError.classList.add(formErrorClass);
-            });
-
-            const fsFieldErrorClass = this.config.fsSelectors.fieldError;
-            const fsFieldErrors = Array.from(
-                this.form.getElementsByClassName(fsFieldErrorClass)
-            );
-
-            fsFieldErrors.forEach(fsFieldError => {
-                fsFieldError.classList.add(fieldErrorClass);
-            });
-
-            // Update character count absolute positions
-            const textAreas = Array.from(
-                this.el.querySelectorAll(this.config.fsSelectors.textArea)
-            );
-
-            textAreas.forEach(textArea => {
-                triggerKeyUp(textArea);
-            });
-
-            postMessage('get-position', 'get-position');
-
-            // if no errors, submit form
-            if (fsFormErrors.length === 0) {
-                this.form.submit();
-            }
-        }, 100);
-    }
-}
-
-export { FormstackEmbedIframe };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack-iframe.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack-iframe.js
deleted file mode 100644
index 0e0af01d885..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack-iframe.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/formstack-iframe.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-
-class FormstackIframe {
-    el: HTMLIFrameElement;
-
-    constructor(el: HTMLIFrameElement): void {
-        this.el = el;
-    }
-
-    init(): void {
-        // Setup postMessage listener for events from "modules/identity/formstack"
-        window.addEventListener(
-            'message',
-            (event: MessageEvent): void => {
-                if (event.origin === config.get('page.idUrl')) {
-                    this.onMessage(event);
-                }
-            }
-        );
-
-        mediator.on(
-            'window:throttledResize',
-            (): void => {
-                this.refreshHeight();
-            }
-        );
-
-        // Listen for load of form confirmation or error page,
-        // which has no form, so won't instantiate the Formstack module
-        this.el.addEventListener(
-            'load',
-            (): void => {
-                this.show();
-                this.refreshHeight();
-            }
-        );
-    }
-
-    onMessage(event: MessageEvent): void {
-        switch (event.data) {
-            case 'ready':
-                this.show();
-                this.refreshHeight();
-                break;
-
-            case 'unload':
-                this.refreshHeight(true);
-                break;
-
-            case 'refreshHeight':
-                this.refreshHeight();
-                break;
-
-            default: // do nothing
-        }
-    }
-
-    refreshHeight(reset?: boolean): void {
-        if (reset) {
-            // If a height is set on the iframe, the following calculation
-            // will be at least that height, optionally reset first
-            this.el.style.height = '0';
-        }
-
-        const iframe = this.el.contentWindow.document;
-
-        if (!iframe) {
-            return;
-        }
-
-        const body = iframe.body;
-        const html = iframe.documentElement;
-
-        if (body && html) {
-            const height = Math.max(
-                body.scrollHeight,
-                body.offsetHeight,
-                html.clientHeight,
-                html.scrollHeight,
-                html.offsetHeight
-            );
-
-            this.el.style.height = `${height}px`;
-        }
-    }
-
-    show() {
-        this.el.classList.remove('is-hidden');
-    }
-}
-
-export { FormstackIframe };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack.js
deleted file mode 100644
index fd4d92327ff..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/formstack.js
+++ /dev/null
@@ -1,243 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/formstack.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { getUserOrSignIn } from 'common/modules/identity/api';
-
-// TODO: Remove repitition with common/modules/identity/formstack-iframe-embed
-class Formstack {
-    el: HTMLElement;
-    form: HTMLFormElement;
-    formId: string;
-    config: Object;
-
-    constructor(el: HTMLElement, formstackId: string): void {
-        this.el = el;
-        this.formId = formstackId.split('-')[0];
-
-        const defaultConfig = {
-            idClasses: {
-                form: 'form',
-                field: 'form-field',
-                note: 'form-field__note form-field__note--below',
-                label: 'label',
-                checkboxLabel: 'check-label',
-                textInput: 'text-input',
-                textArea: 'textarea textarea--no-resize',
-                submit: 'submit-input',
-                fieldError: 'form-field--error',
-                formError: 'form__error',
-                fieldset: 'formstack-fieldset',
-                required: 'formstack-required',
-                sectionHeader: 'formstack-heading',
-                sectionHeaderFirst: 'formstack-heading--first',
-                sectionText: 'formstack-section',
-                characterCount: 'formstack-count',
-                hide: 'is-hidden',
-            },
-            fsSelectors: {
-                form: `#fsForm${this.formId}`,
-                field: '.fsRow',
-                note: '.fsSupporting, .showMobile',
-                label: '.fsLabel',
-                checkboxLabel: '.fsOptionLabel',
-                textInput:
-                    '.fsField[type="text"], .fsField[type="email"], .fsField[type="number"], .fsField[type="tel"]',
-                textArea: 'textarea.fsField',
-                submit: '.fsSubmitButton',
-                fieldError: '.fsValidationError',
-                formError: '.fsError',
-                fieldset: 'fieldset',
-                required: '.fsRequiredMarker',
-                sectionHeader: '.fsSectionHeading',
-                sectionHeaderFirst: '.fsSection:first-child .fsSectionHeading',
-                sectionText: '.fsSectionText',
-                characterCount: '.fsCounter',
-                hide: '.hidden, .fsHidden, .ui-datepicker-trigger',
-            },
-            hiddenSelectors: {
-                userId: '[type="number"]',
-                email: '[type="email"]',
-            },
-        };
-
-        this.config = Object.assign({}, defaultConfig, config);
-    }
-
-    postMessage(message: string): void {
-        const domain = this.config.page.idUrl;
-
-        window.top.postMessage(message, domain);
-    }
-
-    init(): void {
-        // User object required to populate fields
-        let user = getUserOrSignIn('signin_from_formstack');
-
-        if (!user) {
-            user = {};
-        }
-
-        this.dom(user);
-
-        this.el.classList.remove(this.config.idClasses.hide);
-
-        if (document.documentElement) {
-            document.documentElement.classList.add('iframed--overflow-hidden');
-        }
-
-        // Update iframe height
-        this.postMessage('ready');
-    }
-
-    dom(user: Object): void {
-        const form: HTMLFormElement = (document.getElementById(
-            this.config.fsSelectors.form
-        ): any);
-
-        if (!form) {
-            return;
-        }
-
-        this.form = form;
-
-        // Formstack generates some awful HTML, so we'll remove the CSS links,
-        // loop their selectors and add our own classes instead
-        this.form.classList.add(this.config.idClasses.form);
-
-        const links = Array.from(this.el.getElementsByTagName('link'));
-
-        links.forEach(link => {
-            link.remove();
-        });
-
-        Object.keys(this.config.fsSelectors).forEach(key => {
-            const selector = this.config.fsSelectors[key];
-            const elems = Array.from(this.form.querySelectorAll(selector));
-            const classNames = this.config.idClasses[key].split(' ');
-
-            elems.forEach(elem => {
-                classNames.forEach(className => {
-                    elem.classList.add(className);
-                });
-            });
-        });
-
-        // Formstack also don't have capturable hidden fields,
-        // so we remove ID text inputs and append hidden equivalents
-        const userId = this.form.querySelector(
-            this.config.hiddenSelectors.userId
-        );
-
-        if (!userId) {
-            return;
-        }
-
-        userId.remove();
-
-        const email = this.form.querySelector(
-            this.config.hiddenSelectors.email
-        );
-
-        if (!email) {
-            return;
-        }
-
-        email.remove();
-
-        const userName = userId.getAttribute('name') || '';
-
-        const emailName = email.getAttribute('name') || '';
-
-        const html = `<input type="hidden" name="${userName}" value="${
-            user.id
-        }">
-                        <input type="hidden" name="${emailName}" value="${
-            user.primaryEmailAddress
-        }">`;
-
-        this.form.insertAdjacentHTML('beforeend', html);
-
-        // Events
-        window.addEventListener('unload', () => {
-            // Listen for navigation to success page
-            this.postMessage('unload');
-        });
-
-        this.form.addEventListener('submit', () => {
-            this.submit();
-        });
-    }
-
-    submit(): void {
-        const triggerKeyUp = el => {
-            const e = document.createEvent('HTMLEvents');
-            e.initEvent('keyup', false, true);
-            el.dispatchEvent(e);
-        };
-
-        setTimeout(() => {
-            // Remove any existing errors
-            const formErrorClass = this.config.idClasses.formError;
-            const formErrors = Array.from(
-                document.getElementsByClassName(formErrorClass)
-            );
-
-            formErrors.forEach(formError => {
-                formError.classList.remove(formErrorClass);
-            });
-
-            const fieldErrorClass = this.config.idClasses.fieldError;
-            const fieldErrors = Array.from(
-                document.getElementsByClassName(fieldErrorClass)
-            );
-
-            fieldErrors.forEach(fieldError => {
-                fieldError.classList.remove(fieldErrorClass);
-            });
-
-            // Handle new errors
-            const fsFormErrorClass = this.config.fsSelectors.formError;
-            const fsFormErrors = Array.from(
-                this.form.getElementsByClassName(fsFormErrorClass)
-            );
-
-            fsFormErrors.forEach(fsFormError => {
-                fsFormError.classList.add(formErrorClass);
-            });
-
-            const fsFieldErrorClass = this.config.fsSelectors.fieldError;
-            const fsFieldErrors = Array.from(
-                this.form.getElementsByClassName(fsFieldErrorClass)
-            );
-
-            fsFieldErrors.forEach(fsFieldError => {
-                fsFieldError.classList.add(fieldErrorClass);
-            });
-
-            // Update character count absolute positions
-            const textAreas = Array.from(
-                this.el.querySelectorAll(this.config.fsSelectors.textArea)
-            );
-
-            textAreas.forEach(textArea => {
-                triggerKeyUp(textArea);
-            });
-
-            this.postMessage('refreshHeight');
-        }, 100);
-    }
-}
-
-export { Formstack };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/header.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/header.js
deleted file mode 100644
index 728c4c4f64c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/header.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/header.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-import loadEnhancers from './modules/loadEnhancers';
-
-const ERR_UNDEFINED_MENU = 'Undefined menu';
-
-const showAccountMenu = (
-    buttonEl: HTMLElement,
-    menuEl: HTMLElement
-): Promise<void> =>
-    fastdom.mutate(() => {
-        menuEl.classList.add('is-active');
-        menuEl.setAttribute('aria-hidden', 'false');
-        buttonEl.setAttribute('aria-expanded', 'true');
-    });
-
-const hideAccountMenu = (
-    buttonEl: HTMLElement,
-    menuEl: HTMLElement
-): Promise<void> =>
-    fastdom.mutate(() => {
-        menuEl.classList.remove('is-active');
-        menuEl.setAttribute('aria-hidden', 'true');
-        buttonEl.setAttribute('aria-expanded', 'false');
-    });
-
-const bindNavToggle = (buttonEl: HTMLElement): void => {
-    buttonEl.addEventListener('click', (ev: Event) => {
-        const menuElSelector: ?string = buttonEl.getAttribute('aria-controls');
-        if (!menuElSelector) throw new Error(ERR_UNDEFINED_MENU);
-
-        ev.preventDefault();
-
-        fastdom
-            .measure(() => document.getElementById(menuElSelector))
-            .then((menuEl: HTMLElement) => {
-                if (!menuEl) throw new Error(ERR_UNDEFINED_MENU);
-                const watchForOutsideClick = subEv => {
-                    if (!menuEl.contains(subEv.target)) {
-                        hideAccountMenu(buttonEl, menuEl);
-                        window.removeEventListener(
-                            'click',
-                            watchForOutsideClick
-                        );
-                    }
-                };
-                showAccountMenu(buttonEl, menuEl);
-                window.addEventListener('click', watchForOutsideClick);
-            });
-    });
-};
-
-const initHeader = (): void => {
-    const loaders = [['.js_identity-header__nav-toggle', bindNavToggle]];
-    loadEnhancers(loaders);
-};
-
-export { initHeader };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/identity-features.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/identity-features.js
deleted file mode 100644
index 373a4659041..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/identity-features.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/identity-features.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-class IdentityFeatures {
-    promptForSignIn: boolean;
-
-    constructor() {
-        this.promptForSignIn =
-            // $FlowFixMe
-            navigator.credentials && window.PasswordCredential;
-    }
-}
-
-export const identityFeatures = new IdentityFeatures();
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/button.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/button.js
deleted file mode 100644
index 9209792a05a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/button.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/button.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-
-export const addUpdatingState = (buttonEl: HTMLButtonElement) =>
-    fastdom.mutate(() => {
-        buttonEl.disabled = true;
-        $(buttonEl).addClass('is-updating is-updating-subscriptions');
-    });
-
-export const removeUpdatingState = (buttonEl: HTMLButtonElement) =>
-    fastdom.mutate(() => {
-        buttonEl.disabled = false;
-        $(buttonEl).removeClass('is-updating is-updating-subscriptions');
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/fetchFormFields.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/fetchFormFields.js
deleted file mode 100644
index 95d2d2bfc93..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/fetchFormFields.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/fetchFormFields.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-
-export const getCsrfTokenFromElement = (
-    originalEl: ?HTMLElement
-): Promise<string> =>
-    fastdom
-        .measure(() => {
-            if (!originalEl) return Promise.reject();
-            const closestFormEl: ?Element = originalEl.closest('form');
-            if (closestFormEl) {
-                return closestFormEl.querySelector('[name=csrfToken]');
-            }
-
-            return Promise.reject();
-        })
-        .then((csrfTokenEl: HTMLInputElement) => csrfTokenEl.value.toString());
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/loadEnhancers.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/loadEnhancers.js
deleted file mode 100644
index 3f1b86cb2b3..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/loadEnhancers.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/loadEnhancers.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { _ as robust } from 'lib/robust';
-import fastdom from 'lib/fastdom-promise';
-
-/* TODO:Improve type checking here */
-
-const loadEnhancers = (loaders: Array<Array<any>>): void => {
-    loaders.forEach(([classname: string, action: (x: HTMLElement) => void]) => {
-        if (typeof classname !== 'string') throw new Error('Invalid classname');
-        if (typeof action !== 'function') throw new Error('Invalid action');
-        return fastdom
-            .measure(() => Array.from(document.querySelectorAll(classname)))
-            .then(elements =>
-                elements.forEach((element: HTMLElement) => {
-                    robust.catchAndLogError(classname, () => {
-                        action(element);
-                    });
-                })
-            );
-    });
-};
-
-export default loadEnhancers;
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/modal.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/modal.js
deleted file mode 100644
index 38a87b6782d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/modal.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/modal.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-
-const ERR_MODAL_NOT_FOUND = 'Modal not found';
-const ERR_MODAL_MALFORMED = 'Modal is malformed';
-
-const bindCloserOnce = (modalEl: HTMLElement): Promise<void[]> =>
-    fastdom
-        .measure(() =>
-            Array.from(modalEl.querySelectorAll('.js-identity-modal__closer'))
-        )
-        .then(buttonEls =>
-            buttonEls
-                .filter(buttonEl => !buttonEl.dataset.closeIsBound)
-                .map(buttonEl =>
-                    fastdom.mutate(() => {
-                        buttonEl.dataset.closeIsBound = true;
-                        buttonEl.addEventListener('click', () => {
-                            modalEl.classList.remove('identity-modal--active');
-                        });
-                    })
-                )
-        )
-        .then(_ => Promise.all(_));
-
-const getModal = (name: string): Promise<HTMLElement> =>
-    fastdom
-        .measure(() => {
-            const modalEl: ?HTMLElement = document.querySelector(
-                `.identity-modal.identity-modal--${name}`
-            );
-            if (!modalEl) throw new Error(ERR_MODAL_NOT_FOUND);
-            return modalEl;
-        })
-        .then(modalEl => bindCloserOnce(modalEl).then(() => modalEl));
-
-const getContents = (name: string): Promise<HTMLElement> =>
-    getModal(name).then(modalEl =>
-        fastdom.measure(() => {
-            const contentsEl: ?HTMLElement = modalEl.querySelector(
-                `.identity-modal__content`
-            );
-            if (!contentsEl) throw new Error(ERR_MODAL_MALFORMED);
-            return contentsEl;
-        })
-    );
-
-const show = (name: string): Promise<void> =>
-    getModal(name).then(modalEl =>
-        fastdom.measure(() => {
-            modalEl.classList.add('identity-modal--active');
-        })
-    );
-
-const hide = (name: string): Promise<void> =>
-    getModal(name).then(modalEl =>
-        fastdom.measure(() => {
-            modalEl.classList.remove('identity-modal--active');
-        })
-    );
-
-export { hide, show, getContents };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/prependMessage.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/prependMessage.js
deleted file mode 100644
index 0d8dfadd98d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/prependMessage.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/prependMessage.js
- * to .ts, then delete it.
- */
-
-// @flow
-const classes = {
-    formError: '.form__error',
-    formSuccess: '.form__success',
-};
-
-const prependMessage = (
-    message: string,
-    location: Element,
-    clazz: string
-): void => {
-    const errorHtml = document.createElement('div');
-    errorHtml.innerHTML = message;
-    errorHtml.className = clazz;
-    errorHtml.setAttribute('role', 'alert');
-    errorHtml.setAttribute('aria-live', 'polite');
-    location.insertBefore(errorHtml, location.firstChild);
-};
-
-const prependErrorMessage = (message: string, location: Element): void => {
-    const errorClass = classes.formError.replace('.', '');
-    prependMessage(message, location, errorClass);
-};
-
-const prependSuccessMessage = (message: string, location: Element): void => {
-    const errorClass = classes.formSuccess.replace('.', '');
-    prependMessage(message, location, errorClass);
-};
-
-export { prependErrorMessage, prependSuccessMessage };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/show-errors.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/show-errors.js
deleted file mode 100644
index 8f9aa81bc7b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/show-errors.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/show-errors.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-
-const formErrorClassName = 'form__error';
-const formErrorHolderClassName = 'js-errorHolder';
-
-const genericErrorMessage = 'Sorry, something went wrong';
-
-const errors = [];
-
-type IdentityRenderableError = {
-    message: string,
-    action: string,
-    times: number,
-};
-
-const renderError = (error: IdentityRenderableError): Promise<void> =>
-    fastdom
-        .measure(() =>
-            window.document.querySelector(`.${formErrorHolderClassName}`)
-        )
-        .then((errorHolderEl: HTMLElement) =>
-            fastdom.mutate(() => {
-                const errorEl = document.createElement('div');
-                errorEl.setAttribute('role', 'alert');
-                errorEl.setAttribute('aria-live', 'polite');
-                errorEl.innerHTML = `<p>${error.message}.${
-                    error.times > 1 ? ` (${error.times} times)` : ``
-                }</p>`;
-                errorEl.className = formErrorClassName;
-                errorHolderEl.appendChild(errorEl);
-
-                switch (error.action) {
-                    case 'reload': {
-                        const reloadCtaEl = document.createElement('a');
-                        reloadCtaEl.innerHTML = 'Refresh this page';
-                        reloadCtaEl.onclick = () => {
-                            window.location.reload();
-                        };
-                        errorEl.appendChild(reloadCtaEl);
-                        break;
-                    }
-                    default: {
-                        break;
-                    }
-                }
-            })
-        );
-
-const renderList = (): Promise<void> =>
-    fastdom
-        .measure(() =>
-            window.document.querySelector(`.${formErrorHolderClassName}`)
-        )
-        .then((errorHolderEl: HTMLElement) =>
-            fastdom.mutate(() => {
-                while (errorHolderEl.firstChild) {
-                    errorHolderEl.removeChild(errorHolderEl.firstChild);
-                }
-            })
-        )
-        .then(() => Promise.all(errors.map(error => renderError(error))))
-        .then(() => Promise.resolve());
-
-export const reset = (): void => {
-    errors.length = 0;
-};
-
-export const push = (error: mixed, action: string = 'none'): Promise<void> => {
-    const message =
-        error instanceof Error && error.message
-            ? error.message
-            : genericErrorMessage;
-
-    const isDupeIndex = errors.findIndex(
-        (_: IdentityRenderableError) => _.message === message
-    );
-
-    if (isDupeIndex > -1) {
-        errors.push({
-            message,
-            action,
-            times: errors[isDupeIndex].times + 1,
-        });
-        errors.splice(isDupeIndex, 1);
-    } else {
-        errors.push({
-            message,
-            action,
-            times: 1,
-        });
-    }
-
-    return renderList();
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/show-errors.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/show-errors.spec.js
deleted file mode 100644
index f95dccec882..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/show-errors.spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/show-errors.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { push, reset } from './show-errors';
-
-beforeAll(() => {
-    if (document.body) {
-        document.body.innerHTML = `
-            <div class="js-errorHolder"></div>
-        `;
-    }
-});
-
-beforeEach(() => {
-    reset();
-});
-
-test('renders an error with a custom name', () =>
-    push(Error('Test String')).then(() => {
-        expect(
-            (document.querySelector(`.js-errorHolder > div > p`) || {})
-                .innerHTML
-        ).toEqual('Test String.');
-    }));
-
-test('renders an undefined error', () =>
-    push(true).then(() => {
-        expect(
-            (document.querySelector(`.js-errorHolder > div > p`) || {})
-                .innerHTML
-        ).toEqual('Sorry, something went wrong.');
-    }));
-
-test('renders 3 errors', () =>
-    push(Error('Test 1'))
-        .then(() => push(Error('Test 2')))
-        .then(() => push(Error('Test 3')))
-        .then(() => {
-            expect(
-                (document.querySelector(`.js-errorHolder`) || {}).childNodes
-                    .length
-            ).toEqual(3);
-        }));
-
-test('stacks repeated errors', () =>
-    push(Error('Test 1'))
-        .then(() => push(Error('Test 2')))
-        .then(() => push(Error('Test 2')))
-        .then(() => {
-            expect(
-                (document.querySelector(`.js-errorHolder`) || {}).childNodes
-                    .length
-            ).toEqual(2);
-            expect(
-                (
-                    document.querySelector(
-                        `.js-errorHolder > div:nth-child(2) > p`
-                    ) || {}
-                ).innerHTML
-            ).toContain('(2 times)');
-        }));
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/switch.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/switch.js
deleted file mode 100644
index 5ef24ef75f6..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/switch.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/switch.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-
-const timeouts: Array<TimeoutID> = [];
-
-const checkboxShouldUpdate = (
-    checkedValue: boolean,
-    originallyCheckedValue: string
-): boolean => {
-    if (
-        (originallyCheckedValue === 'false' && checkedValue === true) ||
-        (originallyCheckedValue === 'true' && checkedValue === false)
-    ) {
-        return true;
-    }
-    return false;
-};
-
-const updateDataLink = (labelEl: HTMLElement, checked): Promise<any> =>
-    fastdom.mutate(() => {
-        labelEl.dataset.linkName = labelEl.dataset.linkNameTemplate.replace(
-            '[action]',
-            checked ? 'untick' : 'tick'
-        );
-    });
-
-export const bindAnalyticsEventsOnce = (labelEl: HTMLElement): Promise<any> =>
-    fastdom
-        .measure((): ?HTMLElement => labelEl.querySelector('input'))
-        .then((checkboxEl: HTMLInputElement) => {
-            if (!labelEl.dataset.updateDataLinkBound) {
-                labelEl.addEventListener('change', () => {
-                    updateDataLink(labelEl, checkboxEl.checked);
-                });
-                labelEl.dataset.updateDataLinkBound = 'true';
-                updateDataLink(labelEl, checkboxEl.checked);
-            }
-        });
-
-export const getInfo = (labelEl: HTMLElement): Promise<any> =>
-    bindAnalyticsEventsOnce(labelEl)
-        .then(() =>
-            fastdom.measure((): ?HTMLElement => labelEl.querySelector('input'))
-        )
-        .then((checkboxEl: HTMLInputElement) => {
-            if (!labelEl.dataset.updateDataLinkBound) {
-                labelEl.addEventListener('change', () => {
-                    updateDataLink(labelEl, checkboxEl.checked);
-                });
-                labelEl.dataset.updateDataLinkBound = 'true';
-                updateDataLink(labelEl, checkboxEl.checked);
-            }
-            return checkboxEl;
-        })
-        .then((checkboxEl: HTMLInputElement) => ({
-            checked: checkboxEl.checked,
-            name: checkboxEl.name,
-            shouldUpdate: checkboxShouldUpdate(
-                checkboxEl.checked,
-                labelEl.dataset.originallyChecked
-            ),
-        }));
-
-export const flip = (labelEl: HTMLElement): Promise<any> =>
-    fastdom
-        .measure((): ?HTMLElement => labelEl.querySelector('input'))
-        .then((checkboxEl: HTMLInputElement) => {
-            fastdom.mutate(() => {
-                checkboxEl.checked = !checkboxEl.checked;
-            });
-        });
-
-export const addSpinner = (
-    labelEl: HTMLElement,
-    latencyTimeout: number = 500
-): Promise<any> =>
-    fastdom
-        .mutate(() => {
-            labelEl.classList.add('is-updating');
-            if (document.body) document.body.classList.add('is-updating-js');
-        })
-        .then(() => {
-            labelEl.dataset.slowLoadTimeout = timeouts
-                .push(
-                    setTimeout(() => {
-                        fastdom.mutate(() => {
-                            if (document.body) {
-                                document.body.classList.add(
-                                    'is-updating-cursor'
-                                );
-                            }
-                            labelEl.classList.add('is-taking-a-long-time');
-                        });
-                    }, latencyTimeout)
-                )
-                .toString();
-        });
-
-export const removeSpinner = (labelEl: HTMLElement): Promise<any> =>
-    fastdom.mutate(() => {
-        if (document.body) document.body.classList.remove('is-updating-cursor');
-        if (document.body) document.body.classList.remove('is-updating-js');
-        labelEl.classList.remove('is-updating');
-        labelEl.classList.remove('is-taking-a-long-time');
-        clearTimeout(
-            timeouts[parseInt(labelEl.dataset.slowLoadTimeout, 10) - 1]
-        );
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/switch.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/switch.spec.js
deleted file mode 100644
index dea020967f2..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/modules/switch.spec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/modules/switch.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import { addSpinner, removeSpinner, getInfo } from './switch';
-
-beforeEach(() => {
-    if (document.body) {
-        document.body.innerHTML = `
-            <div class="originalClassName" data-originally-checked="false"><input type="checkbox" checked name="test-name" /></div>
-        `;
-    }
-});
-
-test('gets info', () => {
-    const el = $('.originalClassName').get(0);
-    getInfo(el).then(info => {
-        expect(info.checked).toEqual(true);
-        expect(info.name).toEqual('test-name');
-        expect(info.shouldUpdate).toEqual(true);
-    });
-});
-
-test('doesnt force update with an empty data-originally-checked', () => {
-    if (document.body) {
-        document.body.innerHTML = `
-            <div class="originalClassName"><input type="checkbox" checked name="test-name" /></div>
-        `;
-    }
-    const el = $('.originalClassName').get(0);
-    getInfo(el).then(info => {
-        expect(info.shouldUpdate).toEqual(false);
-    });
-});
-
-test('doesnt force update with an invalid data-originally-checked', () => {
-    if (document.body) {
-        document.body.innerHTML = `
-            <div class="originalClassName" data-originally-checked="🔔"><input type="checkbox" checked name="test-name" /></div>
-        `;
-    }
-    const el = $('.originalClassName').get(0);
-    getInfo(el).then(info => {
-        expect(info.shouldUpdate).toEqual(false);
-    });
-});
-
-test('adds a spinner', () => {
-    const el = $('.originalClassName').get(0);
-    addSpinner(el).then(() => {
-        expect(el.hasClass('is-updating')).toEqual(true);
-        expect($(document.body).hasClass('is-updating-cursor')).toEqual(true);
-    });
-});
-
-test('removes a spinner', () => {
-    const el = $('.originalClassName');
-    expect(el.length).toEqual(1);
-
-    if (el[0]) {
-        addSpinner(el.get(0))
-            .then(() => removeSpinner(el.get(0)))
-            .then(() => {
-                expect(el[0].className).toEqual('originalClassName');
-                expect($(document.body).hasClass('is-updating-cursor')).toEqual(
-                    false
-                );
-            });
-    }
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/public-profile.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/public-profile.js
deleted file mode 100644
index efe2b4e44d1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/public-profile.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/public-profile.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import { getUrlVars } from 'lib/url';
-import { ActivityStream } from 'common/modules/discussion/activity-stream';
-
-const getActivityStream = (cb: Function): void => {
-    const dataOpts = {
-        userId: 'data-user-id',
-        streamType: 'data-stream-type',
-    };
-
-    const streamElem = document.getElementsByClassName('js-activity-stream')[0];
-
-    if (!streamElem) {
-        return;
-    }
-
-    const opts = Object.keys(dataOpts).reduce((acc, key) => {
-        acc[key] = streamElem.getAttribute(dataOpts[key]);
-
-        return acc;
-    }, {});
-
-    opts.page = getUrlVars().page || 1;
-
-    const activityStream = new ActivityStream(opts);
-
-    streamElem.classList.add('activity-stream--loading');
-
-    activityStream.fetch(streamElem).then(() => {
-        streamElem.classList.remove('activity-stream--loading');
-    });
-
-    cb(activityStream);
-};
-
-const selectTab = (el: HTMLElement): void => {
-    const selectedTabs = Array.from(
-        document.getElementsByClassName('tabs__tab--selected')
-    );
-
-    selectedTabs.forEach(selectedTab => {
-        selectedTab.classList.remove('tabs__tab--selected');
-    });
-
-    if (el.parentElement) {
-        el.parentElement.classList.add('tabs__tab--selected');
-    }
-};
-
-const setupActivityStreamChanger = (activityStream: ActivityStream): void => {
-    bean.on(document.body, 'click', '.js-activity-stream-change', e => {
-        const el: HTMLElement = (e.currentTarget: any);
-        const streamType = el.getAttribute('data-stream-type');
-
-        e.preventDefault();
-
-        selectTab(el);
-
-        activityStream.change({
-            page: 1,
-            streamType,
-        });
-    });
-};
-
-const setupActivityStreamSearch = (activityStream: ActivityStream): void => {
-    bean.on(document.body, 'submit', '.js-activity-stream-search', e => {
-        const q = e.currentTarget.elements.q.value;
-        const anchor = document.querySelector(
-            'a[data-stream-type="discussions"]'
-        );
-
-        e.preventDefault();
-
-        if (anchor) {
-            selectTab(anchor);
-        }
-
-        activityStream.change({
-            streamType:
-                q !== '' ? `search/${encodeURIComponent(q)}` : 'comments',
-        });
-    });
-};
-
-const init = (): void => {
-    getActivityStream(activityStream => {
-        setupActivityStreamChanger(activityStream);
-        setupActivityStreamSearch(activityStream);
-    });
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/component-event-tracking.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/component-event-tracking.js
deleted file mode 100644
index 8cf4e7c4cb7..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/component-event-tracking.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/component-event-tracking.js
- * to .ts, then delete it.
- */
-
-// @flow
-import ophan from 'ophan/ng';
-
-type ABTestVariant = {
-    name: string,
-    variant: string,
-};
-
-type ComponentEventWithoutAction = {
-    component: OphanComponent,
-    value?: string,
-    id?: string,
-    abTest?: ABTestVariant,
-};
-
-// ophan helper methods
-export const submitComponentEventTracking = (
-    componentEvent: OphanComponentEvent
-) => {
-    ophan.record({ componentEvent });
-};
-
-export const submitViewEventTracking = (
-    componentEvent: ComponentEventWithoutAction
-) =>
-    submitComponentEventTracking({
-        ...componentEvent,
-        action: 'VIEW',
-    });
-
-export const submitClickEventTracking = (
-    componentEvent: ComponentEventWithoutAction
-) =>
-    submitComponentEventTracking({
-        ...componentEvent,
-        action: 'CLICK',
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/component.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/component.js
deleted file mode 100644
index 65952ee7244..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/component.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/component.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// component name, should always be sign-in-gate
-export const componentName = 'sign-in-gate';
-
-// set the ophan component tracking vars
-export const withComponentId: (id: string) => OphanComponent = (
-    id: string = ''
-) => ({
-    componentType: 'SIGN_IN_GATE',
-    id,
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/helper.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/helper.js
deleted file mode 100644
index c5b68a13ca1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/helper.js
+++ /dev/null
@@ -1,495 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/helper.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import userPrefs from 'common/modules/user-prefs';
-import { storage } from '@guardian/libs';
-import config from 'lib/config';
-import { getSync as geolocationGetSync } from 'lib/geolocation';
-import {
-    getSynchronousTestsToRun,
-    isInABTestSynchronous,
-} from 'common/modules/experiments/ab';
-import { isUserLoggedIn } from 'common/modules/identity/api';
-import { cmp } from '@guardian/consent-management-platform';
-import { submitClickEventTracking } from './component-event-tracking';
-import type { CurrentABTest, GateStatus, DismissalWindow } from './types';
-
-// Helper for setGatePageTargeting function
-const setGoogleTargeting = (canShow: GateStatus): void => {
-    if (window.googletag) {
-        window.googletag.cmd.push(() => {
-            window.googletag
-                .pubads()
-                .setTargeting('gate', canShow.toString().slice(0, 1)); // must be a short string so we slice to "t"/"f"/"d"/"s"
-        });
-    }
-};
-
-// We use this key for storing the gate dismissed count against
-const localStorageDismissedCountKey = (variant: string, name: string): string => `gate-dismissed-count-${name}-${variant}`;
-
-const retrieveDismissedCount = (
-    variant: string,
-    name: string,
-    componentName: string
-): number => {
-    try {
-        const prefs = userPrefs.get(componentName) || {};
-        const dismissed: any = prefs[localStorageDismissedCountKey(variant, name)];
-
-        if (Number.isFinite(dismissed)) {
-            return dismissed;
-        }
-        return 0;
-    } catch (error) {
-        return 0;
-    }
-};
-
-// wrapper over isLoggedIn
-export const isLoggedIn = isUserLoggedIn;
-
-// wrapper over isInABTestSynchronous
-export const isInTest: ABTest => boolean = test => isInABTestSynchronous(test);
-
-// when running multiple tests simultaneously to test the component, we need to get
-// which test the user is in, so that we can check and display the correct logic for that test
-export const getTestforMultiTest: (Array<ABTest>) => ABTest = tests =>
-    tests.reduce((acc, test) => {
-        const checkTest = getSynchronousTestsToRun().find(
-            t => t.id === test.id
-        );
-        if (checkTest) return checkTest;
-        return acc;
-    }, undefined);
-
-// get the current variant id the user is in
-export const getVariant: ABTest => string = test => {
-    //  get the current test
-    const currentTest = getSynchronousTestsToRun().find(t => t.id === test.id);
-
-    // get variant user is in for the test
-    return currentTest ? currentTest.variantToRun.id : '';
-};
-
-// set in user preferences that the user has dismissed the gate, set the value to the current ISO date string
-// name is optional, but can be used to differentiate between multiple sign in gate tests
-export const setUserDismissedGate: ({
-    name?: string,
-    variant: string,
-    componentName: string,
-}) => void = ({ name = '', variant, componentName }) => {
-    const prefs = userPrefs.get(componentName) || {};
-    prefs[`${name ? `${name}-` : ''}${variant}`] = new Date().toISOString();
-    userPrefs.set(componentName, prefs);
-};
-
-// delete from user preferences that the user has previously dismissed the gate
-// name is optional, but can be used to differentiate between multiple sign in gate tests
-export const unsetUserDismissedGate: ({
-    componentName: string,
-}) => void = ({ componentName }) => {
-    userPrefs.remove(componentName);
-};
-
-// check if the user has dismissed the gate by checking the user preferences,
-// name is optional, but can be used to differentiate between multiple sign in gate tests
-export const hasUserDismissedGate: ({
-    name?: string,
-    variant: string,
-    componentName: string,
-}) => boolean = ({ name = '', componentName, variant }) => {
-    const prefs = userPrefs.get(componentName) || {};
-
-    return !!prefs[`${name ? `${name}-` : ''}${variant}`];
-};
-
-// check if the user has dismissed the gate within a given timeframe
-export const hasUserDismissedGateInWindow: ({
-    window: DismissalWindow,
-    name?: string,
-    variant: string,
-    componentName: string,
-}) => boolean = ({ window, name = '', componentName, variant }) => {
-    const prefs = userPrefs.get(componentName) || {};
-    if (!prefs[`${name ? `${name}-` : ''}${variant}`]) {
-        return false;
-    }
-
-    const dismissalTZ = Date.parse(
-        prefs[`${name ? `${name}-` : ''}${variant}`]
-    );
-
-    const dismissalWindows = {
-        day: 24,
-        dev: 0.05, // 3 min for testing
-    };
-    const hours = (Date.now() - dismissalTZ) / 36e5; //  36e5 is the scientific notation for 60*60*1000, which converts the milliseconds difference into hours.
-
-    if (hours >= dismissalWindows[window]) {
-        unsetUserDismissedGate({ componentName }); // clears the dismissal
-        return false;
-    }
-
-    return true;
-};
-
-// Test whether the user has dismissed the gate variant more than `count` times
-export const hasUserDismissedGateMoreThanCount = (
-    variant: string,
-    name: string,
-    componentName: string,
-    count: number
-): boolean => retrieveDismissedCount(variant, name, componentName) > count;
-
-// Increment the number of times a user has dismissed this gate variant
-export const incrementUserDismissedGateCount = (
-    variant: string,
-    name: string,
-    componentName: string
-): void => {
-    try {
-        const prefs = userPrefs.get(componentName) || {};
-        prefs[localStorageDismissedCountKey(variant, name)] = retrieveDismissedCount(variant, name, componentName) + 1;
-        userPrefs.set(componentName, prefs);
-    } catch (error) {
-        // localstorage isn't available so show the gate
-    }
-};
-
-// Dynamically sets the gate custom parameter for Google ad request page targeting
-export const setGatePageTargeting = (
-    isGateDismissed: boolean,
-    canShowCheck: boolean
-): void => {
-    if (isUserLoggedIn()) {
-        setGoogleTargeting('signed in');
-    } else if (isGateDismissed) {
-        setGoogleTargeting('dismissed');
-    } else {
-        setGoogleTargeting(canShowCheck);
-    }
-};
-
-// use the dailyArticleCount from the local storage to see how many articles the user has viewed in a day
-// in our case if this is the n-numbered article or higher the user has viewed then set the gate
-export const isNPageOrHigherPageView = (n: number = 2): boolean => {
-    // get daily read article count array from local storage
-    const dailyArticleCount = storage.local.get('gu.history.dailyArticleCount') || [];
-
-    // get the count from latest date, if it doesnt exist, set to 0
-    const { count = 0 } = dailyArticleCount[0] || {};
-
-    // check if count is greater or equal to 1 less than n since dailyArticleCount is incremented after this component is loaded
-    return count >= n - 1;
-};
-
-// use gu.location to determine is the browser is in the specified country
-// Note, use country codes specified in /static/src/javascripts/lib/geolocation.js
-export const isCountry = (countryCode: string): boolean => {
-    const geolocation = geolocationGetSync();
-    return geolocation === countryCode;
-};
-
-// determine if the useragent is running iOS 9 (known to be buggy for sign in flow)
-export const isIOS9 = (): boolean => {
-    // get the browser user agent
-    const ua = navigator.userAgent;
-    // check useragent if the device is an iOS device
-    const appleDevice = /(iPhone|iPod|iPad)/i.test(ua);
-    // check useragent if the os is version 9
-    const os = /(CPU OS 9_)/i.test(ua);
-
-    // if both true, then it's an apple ios 9 device
-    return appleDevice && os;
-};
-
-// hide the sign in gate on article types that are not supported
-// add to the include parameter array if there are specific types that should be included/overridden
-export const isInvalidArticleType = (include: Array<string> = []): boolean => {
-    // uses guardian config object to check for these page types
-    const invalidTypes = [
-        'isColumn',
-        'isFront',
-        'isHosted',
-        'isImmersive',
-        'isLive',
-        'isLiveBlog',
-        'isNumberedList',
-        'isPaidContent',
-        'isPhotoEssay',
-        'isSensitive',
-        'isSplash',
-        'isPodcast',
-    ];
-
-    return invalidTypes
-        .filter(el => !include.includes(el))
-        .reduce((isArticleInvalid, type) => {
-            if (isArticleInvalid) return true;
-
-            return config.get(`page.${type}`);
-        }, false);
-};
-
-// hide the sign in gate on certain sections of the site, e.g info, about, help etc.
-// add to the include parameter array if there are specific types that should be included/overridden
-export const isInvalidSection = (include: Array<string> = []): boolean => {
-    const invalidSections = [
-        'about',
-        'info',
-        'membership',
-        'help',
-        'guardian-live-australia',
-        'gnm-archive',
-    ];
-
-    return invalidSections
-        .filter(el => !include.includes(el))
-        .reduce((isSectionInvalid, section) => {
-            if (isSectionInvalid) return true;
-
-            // looks up window.guardian.config object in the browser console
-            return config.get(`page.section`) === section;
-        }, false);
-};
-
-// hide the sign in gate for certain tags on the site
-// add to the include parameter array if there are specific tags that should be included/overridden
-export const isInvalidTag = (include: Array<String> = []): boolean => {
-    const invalidTags = [
-        'info/newsletter-sign-up'
-    ];
-
-    return invalidTags
-        .filter(el => !include.includes(el))
-        .some((tag) => config.get(`page.keywordIds`, "")
-            .split(',')
-            .includes(tag));
-};
-
-// html event wrapper using bean
-export const addEventHandler: ({
-    element: HTMLElement,
-    event: string,
-    selector: string,
-    handler: Function,
-}) => void = ({ element, event, selector, handler }) => {
-    bean.on(element, event, selector, handler);
-};
-
-// click event wrapper using addEventHandler method
-export const addClickHandler: ({
-    element: HTMLElement,
-    selector: string,
-    component: OphanComponent,
-    abTest: CurrentABTest,
-    value: string,
-    callback?: Function,
-}) => void = ({
-    element,
-    selector,
-    component,
-    abTest,
-    value,
-    callback = () => {},
-}) => {
-    addEventHandler({
-        element,
-        event: 'click',
-        selector,
-        handler: () => {
-            submitClickEventTracking({
-                component,
-                abTest,
-                value,
-            });
-
-            return callback();
-        },
-    });
-};
-
-// shows the CMP (consent management platform) module
-export const showPrivacySettingsCMPModule: () => void = () => {
-    if (config.get('switches.consentManagement', true)) {
-        cmp.showPrivacyManager();
-    }
-};
-
-// add extra css on a given selector on an opinion page
-export const addCSSOnOpinion: ({
-    element: HTMLElement,
-    selector: string,
-    css: string,
-}) => void = ({ element, selector, css }) => {
-    if (config.get(`page.tones`) === 'Comment') {
-        const selection = element.querySelector(selector);
-        if (selection) {
-            selection.classList.add(css);
-        }
-    }
-};
-
-// add the background color if the page the user is on is the opinion section
-export const addOpinionBgColour: ({
-    element: HTMLElement,
-    selector: string,
-}) => void = ({ element, selector }) => {
-    if (config.get(`page.tones`) === 'Comment') {
-        const overlay = element.querySelector(selector);
-        if (overlay) {
-            overlay.classList.add(
-                'signin-gate__first-paragraph-overlay--comment'
-            );
-        }
-    }
-};
-
-// change the colour of the text depending the pillar that the user is on
-export const addPillarColour: ({
-    element: HTMLElement,
-    selector: string,
-}) => void = ({ element, selector }) => {
-    // check page type/pillar to change text colour of the sign in gate
-    const paragraphText = element.querySelector(selector);
-    if (paragraphText) {
-        switch (config.get(`page.pillar`)) {
-            case 'News':
-                paragraphText.classList.add(`signin-gate__benefits--text-news`);
-                break;
-            case 'Opinion':
-                paragraphText.classList.add(
-                    `signin-gate__benefits--text-comment`
-                );
-                break;
-            case 'Sport':
-                paragraphText.classList.add(
-                    `signin-gate__benefits--text-sport`
-                );
-                break;
-            case 'Arts':
-                paragraphText.classList.add(
-                    `signin-gate__benefits--text-culture`
-                );
-                break;
-            case 'Lifestyle':
-                paragraphText.classList.add(
-                    `signin-gate__benefits--text-lifestyle`
-                );
-                break;
-            default:
-                break;
-        }
-    }
-};
-
-// get the html of the whole gate, by getting the html template of the variant, and adding that
-// to the child which is hidden by the fade in
-export const setTemplate: ({
-    child: HTMLElement,
-    template: string,
-}) => string = ({ child, template }) => `
-    <div class="signin-gate__first-paragraph-container">
-        ${child.outerHTML}
-        <div class="signin-gate__first-paragraph-overlay"></div>
-    </div>
-    ${template}
-`;
-
-// add opinion bg colour to gate fade
-export const addOverlayVariantCSS: ({
-    element: HTMLElement,
-    selector: string,
-}) => void = ({ element, selector }) => {
-    const overlay = element.querySelector(selector);
-    if (overlay) {
-        if (config.get(`page.tones`) === 'Comment') {
-            overlay.classList.add('overlay--comment--var');
-        } else {
-            overlay.classList.add('overlay--var');
-        }
-    }
-};
-
-// helper method which first shows the gate based on the template supplied, adds any
-// handlers, e.g. click events etc. defined in the handler parameter function
-export const showGate: ({
-    handler: ({
-        articleBody: HTMLElement,
-        shadowArticleBody: HTMLElement,
-    }) => void,
-    template: string,
-}) => boolean = ({ handler, template }) => {
-    // get the whole article body, .js-article__body for non-DCR and .article-body-commercial-selector for DCR
-    const articleBody =
-        document.querySelector('.js-article__body') ||
-        document.querySelector('.article-body-commercial-selector');
-
-    // check if article body exists, since if it doesn't we don't want to show the gate
-    if (articleBody) {
-        // we look at the length of the children to determine which paragraphs should be shown in the "fade in"
-        if (articleBody.children.length) {
-            // container div to hold our "shadow" article dom while we create it
-            const shadowArticleBody = document.createElement('div');
-            // add the article body classes to the "shadow"
-            shadowArticleBody.className = articleBody.className;
-
-            // create an element to contain which children should have the overlay
-            const shadowOverlay = document.createElement('div');
-            // add the first child to the overlay, we use deep cloneNode so that child we add to the overlay is not a reference to the one in the hidden article
-            shadowOverlay.appendChild(articleBody.children[0].cloneNode(true));
-
-            // if the height of the child is too small, we add a 2nd child to the overlay so it looks better
-            if (
-                articleBody.children[0].clientHeight < 125 &&
-                articleBody.children.length > 1
-            ) {
-                // find the indexes of the articles "p" tag, to include in the sign in gate fade
-                const pIndexes = Array.from(articleBody.children)
-                    .map((elem, idx) => (elem.tagName === 'P' ? idx : ''))
-                    .filter(i => i !== '');
-
-                // found some "p" tags, add the first "p" to the fade
-                if (pIndexes.length > 1) {
-                    shadowOverlay.appendChild(
-                        articleBody.children[pIndexes[1]].cloneNode(true)
-                    );
-                }
-            }
-
-            // set the new article body to be first paragraph with transparent overlay, with the sign in gate component
-            shadowArticleBody.innerHTML = setTemplate({
-                child: shadowOverlay,
-                template,
-            });
-
-            // defined by the caller, this function should handle any click events required, including the "dismiss" or "not now" link/button
-            handler({
-                articleBody,
-                shadowArticleBody,
-            });
-
-            // Hide the article Body. Append the shadow one.
-            articleBody.style.display = 'none';
-            if (articleBody.parentNode) {
-                articleBody.parentNode.appendChild(shadowArticleBody);
-            }
-
-            return true;
-        }
-    }
-
-    return false;
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/helper.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/helper.spec.js
deleted file mode 100644
index cb8fc6f9933..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/helper.spec.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/helper.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {
-    hasUserDismissedGateInWindow,
-    hasUserDismissedGateMoreThanCount,
-    incrementUserDismissedGateCount,
-    isCountry,
-    isInvalidTag,
-} from './helper';
-
-jest.mock('bean', () => ({
-    record: jest.fn(),
-}));
-
-jest.mock('common/modules/user-prefs', () => ({
-    get: jest.fn(() => undefined),
-    set: jest.fn(() => undefined),
-    remove: jest.fn(),
-}));
-
-jest.mock('lib/config', () => ({
-    get: jest.fn(() => false),
-}));
-
-jest.mock('@guardian/libs', () => ({
-    storage: {
-        local: {
-            get: jest.fn(() => undefined),
-        },
-    }
-}));
-
-jest.mock('common/modules/experiments/ab', () => ({
-    isInABTestSynchronous: jest.fn(() => true),
-    getAsyncTestsToRun: jest.fn(() => Promise.resolve([])),
-    getSynchronousTestsToRun: jest.fn(() => [
-        {
-            id: 'SignInGateMainVariant', // Update for each new test
-            dataLinkNames: 'SignInGateMain', // Update for each new test
-            variantToRun: {
-                id: 'main-variant-2', // Update for each new test
-            },
-            ophanComponentId: 'main_test',
-        },
-    ]),
-}));
-
-jest.mock('common/modules/identity/api', () => ({
-    isUserLoggedIn: jest.fn(() => false),
-}));
-
-jest.mock('common/modules/ui/cmp-ui', () => ({
-    get: jest.fn(() => undefined),
-}));
-
-jest.mock('@guardian/consent-management-platform', () => ({
-    get: jest.fn(() => undefined),
-}));
-
-jest.mock('./component-event-tracking', () => ({
-    get: jest.fn(() => undefined),
-}));
-
-const fakeUserPrefs: any = require('common/modules/user-prefs');
-const fakeLocal: any = require('@guardian/libs').storage.local;
-const fakeConfig: any = require('lib/config');
-
-describe('Sign In Gate Helper functions', () => {
-    describe('hasUserDismissedGateInWindow', () => {
-        const moreThanADayAgo = new Date();
-        moreThanADayAgo.setHours(moreThanADayAgo.getHours() - 26);
-        const lessThanADayAgo = new Date();
-        lessThanADayAgo.setHours(lessThanADayAgo.getHours() - 14);
-
-        const test = {
-            window: 'day',
-            name: 'SignInGateMainVariant',
-            variant: 'main-variant-2',
-            componentName: 'sign-in-gate',
-        };
-
-        it('should return true if timestamp is less than specified window', () => {
-            fakeUserPrefs.get.mockReturnValueOnce({
-                'SignInGateMainVariant-main-variant-2': lessThanADayAgo.toISOString(),
-            });
-
-            expect(hasUserDismissedGateInWindow(test)).toBe(true); // todo
-            expect(fakeUserPrefs.remove).toHaveBeenCalledTimes(0);
-        });
-
-        it('should clear local storage prefs and return false if timestamp from prefs is more than specified window', () => {
-            fakeUserPrefs.get.mockReturnValueOnce({
-                'SignInGateMainVariant-main-variant-2': moreThanADayAgo.toISOString(),
-            });
-
-            expect(hasUserDismissedGateInWindow(test)).toBe(false);
-            expect(fakeUserPrefs.remove).toHaveBeenCalledTimes(1); // todo
-        });
-    });
-
-    describe('hasUserDismissedGateMoreThanCount', () => {
-        let userPrefs = {};
-
-        beforeEach(() => {
-            userPrefs = {};
-            fakeUserPrefs.get.mockImplementation(k => userPrefs[k]);
-            fakeUserPrefs.set.mockImplementation((k, v) => {
-                userPrefs[k] = v;
-            });
-        });
-
-        afterEach(() => {
-            fakeUserPrefs.get.mockRestore();
-            fakeUserPrefs.set.mockRestore();
-        });
-
-        it('should depend on the counter incremented by incrementUserDismissedGateCount', () => {
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-1',
-                    'test-1',
-                    'sign-in-gate',
-                    0
-                )
-            ).toBe(false);
-
-            incrementUserDismissedGateCount(
-                'variant-1',
-                'test-1',
-                'sign-in-gate'
-            );
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-1',
-                    'test-1',
-                    'sign-in-gate',
-                    0
-                )
-            ).toBe(true);
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-1',
-                    'test-1',
-                    'sign-in-gate',
-                    1
-                )
-            ).toBe(false);
-
-            incrementUserDismissedGateCount(
-                'variant-1',
-                'test-1',
-                'sign-in-gate'
-            );
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-1',
-                    'test-1',
-                    'sign-in-gate',
-                    1
-                )
-            ).toBe(true);
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-1',
-                    'test-1',
-                    'sign-in-gate',
-                    2
-                )
-            ).toBe(false);
-
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-2',
-                    'test-1',
-                    'sign-in-gate',
-                    0
-                )
-            ).toBe(false);
-        });
-
-        it('should not be affected by incrementing other variants or tests', () => {
-            incrementUserDismissedGateCount(
-                'variant-1',
-                'test-1',
-                'sign-in-gate'
-            );
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-2',
-                    'test-1',
-                    'sign-in-gate',
-                    0
-                )
-            ).toBe(false);
-            expect(
-                hasUserDismissedGateMoreThanCount(
-                    'variant-1',
-                    'test-2',
-                    'sign-in-gate',
-                    0
-                )
-            ).toBe(false);
-        });
-    });
-
-    describe("isCountry('countryCode')", () => {
-        test('geolocation is US', () => {
-            fakeLocal.get.mockReturnValueOnce('US');
-            expect(isCountry('US')).toBe(true);
-        });
-
-        test('geolocation is not US', () => {
-            fakeLocal.get.mockReturnValueOnce('GB');
-            expect(isCountry('US')).toBe(false);
-        });
-
-        test('geolocation is false if not set', () => {
-            expect(isCountry('US')).toBe(false);
-        });
-    });
-
-    describe("isInvalidTag('tag')", () => {
-        test("'info/newsletter-sign-up' article is invalid", () => {
-            fakeConfig.get.mockReturnValueOnce("info/newsletter-sign-up,us-news/us-news,society/homelessness,society/housing");
-            expect(isInvalidTag()).toBe(true);
-        });
-
-        test("non-Newsletters article is not invalid", () => {
-            fakeConfig.get.mockReturnValueOnce("us-news/us-news,society/homelessness,society/housing");
-            expect(isInvalidTag()).toBe(false);
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/index.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/index.js
deleted file mode 100644
index c52c5282874..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/index.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/index.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { getCookie } from 'lib/cookies';
-import { constructQuery } from 'lib/url';
-import type { Banner } from 'common/modules/ui/bannerPicker';
-import { signInGateMainVariant } from 'common/modules/experiments/tests/sign-in-gate-main-variant';
-import { signInGateMainControl } from 'common/modules/experiments/tests/sign-in-gate-main-control';
-import { submitViewEventTracking } from './component-event-tracking';
-import { getVariant, isInTest, getTestforMultiTest } from './helper';
-import { withComponentId, componentName } from './component';
-import { variants } from './variants';
-import type {
-    CurrentABTest,
-    ComponentEventParams,
-    SignInGateVariant,
-} from './types';
-
-// if using multiple tests, then add them all in this array. (all the variant names in each test in the array must be unique)
-const tests = [signInGateMainVariant, signInGateMainControl];
-
-const canShow: () => Promise<boolean> = () =>
-    new Promise(resolve => {
-        // check if user is in test
-        if (!tests.some(test => isInTest(test))) return resolve(false);
-
-        // get the test the user is in
-        const test = getTestforMultiTest(tests);
-
-        // get the variant
-        const variant = variants.find(v => v.name === getVariant(test));
-
-        if (!variant) return resolve(false);
-
-        // check if we can show the test for the variant the user is in
-        return resolve(variant.canShow(test.dataLinkNames));
-    });
-
-const show: () => Promise<boolean> = () =>
-    new Promise(resolve => {
-        // get the test the user is in
-        const test: ABTest = getTestforMultiTest(tests);
-
-        if (!test) return resolve(false);
-
-        // get the variant
-        const variant: SignInGateVariant | void = variants.find(
-            v => v.name === getVariant(test)
-        );
-
-        if (!variant) return resolve(false);
-
-        const abTest: CurrentABTest = {
-            name: test.dataLinkNames || test.id,
-            variant: variant.name,
-        };
-
-        // encode the current page as the return URL if the user goes onto the sign in page
-        const returnUrl = encodeURIComponent(
-            `${config.get('page.host')}/${config.get('page.pageId')}`
-        );
-
-        // get the view id to attach to component event params
-        let viewId = '';
-        if (
-            window.guardian &&
-            window.guardian.ophan &&
-            window.guardian.ophan.viewId
-        ) {
-            viewId = window.guardian.ophan.viewId;
-        }
-
-        // set the component event params to be included in the query
-        const queryParams: ComponentEventParams = {
-            componentType: 'signingate',
-            componentId: test.ophanComponentId,
-            abTestName: test.dataLinkNames || test.id,
-            abTestVariant: variant.name,
-            viewId,
-        };
-
-        // attach the browser id to component event params
-        const bwid = getCookie('bwid');
-        if (bwid) queryParams.browserId = bwid;
-
-        // attach the visit id to component event params
-        const vsid = getCookie('vsid');
-        if (vsid) queryParams.visitId = vsid;
-
-        // get the current guardian website url, used to why sign in link
-        const guUrl = config.get(`page.host`);
-
-        // generate the sign in url link using the return url and component event params
-        // also converts the params to a query string and uri encodes them so they can be passed through
-        // all the way to IDAPI
-        const signInUrl = `${config.get(
-            `page.idUrl`
-        )}/signin?returnUrl=${returnUrl}&componentEventParams=${encodeURIComponent(
-            constructQuery(queryParams)
-        )}`;
-
-        const ophanComponentId: string = test.ophanComponentId
-            ? test.ophanComponentId
-            : '';
-        const ophanComponent = withComponentId(ophanComponentId);
-
-        // in any variant
-        // fire view tracking event
-        submitViewEventTracking({
-            component: ophanComponent,
-            abTest,
-        });
-
-        // control what to show using variants
-        return resolve(
-            variant.show({
-                guUrl,
-                signInUrl,
-                abTest,
-                ophanComponentId,
-            })
-        );
-    });
-
-export const signInGate: Banner = {
-    id: componentName,
-    show,
-    canShow,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/sign-in-gate.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/sign-in-gate.spec.js
deleted file mode 100644
index ee4c31e6ea6..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/sign-in-gate.spec.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/sign-in-gate.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { signInGate } from './index';
-
-jest.mock('ophan/ng', () => ({
-    record: jest.fn(),
-}));
-
-jest.mock('common/modules/experiments/ab', () => ({
-    isInABTestSynchronous: jest.fn(() => true),
-    getAsyncTestsToRun: jest.fn(() => Promise.resolve([])),
-    getSynchronousTestsToRun: jest.fn(() => [
-        {
-            id: 'SignInGateMainVariant', // Update for each new test
-            dataLinkNames: 'SignInGateMain', // Update for each new test
-            variantToRun: {
-                id: 'main-variant-3', // Update for each new test
-            },
-            ophanComponentId: 'main_test',
-        },
-    ]),
-}));
-
-jest.mock('@guardian/libs', () => ({
-    storage: {
-        local: {
-            get: jest.fn(() => [{ count: 2, day: 1 }]),
-        },
-    }
-}));
-
-jest.mock('common/modules/identity/api', () => ({
-    isUserLoggedIn: jest.fn(() => false),
-}));
-
-jest.mock('lib/config', () => ({
-    get: jest.fn(() => false),
-}));
-
-jest.mock('common/modules/user-prefs', () => ({
-    get: jest.fn(() => undefined),
-}));
-
-jest.mock('common/modules/ui/cmp-ui', () => ({
-    get: jest.fn(() => undefined),
-}));
-
-jest.mock('@guardian/consent-management-platform', () => ({
-    get: jest.fn(() => undefined),
-}));
-
-jest.mock('lib/cookies', () => ({
-    getCookie: jest.fn(() => ''),
-}));
-
-const fakeIsInABTestSynchronous: any = require('common/modules/experiments/ab')
-    .isInABTestSynchronous;
-
-const fakeLocal: any = require('@guardian/libs').storage.local;
-
-const fakeIsUserLoggedIn: any = require('common/modules/identity/api')
-    .isUserLoggedIn;
-
-const fakeConfig: any = require('lib/config');
-
-const fakeUserPrefs: any = require('common/modules/user-prefs');
-
-describe('Sign in gate test', () => {
-    // making a backup of the navigator method
-    const { navigator } = window;
-
-    beforeEach(() => {
-        delete window.navigator;
-        window.navigator = {
-            userAgent:
-                'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36',
-        };
-    });
-
-    afterEach(() => {
-        window.navigator = navigator;
-    });
-
-    describe('canShow returns true', () => {
-        it('should return true using default mocks', () => {
-            // Add a fake default config.get call for the keywordIds
-            fakeConfig.get.mockReturnValueOnce("")
-            signInGate.canShow().then(show => {
-                expect(show).toBe(true);
-            })
-        });
-
-        it('should return true if page view is greater than or equal to 2', () => {
-            fakeLocal.get.mockReturnValueOnce([{ count: 10, day: 1 }]);
-            signInGate.canShow().then(show => {
-                expect(show).toBe(true);
-            });
-        });
-    });
-
-    describe('canShow returns false', () => {
-        it('should return false if not in correct test', () => {
-            fakeIsInABTestSynchronous.mockReturnValue(false);
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false if this is the first page view', () => {
-            fakeLocal.get.mockReturnValueOnce([{count: 0, day: 1}]);
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false of the dailyArticleCount does not exist', () => {
-            fakeLocal.get.mockReturnValueOnce(undefined);
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false if user has dismissed the gate', () => {
-            fakeUserPrefs.get.mockReturnValueOnce({
-                'SignInGateMain-main-variant-2': Date.now(),
-            });
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false if the user is logged in', () => {
-            fakeIsUserLoggedIn.mockReturnValueOnce(true);
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false if there is an invalid article type or section detected', () => {
-            fakeConfig.get.mockReturnValueOnce(true);
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false if its an ios 9 device', () => {
-            window.navigator.userAgent =
-                'Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/46.0.2490.73 Mobile/13C143 Safari/600.1.4 (000718)';
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-
-        it('should return false if its a newsletter landing page', () => {
-            fakeConfig.get.mockReturnValueOnce("info/newsletter-sign-up,us-news/us-news,society/homelessness,society/housing");
-            return signInGate.canShow().then(show => {
-                expect(show).toBe(false);
-            });
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/types.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/types.js
deleted file mode 100644
index c8e0ef344ba..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/types.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/types.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export type CurrentABTest = {
-    name: string,
-    variant: string,
-};
-
-export type ComponentEventParams = {
-    componentType: string,
-    componentId?: string,
-    abTestName: string,
-    abTestVariant: string,
-    viewId: string,
-    browserId?: string,
-    visitId?: string,
-};
-
-export type DismissalWindow = 'day' | 'dev';
-export type GateStatus = boolean | 'dismissed' | 'signed in';
-
-export type SignInGateVariant = {
-    show: ({
-        abTest: CurrentABTest,
-        guUrl: string,
-        signInUrl: string,
-        ophanComponentId: string,
-    }) => boolean,
-    canShow: (name?: string) => boolean,
-    name: string,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/design/example.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/design/example.js
deleted file mode 100644
index a043ac0d489..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/design/example.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/variants/design/example.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-import type { CurrentABTest } from '../../types';
-import { withComponentId, componentName } from '../../component';
-import {
-    addOpinionBgColour,
-    addClickHandler,
-    setUserDismissedGate,
-    showGate,
-    setGatePageTargeting,
-} from '../../helper';
-
-// add the html template as the return of the function below
-// signInUrl - parameter which holds the link to the sign in/register page with the tracking parameters added
-// guUrl - url of the STAGE frontend site, e.g. in DEV stage it would be https://m.thegulocal.com,
-//         and for PROD it would be https://theguardian.com
-const htmlTemplate: ({
-    signInUrl: string,
-    guUrl: string,
-}) => string = ({ signInUrl, guUrl }) => `
-<div class="signin-gate">
-    <div class="signin-gate__content">
-        <div class="signin-gate__header">
-            <h1 class="signin-gate__header--text">Register for free and continue reading</h1>
-        </div>
-        <div class="signin-gate__benefits syndication--bottom">
-            <p class="signin-gate__benefits--text">
-                The Guardian’s independent journalism is still free to read
-            </p>
-        </div>
-        <div class="signin-gate__paragraph syndication--bottom">
-            <p class="signin-gate__paragraph--text">
-                Registering lets us understand you better. This means that we can build better products and start to personalise the adverts you see so we can charge more from advertisers in the future.
-            </p>
-        </div>
-        <div class="signin-gate__buttons">
-            <a class="signin-gate__button signin-gate__button--primary js-signin-gate__register-button" href="${signInUrl}">
-                Register for free
-            </a>
-            <button class="signin-gate__dismiss js-signin-gate__dismiss" href="">Not Now</button>
-        </div>
-        <div class="signin-gate__padding-bottom signin-gate__buttons">
-            Already registered, contributed or subscribed?&nbsp;<a class="signin-gate__link js-signin-gate__sign-in signin-gate__link-no-ptm signin-gate__center-424" href="${signInUrl}">Sign in</a>
-        </div>
-        <div class="signin-gate__buttons">
-            <a class="signin-gate__link js-signin-gate__why" href="${guUrl}/membership/2019/dec/20/signing-in-to-the-guardian">Why register & how does it help?</a>
-        </div>
-        <div class="signin-gate__buttons">
-            <a class="signin-gate__link js-signin-gate__how" href="${guUrl}/info/2014/nov/03/why-your-data-matters-to-us-full-text">How will my information & data be used?</a>
-        </div>
-        <div class="signin-gate__buttons">
-            <a class="signin-gate__link js-signin-gate__help" href="${guUrl}/help/identity-faq">Get help with registering or signing in</a>
-        </div>
-    </div>
-</div>
-`;
-
-// method which runs if the canShow method from the test returns true, used to display the gate and logic associated with it
-// it returns a boolean, since the sign in gate is based on a `Banner` type who's show method returns a Promise<boolean>
-// in our case it returns true if the design ran successfully, and false if there were any problems encountered
-export const designShow: ({
-    abTest: CurrentABTest,
-    guUrl: string,
-    signInUrl: string,
-    ophanComponentId: string,
-}) => boolean = ({ abTest, guUrl, signInUrl, ophanComponentId }) =>
-    showGate({
-        template: htmlTemplate({
-            signInUrl,
-            guUrl,
-        }),
-        handler: ({ articleBody, shadowArticleBody }) => {
-            // check if comment, and add comment/opinion bg colour
-            addOpinionBgColour({
-                element: shadowArticleBody,
-                selector: '.signin-gate__first-paragraph-overlay',
-            });
-
-            const ophanComponent: OphanComponent = withComponentId(
-                ophanComponentId
-            );
-
-            // add click handler for the dismiss of the gate
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__dismiss',
-                abTest,
-                component: ophanComponent,
-                value: 'not-now',
-                callback: () => {
-                    // show the current body. Remove the shadow one
-                    articleBody.style.display = 'block';
-                    shadowArticleBody.remove();
-
-                    // The page does not reload when a user dismisses the gate,
-                    // so we must reset page targeting params dynamically via googletags
-                    setGatePageTargeting(true, false);
-
-                    // Tell other things the article has been redisplayed
-                    mediator.emit('page:article:redisplayed');
-
-                    // user pref dismissed gate
-                    setUserDismissedGate({
-                        componentName,
-                        name: abTest.name,
-                        variant: abTest.variant,
-                    });
-                },
-            });
-
-            // add click handler for sign in link click
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__register-button',
-                abTest,
-                component: ophanComponent,
-                value: 'register-link',
-            });
-
-            // add click handler for sign in link click
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__sign-in',
-                abTest,
-                component: ophanComponent,
-                value: 'sign-in-link',
-            });
-
-            // add click handler for the why sign in link
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__why',
-                abTest,
-                component: ophanComponent,
-                value: 'why-link',
-            });
-
-            // add click handler for the how info used link
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__how',
-                abTest,
-                component: ophanComponent,
-                value: 'how-link',
-            });
-
-            // add click handler for the help link
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__help',
-                abTest,
-                component: ophanComponent,
-                value: 'help-link',
-            });
-        },
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/design/main-variant.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/design/main-variant.js
deleted file mode 100644
index fb088ceddcc..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/design/main-variant.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/variants/design/main-variant.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-import type { CurrentABTest } from '../../types';
-import { componentName, withComponentId } from '../../component';
-import {
-    addOpinionBgColour,
-    addClickHandler,
-    setUserDismissedGate,
-    showGate,
-    showPrivacySettingsCMPModule,
-    addOverlayVariantCSS,
-    setGatePageTargeting,
-    addCSSOnOpinion,
-    incrementUserDismissedGateCount,
-} from '../../helper';
-
-// add the html template as the return of the function below
-// signInUrl - parameter which holds the link to the sign in/register page with the tracking parameters added
-// guUrl - url of the STAGE frontend site, e.g. in DEV stage it would be https://m.thegulocal.com,
-//         and for PROD it would be https://theguardian.com
-const htmlTemplate: ({
-    signInUrl: string,
-    guUrl: string,
-}) => string = ({ signInUrl, guUrl }) => `
-<div class="signin-gate">
-    <div class="signin-gate__content--var">
-        <div class="signin-gate__header--var">
-            <h1 class="signin-gate__header--text--var">Register for free and <br>continue reading</h1>
-        </div>
-        <div class="signin-gate__benefits--var signin-gate__margin-top--var">
-            <p class="signin-gate__benefits--text--var">
-                It’s important to say this is not a step towards a paywall
-            </p>
-        </div>
-        <div class="signin-gate__paragraph--var">
-            <p class="signin-gate__paragraph--text--var">
-               Registering is a free and simple way to help us sustain our independent Guardian journalism.
-            </p>
-            <p class="signin-gate__paragraph--text--var">
-               When you register with us we are able to improve our news experience for you and for others. You will always be able to control your own <a id="js-signin-gate__privacy" class="signin-gate__link--var">privacy settings</a>. Thank you.
-            </p>
-        </div>
-        <div class="signin-gate__buttons">
-            <a class="signin-gate__button signin-gate__button--primary--var js-signin-gate__register-button" href="${signInUrl}">
-                Register for free
-            </a>
-            <button class="signin-gate__dismiss--var js-signin-gate__dismiss" href="">I’ll do it later</button>
-        </div>
-        <div class="signin-gate__benefits--var signin-gate__margin-top--var">
-         <p class="signin-gate__benefits--text--var">
-            Have a subscription? Made a contribution? Already registered?
-        </p>
-            <a class="signin-gate__link--var signin-gate__signin--var js-signin-gate__sign-in signin-gate__link-no-ptm signin-gate__center-424" href="${signInUrl}">Sign in</a>
-        </div>
-        <div class="signin-gate__faqlinks--var signin-gate__margin-top--var">
-            <div class="signin-gate__buttons">
-                <a class="signin-gate__link--var js-signin-gate__why" href="${guUrl}/membership/2019/dec/20/signing-in-to-the-guardian">Why register & how does it help?</a>
-            </div>
-            <div class="signin-gate__buttons">
-                <a class="signin-gate__link--var js-signin-gate__how" href="${guUrl}/info/2014/nov/03/why-your-data-matters-to-us-full-text">How will my information & data be used?</a>
-            </div>
-            <div class="signin-gate__buttons">
-                <a class="signin-gate__link--var js-signin-gate__help" href="${guUrl}/help/identity-faq">Get help with registering or signing in</a>
-            </div>
-        </div>
-    </div>
-</div>
-`;
-
-// method which runs if the canShow method from the test returns true, used to display the gate and logic associated with it
-// it returns a boolean, since the sign in gate is based on a `Banner` type who's show method returns a Promise<boolean>
-// in our case it returns true if the design ran successfully, and false if there were any problems encountered
-export const designShow: ({
-    abTest: CurrentABTest,
-    guUrl: string,
-    signInUrl: string,
-    ophanComponentId: string,
-}) => boolean = ({ abTest, guUrl, signInUrl, ophanComponentId }) =>
-    showGate({
-        template: htmlTemplate({
-            signInUrl,
-            guUrl,
-        }),
-        handler: ({ articleBody, shadowArticleBody }) => {
-            addCSSOnOpinion({
-                element: shadowArticleBody,
-                selector: '.signin-gate__faqlinks--var',
-                css: 'signin-gate__faqlinks--var--comment',
-            });
-
-            addOverlayVariantCSS({
-                element: shadowArticleBody,
-                selector: '.signin-gate__first-paragraph-overlay',
-            });
-
-            // check if comment, and add comment/opinion bg colour
-            addOpinionBgColour({
-                element: shadowArticleBody,
-                selector: '.signin-gate__first-paragraph-overlay',
-            });
-
-            const ophanComponent: OphanComponent = withComponentId(
-                ophanComponentId
-            );
-
-            // add click handler for the dismiss of the gate
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__dismiss',
-                abTest,
-                component: ophanComponent,
-                value: 'not-now',
-                callback: () => {
-                    // show the current body. Remove the shadow one
-                    articleBody.style.display = 'block';
-                    shadowArticleBody.remove();
-
-                    // The page does not reload when a user dismisses the gate,
-                    // so we must reset page targeting params dynamically via googletags
-                    setGatePageTargeting(true, false);
-
-                    // Tell other things the article has been redisplayed
-                    mediator.emit('page:article:redisplayed');
-
-                    // user pref dismissed gate
-                    setUserDismissedGate({
-                        componentName,
-                        name: abTest.name,
-                        variant: abTest.variant,
-                    });
-
-                    // increment gate dismissed count
-                    incrementUserDismissedGateCount(
-                        abTest.variant,
-                        abTest.name,
-                        componentName
-                    );
-                },
-            });
-
-            // add click handler for sign in link click
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__register-button',
-                abTest,
-                component: ophanComponent,
-                value: 'register-link',
-            });
-
-            // add click handler for sign in link click
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__sign-in',
-                abTest,
-                component: ophanComponent,
-                value: 'sign-in-link',
-            });
-
-            // add click handler for the why sign in link
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__why',
-                abTest,
-                component: ophanComponent,
-                value: 'why-link',
-            });
-
-            // add click handler for the how info used link
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__how',
-                abTest,
-                component: ophanComponent,
-                value: 'how-link',
-            });
-
-            // add click handler for the help link
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '.js-signin-gate__help',
-                abTest,
-                component: ophanComponent,
-                value: 'help-link',
-            });
-
-            // add click handler for the privacy settings link
-            // to show the consent management platform module
-            addClickHandler({
-                element: shadowArticleBody,
-                selector: '#js-signin-gate__privacy',
-                abTest,
-                component: ophanComponent,
-                value: 'privacy-settings-link',
-                callback: showPrivacySettingsCMPModule,
-            });
-        },
-    });
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/example.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/example.js
deleted file mode 100644
index 63c74b288f6..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/example.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/variants/example.js
- * to .ts, then delete it.
- */
-
-// @flow
-import type { CurrentABTest, SignInGateVariant } from '../types';
-import { componentName } from '../component';
-import {
-    hasUserDismissedGate,
-    isNPageOrHigherPageView,
-    isLoggedIn,
-    isInvalidArticleType,
-    isInvalidSection,
-    isIOS9,
-    setGatePageTargeting,
-} from '../helper';
-
-// pull in the show method from the design folder, which has the html template and and click handlers etc.
-import { designShow } from './design/example';
-
-// define the variant name here
-const variant = 'example';
-
-// method which returns a boolean determining if this variant can be shown on the current pageview
-const canShow: (name?: string) => boolean = (name = '') => {
-    const isGateDismissed = hasUserDismissedGate({
-        name,
-        variant,
-        componentName,
-    });
-    const canShowCheck =
-        !isGateDismissed &&
-        isNPageOrHigherPageView(3) &&
-        !isLoggedIn() &&
-        !isInvalidArticleType() &&
-        !isInvalidSection() &&
-        !isIOS9();
-
-    setGatePageTargeting(isGateDismissed, canShowCheck);
-    return canShowCheck;
-};
-
-// method which runs if the canShow method returns true, used to display the gate and logic associated with it
-// it returns a boolean, since the sign in gate is based on a `Banner` type who's show method returns a Promise<boolean>
-// in our case it returns true if the design ran successfully, and false if there were any problems encountered
-const show: ({
-    abTest: CurrentABTest,
-    guUrl: string,
-    signInUrl: string,
-    ophanComponentId: string,
-}) => boolean = ({ abTest, guUrl, signInUrl, ophanComponentId }) =>
-    designShow({ abTest, guUrl, signInUrl, ophanComponentId });
-
-// export the variant as a SignInGateVariant type
-export const signInGateVariant: SignInGateVariant = {
-    name: variant,
-    canShow,
-    show,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/index.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/index.js
deleted file mode 100644
index d9594908b19..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/variants/index.js
- * to .ts, then delete it.
- */
-
-// @flow
-import type { SignInGateVariant } from '../types';
-// import the variants from their respective files e.g.
-// import { signInGateVariant as example } from './example';
-import { signInGateVariant as mainVariant } from './main/variant';
-import { signInGateVariant as mainControl } from './main/control';
-
-// to add a variant, first import the variant in the SignInGateVariant type, and then add to this exported array
-export const variants: Array<SignInGateVariant> = [
-    // example,
-    mainVariant,
-    mainControl,
-];
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/main/control.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/main/control.js
deleted file mode 100644
index bd2e5b3777e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/main/control.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/variants/main/control.js
- * to .ts, then delete it.
- */
-
-// @flow
-import type { SignInGateVariant } from '../../types';
-import { componentName } from '../../component';
-import {
-    hasUserDismissedGate,
-    isNPageOrHigherPageView,
-    isLoggedIn,
-    isInvalidArticleType,
-    isInvalidSection,
-    isIOS9,
-    setGatePageTargeting,
-    isInvalidTag,
-} from '../../helper';
-
-// define the variant name here
-const variant = 'main-control-3';
-
-// method which returns a boolean determining if this variant can be shown on the current pageview
-const canShow: (name?: string) => boolean = (name = '') => {
-    const isGateDismissed = hasUserDismissedGate({
-        name,
-        variant,
-        componentName,
-    });
-    const canShowCheck =
-        !isGateDismissed &&
-        isNPageOrHigherPageView(3) &&
-        !isLoggedIn() &&
-        !isInvalidArticleType() &&
-        !isInvalidSection() &&
-        !isInvalidTag() &&
-        !isIOS9();
-
-    setGatePageTargeting(isGateDismissed, canShowCheck);
-    return canShowCheck;
-};
-
-// method which runs if the canShow method returns true, used to display the gate and logic associated with it
-// it returns a boolean, since the sign in gate is based on a `Banner` type who's show method returns a Promise<boolean>
-// in this case as the gate doesn't show anything, we just return true
-const show: () => boolean = () => true;
-
-// export the variant as a SignInGateVariant type
-export const signInGateVariant: SignInGateVariant = {
-    name: variant,
-    canShow,
-    show,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/main/variant.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/main/variant.js
deleted file mode 100644
index 85c0521599d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/sign-in-gate/variants/main/variant.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/sign-in-gate/variants/main/variant.js
- * to .ts, then delete it.
- */
-
-// @flow
-import type { CurrentABTest, SignInGateVariant } from '../../types';
-import { componentName } from '../../component';
-import {
-    isNPageOrHigherPageView,
-    isLoggedIn,
-    isInvalidArticleType,
-    isInvalidSection,
-    isInvalidTag,
-    isIOS9,
-    setGatePageTargeting,
-    hasUserDismissedGateMoreThanCount,
-} from '../../helper';
-
-// pull in the show method from the design folder, which has the html template and and click handlers etc.
-import { designShow } from '../design/main-variant';
-
-// define the variant name here
-const variant = 'main-variant-3';
-
-// method which returns a boolean determining if this variant can be shown on the current pageview
-const canShow: (name?: string) => boolean = (name = '') => {
-    const isGateDismissed = hasUserDismissedGateMoreThanCount(
-        variant,
-        name,
-        componentName,
-        5
-    );
-    const canShowCheck =
-        !isGateDismissed &&
-        isNPageOrHigherPageView(3) &&
-        !isLoggedIn() &&
-        !isInvalidArticleType() &&
-        !isInvalidSection() &&
-        !isInvalidTag() &&
-        !isIOS9();
-
-    setGatePageTargeting(isGateDismissed, canShowCheck);
-    return canShowCheck;
-};
-
-// method which runs if the canShow method returns true, used to display the gate and logic associated with it
-// it returns a boolean, since the sign in gate is based on a `Banner` type who's show method returns a Promise<boolean>
-// in our case it returns true if the design ran successfully, and false if there were any problems encountered
-const show: ({
-    abTest: CurrentABTest,
-    guUrl: string,
-    signInUrl: string,
-    ophanComponentId: string,
-}) => boolean = ({ abTest, guUrl, signInUrl, ophanComponentId }) =>
-    designShow({ abTest, guUrl, signInUrl, ophanComponentId });
-
-// export the variant as a SignInGateVariant type
-export const signInGateVariant: SignInGateVariant = {
-    name: variant,
-    canShow,
-    show,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountBenefits.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountBenefits.js
deleted file mode 100644
index f2c325cd61b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountBenefits.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/account-creation/AccountBenefits.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import config from 'lib/config';
-
-type BenefitCta = {
-    name: string,
-    link: string,
-};
-
-type Benefit = {
-    title: string,
-    blurb: string,
-};
-
-type ActionableBenefit = Benefit & {
-    cta: BenefitCta[],
-};
-
-const benefits: Benefit[] = [
-    {
-        title: `Get closer to our journalism`,
-        blurb: `Choose from over 40 exclusive newsletters and updates on the variety of topics that matter to you.`,
-    },
-    {
-        title: `Join the conversation`,
-        blurb: `Get involved – post or recommend comments below an article.`,
-    },
-    {
-        title: `Take your career to the next level `,
-        blurb: `Browse a huge variety of jobs, create your jobseeker profile and receive job alerts for vacancies you want to hear about.`,
-    },
-    {
-        title: `Enjoy our free iOS and Android apps`,
-        blurb: `Save articles for later, tailor your news and get notified about topics that matter to you.`,
-    },
-];
-
-const actionableBenefits: ActionableBenefit[] = [
-    {
-        title: `Get closer to our journalism`,
-        blurb: `Browse over 40 curated newsletters on a variety of topics - from daily news headlines to weekly culture highlights, and diverse dedicated topics like science, documentary films and fashion. You can also sign up to receive updates about Guardian events, holidays and offers.`,
-        cta: [
-            {
-                name: `Find your favourite newsletter`,
-                link: `${config.get('page.host')}/email-newsletters`,
-            },
-        ],
-    },
-    {
-        title: `Join the conversation`,
-        blurb: `We believe in having open debate and in giving readers a voice in our journalism. With your Guardian profile, you can recommend comments added by other Guardian readers at the bottom of the articles or contribute your thoughts for other readers to see. Complete your public profile and join the debate.`,
-        cta: [
-            {
-                name: `Complete your profile`,
-                link: `${config.get('page.idUrl')}/public/edit`,
-            },
-        ],
-    },
-    {
-        title: `Download our award-winning app`,
-        blurb: `Available on iOS and Android. Sign in with your Guardian account to use exclusive features such as ‘save for later’ or mobile alerts when your favourite writers publish an article, or your football team scores.`,
-        cta: [
-            {
-                name: `Explore our apps`,
-                link: `${config.get(
-                    'page.host'
-                )}/technology/ng-interactive/2018/may/15/the-guardian-app`,
-            },
-        ],
-    },
-    {
-        title: `Take your career to the next level`,
-        blurb: `Your account allows you to set up a Guardian Jobs profile, browse a huge variety of jobs and be the first to hear about vacancies in your preferred industry.`,
-        cta: [
-            {
-                name: `Browse jobs`,
-                link: `https://jobs.theguardian.com/`,
-            },
-        ],
-    },
-];
-
-export const AccountActionableBenefits = () => (
-    <ul className="identity-upsell-account-creation-bullets identity-upsell-account-creation-bullets--super">
-        {actionableBenefits.map(({ title, blurb, cta }) => (
-            <li>
-                <h4 className="identity-upsell-account-creation-bullets__title">
-                    {title}
-                </h4>
-                <p>{blurb}</p>
-                {cta.map(({ name, link }) => (
-                    <a
-                        data-link-name={`benefit : ${title}`}
-                        href={link}
-                        className="manage-account__button manage-account__button--light">
-                        {name}
-                    </a>
-                ))}
-            </li>
-        ))}
-    </ul>
-);
-
-export const AccountBenefits = () => (
-    <ul className="identity-upsell-account-creation-bullets">
-        {benefits.map(benefit => (
-            <li>
-                <h4 className="identity-upsell-account-creation-bullets__title">
-                    {benefit.title}
-                </h4>
-                <p>{benefit.blurb}</p>
-            </li>
-        ))}
-    </ul>
-);
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationBlock.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationBlock.js
deleted file mode 100644
index cf72a1c6b2e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationBlock.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/account-creation/AccountCreationBlock.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { AccountCreationForm } from './AccountCreationForm';
-import { AccountActionableBenefits, AccountBenefits } from './AccountBenefits';
-import { Block } from '../block/Block';
-
-type AccountCreationBlockProps = {
-    csrfToken: string,
-    accountToken: string,
-    email: string,
-};
-
-class AccountCreationBlock extends Component<
-    AccountCreationBlockProps,
-    {
-        hasCreatedAccount?: boolean,
-    }
-> {
-    onAccountCreated = () => {
-        this.setState({
-            hasCreatedAccount: true,
-        });
-    };
-
-    render() {
-        return !this.state.hasCreatedAccount ? (
-            <Block
-                sideBySide
-                title="Want more from The Guardian?"
-                subtitle="Create your account now to manage your preferences and explore your free benefits.">
-                <AccountCreationForm
-                    {...this.props}
-                    onAccountCreated={this.onAccountCreated}
-                />
-                <div>
-                    <AccountBenefits />
-                </div>
-            </Block>
-        ) : (
-            <Block title="Start exploring your benefits">
-                <AccountActionableBenefits />
-            </Block>
-        );
-    }
-}
-
-export { AccountCreationBlock };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationCompleteConsentsFlow.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationCompleteConsentsFlow.js
deleted file mode 100644
index aa0665853cf..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationCompleteConsentsFlow.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/account-creation/AccountCreationCompleteConsentsFlow.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { AccountCreationFeatures } from './AccountCreationFeatures';
-import { AccountCreationForm } from './AccountCreationForm';
-import { AccountBenefits } from './AccountBenefits';
-
-type AccountCreationCompleteConsentsFlowProps = {
-    csrfToken: string,
-    returnUrl: string,
-    accountToken: string,
-    email: string,
-};
-
-class AccountCreationCompleteConsentsFlow extends Component<
-    AccountCreationCompleteConsentsFlowProps,
-    {
-        hasCreatedAccount?: boolean,
-    }
-> {
-    onAccountCreated = () => {
-        this.setState({
-            hasCreatedAccount: true,
-        });
-    };
-
-    render() {
-        return !this.state.hasCreatedAccount ? (
-            <div>
-                <hr className="manage-account-small-divider" />
-                <div className="form">
-                    <h1 className="identity-upsell-title">
-                        <h1 className="identity-upsell-title__title">
-                            Want more from The Guardian?
-                        </h1>
-                        <p className="identity-upsell-title__subtitle">
-                            Create your account now to manage your preferences
-                            and explore your free benefits.
-                        </p>
-                    </h1>
-                    <div>
-                        <AccountCreationForm
-                            {...this.props}
-                            onAccountCreated={this.onAccountCreated}
-                        />
-                    </div>
-                    <aside className="identity-upsell-account-creation-block">
-                        <hr className="manage-account-small-divider" />
-                        <AccountBenefits />
-                    </aside>
-                </div>
-            </div>
-        ) : (
-            <div>
-                <hr className="manage-account-small-divider" />
-                <AccountCreationFeatures returnUrl={this.props.returnUrl} />
-            </div>
-        );
-    }
-}
-
-export { AccountCreationCompleteConsentsFlow };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationFeatures.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationFeatures.js
deleted file mode 100644
index 0096a029d6b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationFeatures.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/account-creation/AccountCreationFeatures.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { AccountActionableBenefits } from './AccountBenefits';
-
-export class AccountCreationFeatures extends Component {
-    render() {
-        return (
-            <div>
-                <header className="identity-upsell-title">
-                    <h1 className="identity-upsell-title__title">
-                        Your account has been created.
-                    </h1>
-                    <p className="identity-upsell-title__subtitle">
-                        Start exploring your benefits:
-                    </p>
-                </header>
-                <div className="identity-forms-message__body">
-                    <AccountActionableBenefits />
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationForm.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationForm.js
deleted file mode 100644
index b3d29377d7c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/account-creation/AccountCreationForm.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/account-creation/AccountCreationForm.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import reqwest from 'reqwest';
-import ophan from 'ophan/ng';
-import reportError from 'lib/report-error';
-import { ErrorBar, genericErrorStr } from '../error-bar/ErrorBar';
-
-type AccountCreationFormProps = {
-    csrfToken: string,
-    accountToken: string,
-    email: string,
-    onAccountCreated: () => {},
-};
-
-class AccountCreationForm extends Component<
-    AccountCreationFormProps,
-    {
-        password?: string,
-        isLoading?: boolean,
-        errors: string[],
-    }
-> {
-    constructor(props: AccountCreationFormProps) {
-        super(props);
-        this.setState({
-            errors: [],
-        });
-    }
-
-    onSubmit = (ev: Event) => {
-        ev.preventDefault();
-        this.setState({
-            isLoading: true,
-            errors: [],
-        });
-
-        reqwest({
-            url: '/password/guest',
-            method: 'post',
-            data: {
-                csrfToken: this.props.csrfToken,
-                token: this.props.accountToken,
-                password: this.state.password,
-            },
-            success: () => {
-                ophan.record({
-                    component: 'set-password',
-                    value: 'set-password',
-                });
-                this.props.onAccountCreated();
-            },
-            error: response => {
-                reportError(
-                    Error(response),
-                    {
-                        feature: 'identity-create-account-upsell',
-                    },
-                    false
-                );
-                try {
-                    const apiError = JSON.parse(response.responseText)[0];
-                    this.setState({
-                        errors: [apiError.description],
-                    });
-                } catch (exception) {
-                    this.setState({ errors: [genericErrorStr] });
-                }
-            },
-            complete: () => {
-                this.setState({ isLoading: false });
-            },
-        });
-    };
-
-    handlePasswordChange = (ev: Event) => {
-        if (!(ev.target instanceof HTMLInputElement)) {
-            return;
-        }
-        this.setState({ password: ev.target.value });
-    };
-
-    render() {
-        const { errors, isLoading } = this.state;
-        const { email } = this.props;
-        return (
-            <form onSubmit={this.onSubmit}>
-                <ul className="identity-forms-fields">
-                    <ErrorBar tagName="li" errors={errors} />
-                    {email && (
-                        <li id="email_field" aria-hidden>
-                            <label
-                                className="identity-forms-input-wrap"
-                                htmlFor="email">
-                                <div className="identity-forms-label">
-                                    Email
-                                </div>
-                                <input
-                                    className="identity-forms-input"
-                                    type="email"
-                                    id="email"
-                                    value={email}
-                                    autoComplete="off"
-                                    autoCapitalize="off"
-                                    autoCorrect="off"
-                                    spellCheck="false"
-                                    aria-required="true"
-                                    required
-                                    disabled
-                                />
-                            </label>
-                        </li>
-                    )}
-                    <li id="password_field">
-                        <label
-                            className="identity-forms-input-wrap"
-                            htmlFor="password">
-                            <div className="identity-forms-label">Password</div>
-                            <input
-                                className="identity-forms-input"
-                                type="password"
-                                id="password"
-                                name="password"
-                                value={this.state.password}
-                                autoComplete="off"
-                                onChange={this.handlePasswordChange}
-                                autoCapitalize="off"
-                                autoCorrect="off"
-                                spellCheck="false"
-                                aria-required="true"
-                                required
-                            />
-                        </label>
-                    </li>
-                    <li>
-                        {isLoading ? (
-                            <button
-                                disabled
-                                className="manage-account__button manage-account__button--light manage-account__button--center">
-                                Hang on...
-                            </button>
-                        ) : (
-                            <button
-                                type="submit"
-                                className="manage-account__button manage-account__button--icon manage-account__button--main">
-                                Create an account
-                            </button>
-                        )}
-                    </li>
-                </ul>
-            </form>
-        );
-    }
-}
-
-export type { AccountCreationFormProps };
-export { AccountCreationForm };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/block/Block.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/block/Block.js
deleted file mode 100644
index f37c19e984e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/block/Block.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/block/Block.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-
-type BlockProps = {
-    title: string,
-    subtitle: ?string,
-    subtext: ?string,
-    sideBySide: ?boolean,
-    sideBySideBackwards: ?boolean,
-    halfWidth: ?boolean,
-    children: any,
-};
-
-export class Block extends Component<BlockProps> {
-    render() {
-        const {
-            title,
-            subtitle,
-            subtext,
-            children,
-            sideBySide,
-            sideBySideBackwards,
-            halfWidth,
-        } = this.props;
-        return (
-            <section
-                className={[
-                    'identity-upsell-block',
-                    sideBySide || sideBySideBackwards
-                        ? 'identity-upsell-block--side-by-side'
-                        : '',
-                    sideBySideBackwards
-                        ? 'identity-upsell-block--side-by-side identity-upsell-block--side-by-side--backwards'
-                        : '',
-                ].join(' ')}>
-                <div
-                    className={
-                        halfWidth ? 'identity-upsell-block--half-width' : ''
-                    }>
-                    <div className="identity-upsell-title">
-                        <h2 className="identity-upsell-title__title">
-                            {title}
-                        </h2>
-                        {subtitle && (
-                            <h3 className="identity-upsell-title__subtitle">
-                                {subtitle}
-                            </h3>
-                        )}
-                        {subtext && (
-                            <p className="identity-upsell-title__subtext">
-                                {subtext}
-                            </p>
-                        )}
-                    </div>
-                    <div className="identity-upsell-block__container">
-                        {children}
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/block/LegalTextBlock.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/block/LegalTextBlock.js
deleted file mode 100644
index b7756bb75be..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/block/LegalTextBlock.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/block/LegalTextBlock.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-
-const LegalTextBlock = ({ children }: { children: any }) => (
-    <div className="identity-upsell-legal-text-block">{children}</div>
-);
-
-export { LegalTextBlock };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/FollowButtonWrap.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/FollowButtonWrap.js
deleted file mode 100644
index 7ab3ba116aa..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/FollowButtonWrap.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/button/FollowButtonWrap.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import envelopeRemove from 'svgs/icon/envelope-remove.svg';
-import envelopeAdd from 'svgs/icon/envelope-add.svg';
-import tick from 'svgs/icon/tick.svg';
-
-const getButtonClassNames = (...modifiers: string[]) => [
-    'manage-account__button',
-    ...modifiers.map(m => `manage-account__button--${m}`),
-];
-
-type FollowButtonWrapProps = {
-    following: boolean,
-    onFollow: () => Promise<void>,
-    onUnfollow: () => Promise<void>,
-    trackingName: ?string,
-};
-
-type FollowButtonWrapState = {
-    mousedOutOnce: boolean,
-};
-
-class FollowButtonWrap extends Component<
-    FollowButtonWrapProps,
-    FollowButtonWrapState
-> {
-    constructor(props: FollowButtonWrapProps) {
-        super(props);
-        this.setState({
-            mousedOutOnce: true,
-        });
-    }
-
-    onMouseOut = () => {
-        this.setState({
-            mousedOutOnce: true,
-        });
-    };
-
-    updateFollowing = (to: boolean) => {
-        if (to) {
-            this.props.onFollow();
-            this.setState({
-                mousedOutOnce: false,
-            });
-        } else {
-            this.props.onUnfollow();
-        }
-    };
-
-    render() {
-        const { following, trackingName } = this.props;
-        const { mousedOutOnce } = this.state;
-
-        const followingFeedbackButton = (...classNames: string[]) => (
-            <div
-                role="alert"
-                className={[
-                    ...getButtonClassNames(
-                        'green-secondary',
-                        'center',
-                        'icon-left'
-                    ),
-                    ...classNames,
-                ].join(' ')}>
-                <span
-                    className="manage-account__button-react-icon"
-                    dangerouslySetInnerHTML={{ __html: tick.markup }}
-                />
-                Signed up
-            </div>
-        );
-
-        const unfollowButton = (...classNames: string[]) => (
-            <button
-                data-link-name={
-                    trackingName
-                        ? `upsell-consent : ${trackingName} : untick`
-                        : false
-                }
-                type="button"
-                className={[
-                    ...getButtonClassNames('danger', 'center', 'icon-left'),
-                    ...classNames,
-                ].join(' ')}
-                onClick={() => {
-                    this.updateFollowing(false);
-                }}>
-                <span
-                    className="manage-account__button-react-icon"
-                    dangerouslySetInnerHTML={{
-                        __html: envelopeRemove.markup,
-                    }}
-                />
-                Unsubscribe
-            </button>
-        );
-
-        const followButton = () => (
-            <button
-                data-link-name={
-                    trackingName
-                        ? `upsell-consent : ${trackingName} : tick`
-                        : false
-                }
-                type="button"
-                className={getButtonClassNames('green', 'icon-left').join(' ')}
-                onClick={() => {
-                    this.updateFollowing(true);
-                }}>
-                <span
-                    className="manage-account__button-react-icon"
-                    dangerouslySetInnerHTML={{ __html: envelopeAdd.markup }}
-                />
-                Sign me up
-            </button>
-        );
-
-        return following ? (
-            <div
-                aria-live="polite"
-                className={[
-                    'identity-upsell-follow-button-wrap',
-                    mousedOutOnce
-                        ? ''
-                        : 'identity-upsell-follow-button-wrap--blocked',
-                ].join(' ')}
-                onMouseOut={() => {
-                    this.onMouseOut();
-                }}
-                onBlur={() => {
-                    this.onMouseOut();
-                }}>
-                {followingFeedbackButton(
-                    'identity-upsell-follow-button-wrap__button'
-                )}
-                {unfollowButton(
-                    'identity-upsell-follow-button-wrap__button',
-                    'identity-upsell-follow-button-wrap__button--longer',
-                    'identity-upsell-follow-button-wrap__button--hoverable'
-                )}
-            </div>
-        ) : (
-            followButton()
-        );
-    }
-}
-
-export { FollowButtonWrap };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/FollowCardExpanderButton.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/FollowCardExpanderButton.js
deleted file mode 100644
index 05b6312330b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/FollowCardExpanderButton.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/button/FollowCardExpanderButton.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import arrowDown from 'svgs/icon/arrow-down.svg';
-import arrowUp from 'svgs/icon/arrow-up.svg';
-
-type ExpanderButtonText = {
-    more: string,
-    less: string,
-};
-
-type ExpanderButtonProps = {
-    isExpanded: boolean,
-    onToggle: (state: boolean) => void,
-    linkName: ?string,
-    text: ?ExpanderButtonText,
-};
-
-const defaultExpanderButtonText = {
-    more: 'More',
-    less: 'Less',
-};
-
-const FollowCardExpanderButton = ({
-    isExpanded,
-    onToggle,
-    linkName,
-    text,
-}: ExpanderButtonProps) =>
-    isExpanded ? (
-        <button
-            data-link-name={linkName ? `${linkName} : shrink` : null}
-            className="manage-account__button manage-account__button--secondary manage-account__button--icon"
-            onClick={() => onToggle(false)}>
-            {(text || defaultExpanderButtonText).less}
-            <span
-                className="manage-account__button-react-icon"
-                dangerouslySetInnerHTML={{ __html: arrowUp.markup }}
-            />
-        </button>
-    ) : (
-        <button
-            data-link-name={linkName ? `${linkName} : expand` : null}
-            className="manage-account__button manage-account__button--secondary manage-account__button--icon"
-            onClick={() => onToggle(true)}>
-            {(text || defaultExpanderButtonText).more}
-            <span
-                className="manage-account__button-react-icon"
-                dangerouslySetInnerHTML={{ __html: arrowDown.markup }}
-            />
-        </button>
-    );
-export { FollowCardExpanderButton };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/OptoutsExpanderButton.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/OptoutsExpanderButton.js
deleted file mode 100644
index 640da0354b0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/button/OptoutsExpanderButton.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/button/OptoutsExpanderButton.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import plus from 'svgs/icon/plus.svg';
-import minus from 'svgs/icon/minus.svg';
-
-type OptoutsExpanderButtonProps = {
-    isExpanded: boolean,
-    onToggle: (state: boolean) => void,
-    linkName: ?string,
-    text: ?string,
-};
-
-const OptoutsExpanderButton = ({
-    isExpanded,
-    onToggle,
-    linkName,
-    text,
-}: OptoutsExpanderButtonProps) =>
-    isExpanded ? (
-        <button
-            data-link-name={linkName ? `${linkName} : shrink` : null}
-            className="manage-account__button manage-account__button--secondary manage-account__button--icon manage-account__button--long manage-account__button--long-expanded"
-            onClick={() => onToggle(false)}>
-            {text}
-            <span
-                className="manage-account__button-react-icon"
-                dangerouslySetInnerHTML={{ __html: minus.markup }}
-            />
-        </button>
-    ) : (
-        <button
-            data-link-name={linkName ? `${linkName} : expand` : null}
-            className="manage-account__button manage-account__button--secondary manage-account__button--icon manage-account__button--long"
-            onClick={() => onToggle(true)}>
-            {text}
-            <span
-                className="manage-account__button-react-icon"
-                dangerouslySetInnerHTML={{ __html: plus.markup }}
-            />
-        </button>
-    );
-export { OptoutsExpanderButton };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/checkbox/Checkbox.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/checkbox/Checkbox.js
deleted file mode 100644
index b0bc918af11..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/checkbox/Checkbox.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/checkbox/Checkbox.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-
-type CheckboxHtmlProps = {
-    checked: ?boolean,
-    onChange: (ev: Event) => void,
-};
-
-type CheckboxProps = {
-    title: string,
-    uniqueId: string,
-    checkboxHtmlProps: CheckboxHtmlProps,
-};
-
-const Checkbox = ({ title, uniqueId, checkboxHtmlProps }: CheckboxProps) => (
-    <label
-        data-link-name={`upsell-consent : checkbox : ${uniqueId} : ${
-            checkboxHtmlProps.checked ? 'untick' : 'tick'
-        }`}
-        className="identity-upsell-checkbox"
-        htmlFor={uniqueId}>
-        <span className="identity-upsell-checkbox__title">{title}</span>
-        <input type="checkbox" id={uniqueId} {...checkboxHtmlProps} />
-        <span className="identity-upsell-checkbox__checkmark">
-            <span className="identity-upsell-checkbox__checkmark_tick" />
-        </span>
-    </label>
-);
-
-export { Checkbox };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/consent-card/FollowCard.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/consent-card/FollowCard.js
deleted file mode 100644
index d459f6700fa..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/consent-card/FollowCard.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/consent-card/FollowCard.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import { FollowButtonWrap } from 'common/modules/identity/upsell/button/FollowButtonWrap';
-import type { Consent } from '../store/types';
-
-export type FollowCardProps = {
-    consent: Consent,
-    onChange: boolean => void,
-    hasConsented: boolean,
-};
-
-const FollowCard = (props: FollowCardProps) => {
-    const { hasConsented } = props;
-    const { name, description } = props.consent;
-    return (
-        <div className="identity-upsell-consent-card">
-            <h1 className="identity-upsell-consent-card__title">{name}</h1>
-            <p className="identity-upsell-consent-card__description">
-                {description}
-            </p>
-            <div className="identity-upsell-consent-card__footer">
-                <FollowButtonWrap
-                    trackingName={name}
-                    following={hasConsented}
-                    onFollow={() => {
-                        props.onChange(true);
-                    }}
-                    onUnfollow={() => {
-                        props.onChange(false);
-                    }}
-                />
-            </div>
-        </div>
-    );
-};
-
-export { FollowCard };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/consent-card/FollowCardList.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/consent-card/FollowCardList.js
deleted file mode 100644
index 3ad1019bed8..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/consent-card/FollowCardList.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/consent-card/FollowCardList.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import config from 'lib/config';
-import { FollowCard } from 'common/modules/identity/upsell/consent-card/FollowCard';
-import {
-    setConsentsInApi,
-    getNewsletterConsent,
-    getUserConsent,
-} from 'common/modules/identity/upsell/store/consents';
-import { LegalTextBlock } from 'common/modules/identity/upsell/block/LegalTextBlock';
-import type { ConsentWithState } from '../store/types';
-import { ErrorBar, genericErrorStr } from '../error-bar/ErrorBar';
-import { FollowCardExpanderButton } from '../button/FollowCardExpanderButton';
-
-const getConsents = (): Promise<(?ConsentWithState)[]> =>
-    Promise.all([
-        getUserConsent('supporter'),
-        getNewsletterConsent('the-long-read'),
-        getUserConsent('holidays'),
-        getNewsletterConsent('bookmarks'),
-        getUserConsent('events'),
-        getNewsletterConsent('brexit-briefing'),
-        getUserConsent('offers'),
-        getUserConsent('jobs'),
-        getNewsletterConsent('green-light'),
-        getNewsletterConsent('lab-notes'),
-    ]);
-
-type Props = {
-    cutoff: number,
-};
-
-type State = {
-    consents: ConsentWithState[],
-    isLoading: boolean,
-    isExpanded: boolean,
-    errors: string[],
-};
-
-// TODO: seperate this into a stateless component and a stateful wrapper.
-class FollowCardList extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.setState({
-            consents: [],
-            isLoading: true,
-            isExpanded: false,
-            errors: [],
-        });
-    }
-
-    componentDidMount() {
-        getConsents().then(consents =>
-            this.setState({
-                consents,
-                isLoading: false,
-            })
-        );
-    }
-
-    updateConsentState(consent: ConsentWithState) {
-        this.setState(state => ({
-            errors: [],
-            consents: state.consents.map(original =>
-                original.uniqueId === consent.uniqueId ? consent : original
-            ),
-        }));
-        setConsentsInApi([consent]).catch(() => {
-            consent.flipState();
-            this.setState(state => ({
-                errors: [genericErrorStr],
-                consents: state.consents.map(original =>
-                    original.uniqueId === consent.uniqueId ? consent : original
-                ),
-            }));
-        });
-    }
-
-    updateExpandState = (isExpanded: boolean) => {
-        this.setState({
-            isExpanded,
-        });
-    };
-
-    render() {
-        const { consents, isLoading, isExpanded, errors } = this.state;
-        const { cutoff } = this.props;
-
-        const displayables = isExpanded
-            ? consents
-            : [...consents].splice(0, cutoff);
-
-        return (
-            <div>
-                {isLoading && (
-                    <div className="identity-forms-loading u-identity-forms-padded">
-                        <div className="identity-forms-loading__spinner is-updating" />
-                    </div>
-                )}
-                <ErrorBar errors={errors} />
-                <div className="identity-upsell-consent-card-grid">
-                    {displayables.map(consent => (
-                        <FollowCard
-                            key={consent.uniqueId}
-                            consent={consent.consent}
-                            hasConsented={consent.hasConsented}
-                            onChange={hasConsented => {
-                                consent.setState(hasConsented);
-                                this.updateConsentState(consent);
-                            }}
-                        />
-                    ))}
-                </div>
-                {[...consents].splice(cutoff).length > 0 && (
-                    <div className="identity-upsell-consent-card-footer">
-                        <FollowCardExpanderButton
-                            isExpanded={isExpanded}
-                            linkName="upsell-follow-expander"
-                            onToggle={this.updateExpandState}
-                            text={{
-                                more: 'See more',
-                                less: 'Less',
-                            }}
-                        />
-                        {isExpanded && (
-                            <div>
-                                <a
-                                    data-link-name="upsell-newsletter-link"
-                                    className="u-underline identity-upsell-consent-card__link"
-                                    href={`${config.get(
-                                        'page.idUrl'
-                                    )}/email-prefs`}>
-                                    View all Guardian newsletters
-                                </a>
-                            </div>
-                        )}
-                    </div>
-                )}
-                <LegalTextBlock>
-                    By subscribing, you confirm that you are 13 years or older.
-                    The Guardian’s newsletters may include advertising and
-                    messages about the Guardian’s other products and services,
-                    such as Jobs and Masterclasses. To find out what personal
-                    data we collect and how we use it, please visit our&nbsp;
-                    <a
-                        data-link-name="upsell-privacy-link"
-                        className="u-underline identity-upsell-consent-card__link"
-                        href="https://www.theguardian.com/info/privacy">
-                        Privacy Policy.
-                    </a>
-                </LegalTextBlock>
-            </div>
-        );
-    }
-}
-
-export { FollowCardList };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/error-bar/ErrorBar.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/error-bar/ErrorBar.js
deleted file mode 100644
index d4c73069c34..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/error-bar/ErrorBar.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/error-bar/ErrorBar.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-
-type ErrorBarProps = {
-    errors: string[],
-    tagName: ?string,
-};
-
-export const genericErrorStr = 'Oops! Something went wrong';
-
-export class ErrorBar extends Component<ErrorBarProps> {
-    static defaultProps = {
-        tagName: 'div',
-    };
-
-    render() {
-        const { errors } = this.props;
-        const TagName = this.props.tagName;
-        return (
-            <TagName aria-live="polite">
-                {errors.map(error => (
-                    <div className="form__error" role="alert">
-                        {error}
-                    </div>
-                ))}
-            </TagName>
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/header/Header.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/header/Header.js
deleted file mode 100644
index f323d545aae..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/header/Header.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/header/Header.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React from 'preact/compat';
-import circlesLeft from './circles-left.svg';
-import circlesRight from './circles-right.svg';
-
-type HeaderProps = {
-    title: string,
-    subtitle: string,
-};
-
-const Header = ({ title, subtitle }: HeaderProps) => (
-    <div className="identity-upsell-subheader">
-        <div className="identity-upsell-layout identity-upsell-layout--padding">
-            <header className="identity-upsell-title identity-upsell-title--hero">
-                <h1 className="identity-upsell-title__title">{title}</h1>
-                <h1 className="identity-upsell-title__subtitle">{subtitle}</h1>
-            </header>
-        </div>
-        <div className="identity-upsell-subheader__graphics">
-            <span
-                className="identity-upsell-subheader__graphic identity-upsell-subheader__graphic--circlesLeft"
-                dangerouslySetInnerHTML={{ __html: circlesLeft.markup }}
-            />
-            <span
-                className="identity-upsell-subheader__graphic identity-upsell-subheader__graphic--circlesRight"
-                dangerouslySetInnerHTML={{ __html: circlesRight.markup }}
-            />
-        </div>
-    </div>
-);
-
-export { Header };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/opt-outs/OptOutsList.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/opt-outs/OptOutsList.js
deleted file mode 100644
index dae5f7a4d31..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/opt-outs/OptOutsList.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/opt-outs/OptOutsList.js
- * to .ts, then delete it.
- */
-
-// @flow
-import React, { Component } from 'preact/compat';
-import { Checkbox } from 'common/modules/identity/upsell/checkbox/Checkbox';
-import { OptoutsExpanderButton } from 'common/modules/identity/upsell/button/OptoutsExpanderButton';
-import {
-    getAllUserConsents,
-    setConsentsInApi,
-} from 'common/modules/identity/upsell/store/consents';
-import type { ConsentWithState } from 'common/modules/identity/upsell/store/types';
-import { ErrorBar, genericErrorStr } from '../error-bar/ErrorBar';
-
-export class OptOutsList extends Component<
-    {},
-    {
-        consents: ConsentWithState[],
-        isLoading: boolean,
-        hasUnsavedChanges: boolean,
-        errors: string[],
-        isExpanded: boolean,
-    }
-> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            isLoading: false,
-            errors: [],
-            hasUnsavedChanges: true,
-            consents: [],
-            isExpanded: false,
-        };
-    }
-
-    componentDidMount() {
-        getAllUserConsents().then(consents => {
-            this.setState({
-                consents: consents.filter(c => c.consent.isOptOut),
-            });
-        });
-    }
-
-    onCheckboxChange = (consent: ConsentWithState) => {
-        this.setState(state => ({
-            hasUnsavedChanges: true,
-            consents: state.consents.map(original =>
-                original.uniqueId === consent.uniqueId ? consent : original
-            ),
-        }));
-    };
-
-    onSubmit = (ev: Event) => {
-        ev.preventDefault();
-        this.setState({
-            isLoading: true,
-            errors: [],
-        });
-        setConsentsInApi(this.state.consents)
-            .then(() => {
-                this.setState({
-                    hasUnsavedChanges: false,
-                    isLoading: false,
-                });
-            })
-            .catch(() => {
-                this.setState({
-                    errors: [genericErrorStr],
-                    isLoading: false,
-                });
-            });
-    };
-
-    updateExpandState = (isExpanded: boolean) => {
-        this.setState({
-            isExpanded,
-        });
-    };
-
-    render() {
-        const {
-            hasUnsavedChanges,
-            isLoading,
-            consents,
-            errors,
-            isExpanded,
-        } = this.state;
-        return (
-            <div
-                className={
-                    isExpanded
-                        ? 'identity-upsell-optouts'
-                        : 'identity-upsell-optouts identity-upsell-optouts--closed'
-                }>
-                <OptoutsExpanderButton
-                    isExpanded={isExpanded}
-                    linkName="upsell-optouts-expander"
-                    onToggle={this.updateExpandState}
-                    text="Change my preferences"
-                />
-                {isExpanded && (
-                    <div className="identity-upsell-optouts-expanded">
-                        <form onSubmit={ev => this.onSubmit(ev)}>
-                            <ul className="identity-forms-fields">
-                                <ErrorBar errors={errors} tagName="li" />
-                                <li>
-                                    {consents.map(consent => (
-                                        <Checkbox
-                                            title={consent.consent.description}
-                                            uniqueId={consent.uniqueId}
-                                            checkboxHtmlProps={{
-                                                checked: consent.hasConsented,
-                                                onChange: ev => {
-                                                    consent.setState(
-                                                        ev.currentTarget.checked
-                                                    );
-                                                    this.onCheckboxChange(
-                                                        consent
-                                                    );
-                                                },
-                                            }}
-                                        />
-                                    ))}
-                                </li>
-                                <li>
-                                    <div className="identity-upsell-button-with-proxy">
-                                        <button
-                                            data-link-name="upsell-consent : submit optouts"
-                                            type="submit"
-                                            disabled={isLoading}
-                                            className="manage-account__button manage-account__button--main">
-                                            Save preferences
-                                        </button>
-                                        {!hasUnsavedChanges && (
-                                            <span className="identity-upsell-button-with-proxy__proxy identity-upsell-button-with-proxy__proxy--success">
-                                                Changes saved
-                                            </span>
-                                        )}
-                                        {isLoading && (
-                                            <span className="identity-upsell-button-with-proxy__proxy">
-                                                Loading
-                                            </span>
-                                        )}
-                                    </div>
-                                </li>
-                            </ul>
-                        </form>
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/ConfirmEmailPage.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/ConfirmEmailPage.js
deleted file mode 100644
index 0108f356f4c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/ConfirmEmailPage.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/page/ConfirmEmailPage.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React from 'preact/compat';
-
-import { NewsLetterSignUps } from './NewsLetterSignUps';
-import { OptOuts } from './OptOuts';
-import { Header } from '../header/Header';
-import { AccountCreationBlock } from '../account-creation/AccountCreationBlock';
-
-type Props = {
-    csrfToken: string,
-    accountToken: ?string,
-    email: string,
-    hasPassword: boolean,
-    hasSocialLinks: boolean,
-    isUserLoggedIn: boolean,
-};
-
-const Components = (props: Props): React.Component => {
-    let components = [<NewsLetterSignUps />, <OptOuts />];
-
-    if (!props.hasPassword && !props.hasSocialLinks && props.accountToken) {
-        components = [
-            <AccountCreationBlock
-                csrfToken={props.csrfToken}
-                accountToken={props.accountToken}
-                email={props.email}
-            />,
-            <NewsLetterSignUps />,
-            <OptOuts />,
-        ];
-    } else if (!props.isUserLoggedIn) {
-        // TODO: sign in form
-        components = [<NewsLetterSignUps />, <OptOuts />];
-    }
-
-    return <div className="identity-upsell-layout">{components}</div>;
-};
-
-export const ConfirmEmailPage = (props: Props): React.Component => (
-    <div className="identity-upsell-wrapper">
-        <Header title="Thank you!" subtitle="You’re now subscribed." />
-        <Components {...props} />
-    </div>
-);
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/NewsLetterSignUps.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/NewsLetterSignUps.js
deleted file mode 100644
index ea66ce2f199..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/NewsLetterSignUps.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/page/NewsLetterSignUps.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React from 'preact/compat';
-import { Block } from '../block/Block';
-import { FollowCardList } from '../consent-card/FollowCardList';
-
-export const NewsLetterSignUps = (): React.Component => (
-    <Block title="Guardian favourites:">
-        <FollowCardList cutoff={2} />
-    </Block>
-);
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/OptOuts.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/OptOuts.js
deleted file mode 100644
index b64273b6bdf..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/OptOuts.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/page/OptOuts.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React from 'preact/compat';
-import { Block } from '../block/Block';
-import { OptOutsList } from '../opt-outs/OptOutsList';
-
-export const OptOuts = (): React.Component => (
-    <Block
-        halfWidth
-        sideBySideBackwards
-        title="Your marketing preferences"
-        subtext="We may contact you by telephone and post about our products and services (if you've previously given
-        us your number and address). We may also contact you for market research purposes and use your data for
-        marketing analysis.">
-        <OptOutsList />
-    </Block>
-);
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/StatefulConfirmEmailPage.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/StatefulConfirmEmailPage.js
deleted file mode 100644
index 5154827b2b0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/page/StatefulConfirmEmailPage.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/page/StatefulConfirmEmailPage.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import React from 'preact/compat';
-import { ConfirmEmailPage } from './ConfirmEmailPage';
-import { getUserData } from '../../api';
-
-type Props = {
-    csrfToken: string,
-    accountToken: ?string,
-    email: string,
-    hasPassword: boolean,
-    hasSocialLinks: boolean,
-};
-
-type State = {
-    isUserLoggedIn: boolean,
-};
-
-const isUserLoggedIn = (): Promise<boolean> =>
-    getUserData().then(response => response.ok);
-
-export class StatefulConfirmEmailPage extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.setState({ isUserLoggedIn: false });
-    }
-
-    componentDidMount() {
-        // For some reason using this.setState instead of an anonymous function doesn't work?
-        isUserLoggedIn().then(status =>
-            this.setState({ isUserLoggedIn: status })
-        );
-    }
-
-    render() {
-        return (
-            <ConfirmEmailPage
-                csrfToken={this.props.csrfToken}
-                accountToken={this.props.accountToken}
-                email={this.props.email}
-                hasPassword={this.props.hasPassword}
-                hasSocialLinks={this.props.hasSocialLinks}
-                isUserLoggedIn={this.state.isUserLoggedIn}
-            />
-        );
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/consents.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/consents.js
deleted file mode 100644
index 338afb9cd78..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/consents.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/store/consents.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { fetchNewsletters, fetchUserConsents } from './fetch';
-import { consentTypeList, UserConsentWithState } from './types';
-import type { ConsentWithState } from './types';
-
-const getAllUserConsents = (): Promise<UserConsentWithState[]> =>
-    fetchUserConsents;
-
-const getUserConsent = (consentId: string): Promise<?UserConsentWithState> =>
-    fetchUserConsents.then(cs =>
-        cs.find(consent => consent.consent.id === consentId)
-    );
-
-const getUserConsents = (
-    consentIds: string[]
-): Promise<UserConsentWithState[]> =>
-    fetchUserConsents.then(consents =>
-        consents.filter(consent => consentIds.includes(consent.consent.id))
-    );
-
-const getAllNewsletterConsents = (): Promise<ConsentWithState[]> =>
-    fetchNewsletters;
-
-const getNewsletterConsent = (consentId: string): Promise<?ConsentWithState> =>
-    fetchNewsletters.then(cs =>
-        cs.find(consent => consent.consent.id === consentId)
-    );
-
-const getNewsLetterConsents = (
-    consentIds: string[]
-): Promise<UserConsentWithState[]> =>
-    fetchNewsletters.then(consents =>
-        consents.filter(consent => consentIds.includes(consent.consent.id))
-    );
-
-const setConsentsInApi = (consents: ConsentWithState[]): Promise<any> => {
-    /*
-    This function takes n consents then will split
-    them into all consent types, then will use the send
-    to api fn for that consent type. The reason for this is
-    that an arbitrary number of consents of different types
-    can be set at once.
-    */
-    const consentsWithFunctions = consentTypeList.map(type => {
-        const filteredConsents = consents.filter(c => c instanceof type);
-        return filteredConsents && filteredConsents.length
-            ? type.updateInApiFn(filteredConsents)
-            : true;
-    });
-    return Promise.all(consentsWithFunctions);
-};
-
-export {
-    getUserConsent,
-    getUserConsents,
-    getAllUserConsents,
-    getNewsletterConsent,
-    getNewsLetterConsents,
-    getAllNewsletterConsents,
-    setConsentsInApi,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/fetch.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/fetch.js
deleted file mode 100644
index 82ccb21ab76..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/fetch.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/store/fetch.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {
-    getAllConsents,
-    getAllNewsletters,
-    getSubscribedNewsletters,
-    getUserFromApi,
-} from 'common/modules/identity/api';
-import { UserConsentWithState, EmailConsentWithState } from './types';
-
-const fetchSubscribedConsents = (): Promise<string[]> =>
-    new Promise(accept => {
-        getUserFromApi(user => {
-            if (user && user.consents) {
-                accept(
-                    user.consents
-                        .filter(consent => consent.consented === true)
-                        .map(consent => consent.id)
-                );
-            } else {
-                accept([]);
-            }
-        });
-    });
-
-const fetchUserConsents = Promise.all([
-    fetchSubscribedConsents(),
-    getAllConsents(),
-]).then(([acceptedConsents, allConsents]) =>
-    allConsents.map(
-        consent =>
-            new UserConsentWithState(
-                consent,
-                acceptedConsents.includes(consent.id)
-            )
-    )
-);
-
-const fetchNewsletters = Promise.all([
-    getAllNewsletters(),
-    getSubscribedNewsletters(),
-]).then(([allNewsletters, subscribedNewsletters]) =>
-    allNewsletters.map(
-        nl =>
-            new EmailConsentWithState(
-                nl,
-                subscribedNewsletters.includes(nl.listId.toString())
-            )
-    )
-);
-
-export { fetchUserConsents, fetchNewsletters };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/types.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/types.js
deleted file mode 100644
index 2df63b70546..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/store/types.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/store/types.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {
-    setConsent,
-    buildNewsletterUpdatePayload,
-    updateNewsletter,
-} from 'common/modules/identity/api';
-
-type Consent = {
-    id: string,
-    name: string,
-    description: string,
-    isOptOut: ?boolean,
-    isChannel: ?boolean,
-    exactTargetListId: ?string,
-};
-
-class ConsentWithState {
-    consent: Consent;
-    uniqueId: string;
-    hasConsented: boolean;
-    updateInApiFn: (cs: ConsentWithState[]) => Promise<void>;
-
-    constructor(consent: Consent, hasConsented: ?boolean): void {
-        this.consent = consent;
-        this.hasConsented = hasConsented || false;
-    }
-
-    setState(hasConsented: boolean) {
-        this.hasConsented = hasConsented;
-    }
-
-    flipState() {
-        this.hasConsented = !this.hasConsented;
-    }
-}
-
-class UserConsentWithState extends ConsentWithState {
-    constructor(...args: any[]) {
-        super(...args);
-        this.uniqueId = ['user', this.consent.id].join('-');
-    }
-    static updateInApiFn = (cs: ConsentWithState[]): Promise<void> =>
-        setConsent(
-            cs.map(c => ({
-                id: c.consent.id,
-                consented: c.hasConsented || false,
-            }))
-        );
-}
-
-class EmailConsentWithState extends ConsentWithState {
-    constructor(...args: any[]) {
-        super(...args);
-        this.uniqueId = ['email', this.consent.id].join('-');
-    }
-    static updateInApiFn = (cs: ConsentWithState[]): Promise<void> =>
-        Promise.all(
-            cs.map(consent => {
-                if (!consent.consent.exactTargetListId) return Promise.reject();
-                return updateNewsletter(
-                    buildNewsletterUpdatePayload(
-                        consent.hasConsented ? 'add' : 'remove',
-                        consent.consent.exactTargetListId
-                    )
-                );
-            })
-        ).then(() => {});
-}
-
-const consentTypeList = [UserConsentWithState, EmailConsentWithState];
-
-export type { Consent, ConsentWithState };
-export { UserConsentWithState, EmailConsentWithState, consentTypeList };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/upsell.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/upsell.js
deleted file mode 100644
index 5c187b0d447..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/upsell/upsell.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/upsell/upsell.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { trackNonClickInteraction } from 'common/modules/analytics/google';
-import React, { render } from 'preact/compat';
-import fastdom from 'lib/fastdom-promise';
-import ophan from 'ophan/ng';
-import loadEnhancers from 'common/modules/identity/modules/loadEnhancers';
-import { AccountCreationCompleteConsentsFlow } from 'common/modules/identity/upsell/account-creation/AccountCreationCompleteConsentsFlow';
-import { StatefulConfirmEmailPage } from './page/StatefulConfirmEmailPage';
-
-const trackInteraction = (interaction: string): void => {
-    ophan.record({
-        component: 'set-password',
-        value: interaction,
-    });
-    trackNonClickInteraction(interaction);
-};
-
-const bindAccountCreation = (el): void => {
-    trackInteraction('set-password : display');
-    fastdom.mutate(() => {
-        render(
-            <AccountCreationCompleteConsentsFlow
-                csrfToken={el.dataset.csrf}
-                accountToken={el.dataset.accountToken}
-                email={el.dataset.email}
-            />,
-            el
-        );
-    });
-};
-
-type Prefill = {
-    csrfToken: string,
-    accountToken: ?string,
-    email: string,
-    hasPassword: boolean,
-    hasSocialLinks: boolean,
-};
-
-const getPrefill = (el: HTMLElement): Prefill => ({
-    csrfToken: el.dataset.csrfToken,
-    accountToken: el.dataset.accountToken,
-    email: el.dataset.email,
-    hasPassword: el.dataset.hasPassword === 'true',
-    hasSocialLinks: el.dataset.hasSocialLinks === 'true',
-});
-
-const bindBlockList = (el): void => {
-    fastdom
-        .measure(() => getPrefill(el))
-        .then(prefill =>
-            fastdom.mutate(() => {
-                render(
-                    <StatefulConfirmEmailPage
-                        csrfToken={prefill.csrfToken}
-                        accountToken={prefill.accountToken}
-                        email={prefill.email}
-                        hasPassword={prefill.hasPassword}
-                        hasSocialLinks={prefill.hasSocialLinks}
-                    />,
-                    el
-                );
-            })
-        );
-};
-
-const enhanceUpsell = (): void => {
-    loadEnhancers([
-        ['.js-identity-upsell-account-creation', bindAccountCreation],
-        ['.js-identity-block-list', bindBlockList],
-    ]);
-};
-
-export { enhanceUpsell };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/identity/validation-email.js b/static/src/javascripts.flow.archive/projects/common/modules/identity/validation-email.js
deleted file mode 100644
index 39e5bc6c5a4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/identity/validation-email.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/identity/validation-email.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import mediator from 'lib/mediator';
-import {
-    isUserLoggedIn,
-    sendValidationEmail,
-} from 'common/modules/identity/api';
-
-const init = (): void => {
-    fastdom
-        .measure(() =>
-            document.getElementsByClassName('js-id-send-validation-email')
-        )
-        .then(elems => {
-            if (elems.length) {
-                const resendButton = elems[0];
-
-                resendButton.addEventListener(
-                    'click',
-                    (event: Event): void => {
-                        event.preventDefault();
-
-                        if (isUserLoggedIn()) {
-                            sendValidationEmail().then(
-                                resp => {
-                                    if (resp.status === 'error') {
-                                        mediator.emit(
-                                            'module:identity:validation-email:fail'
-                                        );
-
-                                        fastdom.mutate(() => {
-                                            resendButton.innerHTML =
-                                                'An error occured, please click here to try again.';
-                                        });
-                                    } else {
-                                        mediator.emit(
-                                            'module:identity:validation-email:success'
-                                        );
-
-                                        const resendButtonParent =
-                                            resendButton.parentNode;
-
-                                        if (resendButtonParent) {
-                                            const sentMsgEl = document.createElement(
-                                                'p'
-                                            );
-
-                                            sentMsgEl.innerText =
-                                                'Sent. Please check your email and follow the link.';
-
-                                            fastdom.mutate(() => {
-                                                resendButtonParent.replaceChild(
-                                                    sentMsgEl,
-                                                    resendButton
-                                                );
-                                            });
-                                        }
-                                    }
-                                },
-                                () => {
-                                    mediator.emit(
-                                        'module:identity:validation-email:fail'
-                                    );
-
-                                    fastdom.mutate(() => {
-                                        resendButton.innerHTML =
-                                            'An error occured, please click here to try again.';
-                                    });
-                                }
-                            );
-                        }
-                    }
-                );
-            }
-        });
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/media/videojs-plugins/fullscreener.js b/static/src/javascripts.flow.archive/projects/common/modules/media/videojs-plugins/fullscreener.js
deleted file mode 100644
index 06e09e42aef..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/media/videojs-plugins/fullscreener.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/media/videojs-plugins/fullscreener.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import bonzo from 'bonzo';
-
-/**
-    videojs plugins can't use arrow functions
-    as 'this' needs to be available as it 
-    represents an instance of the videojs player
-* */
-const fullscreener = function fullscreener(): void {
-    const clickbox = bonzo.create(
-        '<div class="vjs-fullscreen-clickbox"></div>'
-    )[0];
-
-    bonzo(clickbox).appendTo(this.contentEl());
-
-    bean.on(
-        clickbox,
-        'click',
-        (e: bean): void => {
-            if (this.paused()) {
-                this.play();
-            } else {
-                this.pause();
-            }
-            e.stop();
-        }
-    );
-
-    bean.on(
-        clickbox,
-        'dblclick',
-        (e: bean): void => {
-            e.stop();
-            if (this.isFullscreen()) {
-                this.exitFullscreen();
-            } else {
-                this.requestFullscreen();
-            }
-        }
-    );
-
-    this.on(
-        'fullscreenchange',
-        (): void => {
-            if (this.isFullscreen()) {
-                this.trigger('player:fullscreen');
-            }
-        }
-    );
-};
-
-export { fullscreener };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/membership.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/membership.js
deleted file mode 100644
index b0453374733..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/membership.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/membership.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {
-    isPayingMember,
-    accountDataUpdateWarning,
-    getLastOneOffContributionDate,
-    getLastRecurringContributionDate,
-} from 'common/modules/commercial/user-features';
-import fastdom from 'lib/fastdom-promise';
-import { Message } from 'common/modules/ui/message';
-import config from 'lib/config';
-import bean from 'bean';
-import arrowRight from 'svgs/icon/arrow-right.svg';
-import type { Banner } from 'common/modules/ui/bannerPicker';
-import { isUserLoggedIn } from 'common/modules/identity/api';
-import userPrefs from 'common/modules/user-prefs';
-import { submitViewEvent } from 'common/modules/commercial/acquisitions-ophan';
-
-const createManageBannerLink = manageProductKeyword =>
-    `${config.get('page.mmaUrl')}/banner/${manageProductKeyword}?INTCMP=BANNER`;
-
-const accountDataUpdateLink = accountDataUpdateWarningLink => {
-    switch (accountDataUpdateWarningLink) {
-        case 'contribution':
-            return createManageBannerLink('contributions');
-        case 'membership':
-        case 'digitalpack':
-            return createManageBannerLink(accountDataUpdateWarningLink);
-        default:
-            return `${config.get(
-                'page.idUrl'
-            )}/${accountDataUpdateWarningLink}/edit`;
-    }
-};
-
-const messageCode: string = 'membership-action-required';
-
-const bannerCanBeLoadedAgainAfterKey: string =
-    'mmaActionRequiredBannerCanBeShownAgainAfter';
-
-const storeBannerCanBeLoadedAgainAfter = () => {
-    const thisTimeTomorrow = new Date();
-    thisTimeTomorrow.setDate(thisTimeTomorrow.getDate() + 1);
-    userPrefs.set(
-        bannerCanBeLoadedAgainAfterKey,
-        thisTimeTomorrow.toISOString()
-    );
-};
-
-const gaTrackMMA = (category, action) => label => {
-    window.ga(
-        `${config.get('googleAnalytics.trackers.editorial')}.send`,
-        'event',
-        category,
-        action,
-        label
-    );
-};
-
-const updateLink = accountDataUpdateWarning();
-
-const showAccountDataUpdateWarningMessage = accountDataUpdateWarningLink => {
-    const newMessage = new Message(messageCode, {
-        cssModifierClass: messageCode,
-        trackDisplay: true,
-        siteMessageLinkName: messageCode,
-        siteMessageComponentName: messageCode,
-        customJs: () => {
-            const gaTrackClickMMA = gaTrackMMA('click', 'in page');
-            const gaTrackElementViewMMA = gaTrackMMA(
-                'element view',
-                'internal'
-            );
-
-            bean.on(document, 'click', '.js-site-message-close', () => {
-                gaTrackClickMMA('membership action required | banner hidden');
-                gaTrackClickMMA(
-                    `mma action required | banner hidden | ${updateLink || '?'}`
-                );
-                storeBannerCanBeLoadedAgainAfter();
-            });
-
-            bean.on(document, 'click', '.js-mma-update-details-button', () => {
-                gaTrackClickMMA(
-                    'membership action required | banner update details clicked'
-                );
-                gaTrackClickMMA(
-                    `mma action required | banner update details clicked | ${updateLink ||
-                        '?'}`
-                );
-                storeBannerCanBeLoadedAgainAfter();
-            });
-
-            gaTrackElementViewMMA(
-                'membership action required | banner impression'
-            );
-            gaTrackElementViewMMA(
-                `mma action required | banner impression | ${updateLink || '?'}`
-            );
-        },
-    });
-
-    newMessage.show(
-        `<div class="site-message__copy-heading">
-            Action is needed on your Guardian account
-        </div>
-        <div class="site-message__copy-text">
-            Please review and update your details as&nbsp;soon&nbsp;as&nbsp;you&nbsp;can. Thank&nbsp;you.
-        </div>
-        <div class="site-message__copy-text">
-            <a class="button site-message__copy-button js-mma-update-details-button" href="${accountDataUpdateLink(
-                accountDataUpdateWarningLink
-            )}">
-                Update details ${arrowRight.markup}
-            </a>
-        </div>`
-    );
-};
-
-const canShow: () => Promise<boolean> = () => {
-    const bannerCanBeLoadedAgainAfter = userPrefs.get(
-        bannerCanBeLoadedAgainAfterKey
-    );
-    return Promise.resolve(
-        updateLink !== null &&
-            isUserLoggedIn() &&
-            !(
-                bannerCanBeLoadedAgainAfter &&
-                new Date(bannerCanBeLoadedAgainAfter) > new Date()
-            )
-    );
-};
-
-const show: () => Promise<boolean> = () => {
-    if (updateLink) {
-        showAccountDataUpdateWarningMessage(updateLink);
-        return Promise.resolve(true);
-    }
-
-    return Promise.resolve(false);
-};
-
-export const membershipBanner: Banner = {
-    id: messageCode,
-    show,
-    canShow,
-};
-
-export const initMembership = (): void => {
-    const lastOneOff = getLastOneOffContributionDate();
-    const lastRecurring = getLastRecurringContributionDate();
-
-    if (lastOneOff) {
-        submitViewEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'acquisitions-cookie-one-off',
-            },
-            value: lastOneOff.toString(),
-        });
-    }
-
-    if (lastRecurring) {
-        submitViewEvent({
-            component: {
-                componentType: 'ACQUISITIONS_OTHER',
-                id: 'acquisitions-cookie-recurring',
-            },
-            value: lastRecurring.toString(),
-        });
-    }
-
-    if (isPayingMember()) {
-        fastdom
-            .measure(() => document.getElementsByClassName('js-become-member'))
-            .then(becomeMemberLinks => {
-                if (becomeMemberLinks.length) {
-                    becomeMemberLinks[0].setAttribute('hidden', 'hidden');
-                }
-            });
-
-        fastdom
-            .measure(() => document.getElementsByClassName('js-subscribe'))
-            .then(subscriberLinks => {
-                if (subscriberLinks.length) {
-                    subscriberLinks[0].classList.remove(
-                        'brand-bar__item--split--last'
-                    );
-                }
-            });
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/navigation.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/navigation.js
deleted file mode 100644
index 9be05b12919..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/navigation.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/navigation.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-import mediator from 'lib/mediator';
-import { isIOS, getUserAgent } from 'lib/detect';
-import $ from 'lib/$';
-
-const jsEnableFooterNav = (): Promise<void> =>
-    fastdom.mutate(() => {
-        $('.navigation-container--default')
-            .removeClass('navigation-container--default')
-            .addClass('navigation-container--collapsed');
-    });
-
-const copyMegaNavMenu = (): Promise<void> => {
-    let megaNav;
-
-    return fastdom
-        .measure(() => $('.js-mega-nav'))
-        .then(elem => {
-            megaNav = elem;
-
-            return fastdom.measure(() => $('.js-mega-nav-placeholder'));
-        })
-        .then(placeholder => {
-            const megaNavCopy = $.create(megaNav.html());
-
-            $('.global-navigation', megaNavCopy).addClass(
-                'global-navigation--top'
-            );
-
-            if (placeholder) {
-                return fastdom.mutate(() => {
-                    placeholder.append(megaNavCopy);
-                });
-            }
-        });
-};
-
-const replaceAllSectionsLink = (): Promise<void> =>
-    fastdom
-        .measure(() => $('.js-navigation-header .js-navigation-toggle'))
-        .then(elems =>
-            fastdom.mutate(() => {
-                elems.attr('href', '#nav-allsections');
-            })
-        );
-
-const addOverflowScrollTouch = (): Promise<void> =>
-    fastdom
-        .measure(() => $('.navigation__scroll'))
-        .then(navScroll => {
-            if (navScroll) {
-                return fastdom.mutate(() => {
-                    navScroll.css({
-                        '-webkit-overflow-scrolling': 'touch',
-                    });
-                });
-            }
-        });
-
-const enableMegaNavToggle = (): void => {
-    bean.on(document, 'click', '.js-navigation-toggle', e => {
-        const target = $(`.${e.currentTarget.getAttribute('data-target-nav')}`);
-
-        e.preventDefault();
-
-        fastdom.mutate(() => {
-            target.toggleClass(
-                'navigation-container--expanded navigation-container--collapsed'
-            );
-            mediator.emit(
-                target.hasClass('navigation-container--expanded')
-                    ? 'modules:nav:open'
-                    : 'modules:nav:close'
-            );
-        });
-    });
-};
-
-const initNavigation = (): Promise<any> => {
-    enableMegaNavToggle();
-
-    const modifications = [
-        jsEnableFooterNav(),
-        copyMegaNavMenu(),
-        replaceAllSectionsLink(),
-    ];
-
-    if (
-        isIOS() &&
-        typeof getUserAgent === 'object' &&
-        parseInt(getUserAgent.version, 10) > 5
-    ) {
-        // crashes mobile safari < 6, so we add it here after detection
-        modifications.push(addOverflowScrollTouch());
-    }
-
-    return Promise.all(modifications);
-};
-
-export { initNavigation };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/navigation.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/navigation.spec.js
deleted file mode 100644
index ba5f136dd9a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/navigation.spec.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/navigation.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import {
-    initNavigation,
-} from 'common/modules/navigation/navigation';
-
-jest.mock('lib/fastdom-promise');
-
-jest.mock('lib/detect', () => ({
-    isIOS: jest.fn(() => false),
-}));
-
-describe('Navigation', () => {
-    const PLACEHOLDER_CLASS = 'js-mega-nav-placeholder';
-    const NAVIGATION_CONTAINER_CLASS = 'navigation-container--default';
-    const LINK_CLASS = 'js-navigation-toggle';
-
-    const domSnippet = `<div class="js-navigation-header navigation-container--collapsed">
-        <a class="${LINK_CLASS}" href="#footer-nav" data-target-nav="js-navigation-header"></a>
-        <div class="${PLACEHOLDER_CLASS}"></div>
-    </div>
-    <div class="js-mega-nav">
-        <div class="global-navigation">Nav</div>
-    </div>
-    <div class="${NAVIGATION_CONTAINER_CLASS}"></div>`;
-
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = domSnippet;
-        }
-    });
-
-    afterEach(() => {
-        if (document.body) {
-            document.body.innerHTML = '';
-        }
-    });
-
-    it('collapse default navigation', () => {
-        const navigationContainer = document.getElementsByClassName(
-            NAVIGATION_CONTAINER_CLASS
-        )[0];
-
-        return initNavigation().then(() => {
-            if (navigationContainer) {
-                expect(
-                    navigationContainer.classList.contains(
-                        NAVIGATION_CONTAINER_CLASS
-                    )
-                ).toBeFalsy();
-                expect(
-                    navigationContainer.classList.contains(
-                        'navigation-container--collapsed'
-                    )
-                ).toBeTruthy();
-            }
-        });
-    });
-
-    it('should copy mega nav menu to placeholder', () => {
-        const placeholder = document.getElementsByClassName(
-            PLACEHOLDER_CLASS
-        )[0];
-
-        return initNavigation().then(() => {
-            if (placeholder) {
-                expect(placeholder.innerHTML).toEqual(
-                    '<div class="global-navigation">Nav</div>'
-                );
-            }
-        });
-    });
-
-    it('should change all sections link', () => {
-        const sectionLink = document.getElementsByClassName(LINK_CLASS)[0];
-
-        if (sectionLink) {
-            expect(sectionLink.getAttribute('href')).toEqual('#footer-nav');
-        }
-
-        return initNavigation().then(() => {
-            if (sectionLink) {
-                expect(sectionLink.getAttribute('href')).toEqual(
-                    '#nav-allsections'
-                );
-            }
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/new-header.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/new-header.js
deleted file mode 100644
index 69fdaa1b875..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/new-header.js
+++ /dev/null
@@ -1,590 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/new-header.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import debounce from 'lodash/debounce';
-import ophan from 'ophan/ng';
-import { isBreakpoint } from 'lib/detect';
-import mediator from 'lib/mediator';
-import fastdom from 'lib/fastdom-promise';
-import { storage } from '@guardian/libs';
-import { scrollToElement } from 'lib/scroller';
-import { addEventListener } from 'lib/events';
-import { showMyAccountIfNecessary } from './user-account';
-
-type MenuAndTriggerEls = {
-    menu: HTMLElement,
-    trigger: HTMLElement,
-};
-
-const enhanced = {};
-const clickstreamListeners = {};
-const SEARCH_STORAGE_KEY = 'gu.recent.search';
-const MY_ACCOUNT_ID = 'my-account-toggle';
-const MENU_TOGGLE_ID = 'main-menu-toggle';
-const EDITION_PICKER_TOGGLE_ID = 'edition-picker-toggle';
-
-const getMenu = (): ?HTMLElement =>
-    document.getElementsByClassName('js-main-menu')[0];
-
-const getSectionToggleMenuItem = (section: HTMLElement): ?HTMLElement => {
-    const children = Array.from(section.children);
-    return children.find(child => child.classList.contains('menu-item__title'));
-};
-
-const closeMenuSection = (section: HTMLElement): void => {
-    const toggle = getSectionToggleMenuItem(section);
-
-    if (toggle) {
-        toggle.setAttribute('aria-expanded', 'false');
-    }
-};
-
-const closeAllMenuSections = (exclude?: Node): void => {
-    const sections = Array.from(
-        document.querySelectorAll('.js-navigation-item')
-    );
-
-    sections.forEach(section => {
-        if (section !== exclude) {
-            closeMenuSection(section);
-        }
-    });
-};
-
-const openMenuSection = (section: HTMLElement, options?: Object = {}): void => {
-    const toggle = getSectionToggleMenuItem(section);
-
-    if (toggle) {
-        toggle.setAttribute('aria-expanded', 'true');
-    }
-
-    if (options.scrollIntoView === true) {
-        scrollToElement(section, 0, 'easeInQuad', getMenu());
-    }
-
-    // the sections should behave like an accordion
-    closeAllMenuSections(section);
-};
-
-const isMenuSectionClosed = (section: HTMLElement): boolean => {
-    const toggle = getSectionToggleMenuItem(section);
-
-    if (toggle) {
-        return toggle.getAttribute('aria-expanded') === 'false';
-    }
-
-    return true;
-};
-
-const toggleMenuSection = (section: HTMLElement): void => {
-    if (isMenuSectionClosed(section)) {
-        openMenuSection(section);
-    } else {
-        closeMenuSection(section);
-    }
-};
-
-const removeClickstreamListener = (menuId: string): void => {
-    const clickHandler = clickstreamListeners[menuId];
-    mediator.off('module:clickstream:click', clickHandler);
-    delete clickstreamListeners[menuId];
-};
-
-const registerClickstreamListener = (
-    menuId: string,
-    clickHandler: () => void
-) => {
-    removeClickstreamListener(menuId);
-    mediator.on('module:clickstream:click', clickHandler);
-    clickstreamListeners[menuId] = clickHandler;
-};
-
-const toggleMenu = (): void => {
-    const documentElement = document.documentElement;
-    const openClass = 'new-header--open';
-    const globalOpenClass = 'nav-is-open';
-    const trigger = document.querySelector('.veggie-burger');
-    const newHeader = document.querySelector('.new-header');
-    const menuToggle = newHeader && newHeader.querySelector('.js-change-link');
-    const isOpen = trigger && trigger.getAttribute('aria-expanded') === 'true';
-    const menu = getMenu();
-
-    if (!newHeader || !menu || !menuToggle) {
-        return;
-    }
-
-    const resetItemOrder = (): void => {
-        const items = Array.from(
-            document.querySelectorAll('.js-navigation-item')
-        );
-
-        items.forEach(item => {
-            const listItem = item;
-            listItem.style.order = '';
-        });
-    };
-
-    const focusFirstMenuSection = (): void => {
-        const firstSection = document.querySelector('.js-navigation-button');
-
-        if (firstSection) {
-            firstSection.focus();
-        }
-    };
-
-    const update = () => {
-        const expandedAttr = isOpen ? 'false' : 'true';
-        const hiddenAttr = isOpen ? 'true' : 'false';
-        const haveToCalcTogglePosition = (): boolean =>
-            isBreakpoint({
-                min: 'tablet',
-                max: 'desktop',
-            });
-        const enhanceMenuMargin = (): Promise<void> => {
-            const body = document.body;
-
-            if (!body || !haveToCalcTogglePosition()) {
-                return Promise.resolve();
-            }
-
-            return fastdom
-                .measure(() => {
-                    const docRect = body.getBoundingClientRect();
-                    const rect = menuToggle.getBoundingClientRect();
-                    return docRect.right - rect.right + rect.width / 2;
-                })
-                .then(marginRight =>
-                    fastdom.mutate(() => {
-                        menu.style.marginRight = `${marginRight}px`;
-                    })
-                );
-        };
-        const debouncedMenuEnhancement = debounce(enhanceMenuMargin, 200);
-        const removeEnhancedMenuMargin = (): Promise<void> =>
-            fastdom.mutate(() => {
-                menu.style.marginRight = '';
-            });
-
-        /*
-            Between tablet and desktop the veggie-burger does not have a fixed
-            margin to the right. Therefore we have to calculate it's midpoint
-            and apply it as a margin to the menu.
-            The listeners have to be applied always, because the device
-            orientation could change and force the layout into the next
-            breakpoint.
-        */
-        if (!isOpen) {
-            enhanceMenuMargin().then(() => {
-                addEventListener(window, 'resize', debouncedMenuEnhancement, {
-                    passive: true,
-                });
-            });
-
-            // On desktop clicking outside menu should close it
-            if (
-                isBreakpoint({
-                    min: 'desktop',
-                })
-            ) {
-                const menuId = menu.getAttribute('id');
-                const triggerToggle = clickSpec => {
-                    const elem = clickSpec ? clickSpec.target : null;
-
-                    if (elem !== menu) {
-                        toggleMenu();
-                        // remove event listener when the menu closes
-                        if (menuId) {
-                            removeClickstreamListener(menuId);
-                        }
-                    }
-                };
-                // if anywhere outside the menu is clicked the menu will close
-                if (menuId) {
-                    registerClickstreamListener(menuId, triggerToggle);
-                }
-            }
-        } else {
-            removeEnhancedMenuMargin().then(() => {
-                window.removeEventListener('resize', debouncedMenuEnhancement);
-            });
-        }
-
-        menuToggle.setAttribute(
-            'data-link-name',
-            `nav2 : veggie-burger : ${isOpen ? 'show' : 'hide'}`
-        );
-
-        if (trigger) {
-            trigger.setAttribute('aria-expanded', expandedAttr);
-        }
-
-        menu.setAttribute('aria-hidden', hiddenAttr);
-        newHeader.classList.toggle(openClass, !isOpen);
-
-        if (documentElement) {
-            documentElement.classList.toggle(globalOpenClass, !isOpen);
-        }
-
-        if (isOpen) {
-            resetItemOrder();
-            closeAllMenuSections();
-        } else {
-            focusFirstMenuSection();
-        }
-    };
-
-    fastdom.mutate(update);
-};
-
-const toggleDropdown = (menuAndTriggerEls: MenuAndTriggerEls): void => {
-    const documentElement = document.documentElement;
-    const globalOpenClass = 'dropdown--open';
-    const openClass = 'dropdown-menu--open';
-
-    fastdom
-        .measure(() => menuAndTriggerEls)
-        .then(els => {
-            const { menu, trigger } = els;
-
-            if (!menu) {
-                return;
-            }
-
-            const isOpen = menu.classList.contains(openClass);
-            const expandedAttr = isOpen ? 'false' : 'true';
-            const hiddenAttr = isOpen ? 'true' : 'false';
-
-            return fastdom.mutate(() => {
-                if (trigger) {
-                    trigger.setAttribute('aria-expanded', expandedAttr);
-                }
-
-                menu.setAttribute('aria-hidden', hiddenAttr);
-                menu.classList.toggle(openClass, !isOpen);
-
-                if (documentElement) {
-                    documentElement.classList.toggle(globalOpenClass, !isOpen);
-                }
-
-                if (!isOpen && document.body) {
-                    // Prevents menu from being disconnected with trigger
-                    (document.documentElement || document.body).scrollTop = 0;
-
-                    const menuId = menu.getAttribute('id');
-                    const triggerToggle = clickSpec => {
-                        const elem = clickSpec ? clickSpec.target : null;
-                        if (elem !== menu) {
-                            toggleDropdown(menuAndTriggerEls);
-
-                            // remove event listener when the dropdown closes
-                            if (menuId) {
-                                removeClickstreamListener(menuId);
-                            }
-                        }
-                    };
-                    // if anywhere outside the menu is clicked the dropdown will close
-                    registerClickstreamListener(menuId, triggerToggle);
-                }
-            });
-        });
-};
-
-const returnFocusToButton = (btnId: string): void => {
-    fastdom
-        .measure(() => document.getElementById(btnId))
-        .then(btn => {
-            if (btn) {
-                btn.focus();
-                /**
-                 * As we're closing the menu with the ESC key we no longer need the
-                 * clickstream listener that toggles the menu on a click outside the menu
-                 * so let's unregister it here
-                 * */
-                const menuId = btn.getAttribute('aria-controls');
-                if (menuId) {
-                    removeClickstreamListener(menuId);
-                }
-            }
-        });
-};
-
-const genericToggleMenu = (
-    menuClassName: string,
-    triggerClassName: string
-): void => {
-    const menu: ?HTMLElement = document.querySelector(menuClassName);
-
-    const trigger: ?HTMLElement = document.querySelector(triggerClassName);
-
-    if (menu && trigger) {
-        toggleDropdown({
-            menu,
-            trigger,
-        });
-    }
-};
-
-const toggleEditionPicker = () =>
-    genericToggleMenu(
-        '.js-edition-dropdown-menu',
-        '.js-edition-picker-trigger'
-    );
-
-const toggleMyAccountMenu = () =>
-    genericToggleMenu(
-        '.js-user-account-dropdown-menu',
-        '.js-user-account-trigger'
-    );
-
-const buttonClickHandlers = {
-    [MENU_TOGGLE_ID]: toggleMenu,
-    [EDITION_PICKER_TOGGLE_ID]: toggleEditionPicker,
-    [MY_ACCOUNT_ID]: toggleMyAccountMenu,
-};
-
-const menuKeyHandlers = {
-    [MENU_TOGGLE_ID]: (event: KeyboardEvent): void => {
-        if (event.key === 'Escape') {
-            toggleMenu();
-            returnFocusToButton(MENU_TOGGLE_ID);
-        }
-    },
-    [EDITION_PICKER_TOGGLE_ID]: (event: KeyboardEvent): void => {
-        if (event.key === 'Escape') {
-            toggleEditionPicker();
-            returnFocusToButton(EDITION_PICKER_TOGGLE_ID);
-        }
-    },
-    [MY_ACCOUNT_ID]: (event: KeyboardEvent): void => {
-        if (event.key === 'Escape') {
-            toggleMyAccountMenu();
-            returnFocusToButton(MY_ACCOUNT_ID);
-        }
-    },
-};
-
-const enhanceCheckbox = (checkbox: HTMLElement): void => {
-    fastdom.measure(() => {
-        const button = document.createElement('button');
-        const checkboxId = checkbox.id;
-        const checkboxControls = checkbox.getAttribute('aria-controls');
-        const dataLinkName = checkbox.getAttribute('data-link-name');
-        const label: ?HTMLElement = document.querySelector(
-            `label[for='${checkboxId}']`
-        );
-
-        const enhance = () => {
-            button.setAttribute('id', checkboxId);
-
-            const clickHandler = buttonClickHandlers[checkboxId];
-
-            if (clickHandler) {
-                button.addEventListener('click', clickHandler);
-            }
-
-            button.setAttribute('aria-expanded', 'false');
-
-            if (dataLinkName) {
-                button.setAttribute('data-link-name', dataLinkName);
-            }
-
-            if (checkboxControls) {
-                button.setAttribute('aria-controls', checkboxControls);
-
-                const menu = document.getElementById(checkboxControls);
-                const keyHandler = menuKeyHandlers[checkboxId];
-
-                if (menu && keyHandler) {
-                    menu.addEventListener('keyup', keyHandler);
-                }
-            }
-
-            if (label) {
-                label.classList.forEach(className => {
-                    button.classList.add(className);
-                });
-
-                button.classList.add(`${checkboxId}-button`);
-
-                const labelTabIndex = label.getAttribute('tabindex');
-
-                if (labelTabIndex) {
-                    button.setAttribute('tabindex', labelTabIndex);
-                }
-
-                button.innerHTML = label.innerHTML;
-
-                label.remove();
-            }
-
-            if (checkbox.parentNode) {
-                checkbox.parentNode.replaceChild(button, checkbox);
-            }
-
-            enhanced[button.id] = true;
-        };
-
-        fastdom.mutate(enhance);
-    });
-};
-
-const enhanceMenuToggles = (): void => {
-    const checkboxs: Array<HTMLInputElement> = (Array.from(
-        document.getElementsByClassName('js-enhance-checkbox')
-    ): Array<any>);
-
-    checkboxs.forEach(checkbox => {
-        if (!enhanced[checkbox.id] && !checkbox.checked) {
-            enhanceCheckbox(checkbox);
-        } else {
-            const closeMenuHandler = (): void => {
-                enhanceCheckbox(checkbox);
-                checkbox.removeEventListener('click', closeMenuHandler);
-            };
-
-            checkbox.addEventListener('click', closeMenuHandler);
-        }
-    });
-};
-
-const getRecentSearch = (): ?string => storage.local.get(SEARCH_STORAGE_KEY);
-
-const clearRecentSearch = (): void => storage.local.remove(SEARCH_STORAGE_KEY);
-
-const trackRecentSearch = (): void => {
-    const recent = getRecentSearch();
-
-    if (recent) {
-        ophan.record({
-            component: 'new-header-search',
-            value: recent,
-        });
-
-        clearRecentSearch();
-    }
-};
-
-const saveSearchTerm = (term: string) => storage.local.set(SEARCH_STORAGE_KEY, term);
-
-const showMoreButton = (): void => {
-    fastdom
-        .measure(() => {
-            const moreButton = document.querySelector('.js-show-more-button');
-            const subnav = document.querySelector('.js-expand-subnav');
-            const subnavList = document.querySelector(
-                '.js-get-last-child-subnav'
-            );
-
-            if (subnav && subnavList) {
-                const subnavItems = subnavList.querySelectorAll('li');
-                const lastChild = subnavItems[subnavItems.length - 1];
-
-                const lastChildRect = lastChild.getBoundingClientRect();
-                const subnavRect = subnav.getBoundingClientRect();
-
-                return { moreButton, lastChildRect, subnavRect };
-            }
-        })
-        .then(
-            (els: {
-                moreButton: ?HTMLElement,
-                lastChildRect: ClientRect,
-                subnavRect: ClientRect,
-            }) => {
-                if (els) {
-                    const { moreButton, lastChildRect, subnavRect } = els;
-
-                    // +1 to compensate for the border top on the subnav
-                    if (subnavRect.top + 1 === lastChildRect.top) {
-                        fastdom.mutate(() => {
-                            if (moreButton) {
-                                moreButton.classList.add('is-hidden');
-                            }
-                        });
-                    }
-                }
-            }
-        );
-};
-
-const toggleSubnavSections = (moreButton: HTMLElement): void => {
-    fastdom
-        .measure(() => document.querySelector('.js-expand-subnav'))
-        .then(subnav => {
-            if (subnav) {
-                fastdom.mutate(() => {
-                    const isOpen = subnav.classList.contains(
-                        'subnav--expanded'
-                    );
-
-                    subnav.classList.toggle('subnav--expanded');
-
-                    moreButton.innerText = isOpen ? 'More' : 'Less';
-                });
-            }
-        });
-};
-
-const addEventHandler = (): void => {
-    const menu = getMenu();
-    const search = menu && menu.querySelector('.js-menu-search');
-    const toggleWithMoreButton = document.querySelector(
-        '.js-toggle-more-sections'
-    );
-
-    if (menu) {
-        menu.addEventListener('click', (event: Event) => {
-            const selector = '.js-navigation-toggle';
-            const target: HTMLElement = (event.target: any);
-
-            if (target.matches(selector)) {
-                const parent: HTMLElement = (target.parentNode: any);
-
-                if (parent) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    toggleMenuSection(parent);
-                }
-            }
-        });
-    }
-
-    if (search) {
-        search.addEventListener('submit', (event: Event) => {
-            const target = (event.target: any).querySelector(
-                '.js-menu-search-term'
-            );
-
-            if (target) {
-                const term = target.value;
-                saveSearchTerm(term);
-            }
-        });
-    }
-
-    if (toggleWithMoreButton) {
-        toggleWithMoreButton.addEventListener('click', () => {
-            toggleSubnavSections(toggleWithMoreButton);
-        });
-    }
-};
-
-export const newHeaderInit = (): void => {
-    enhanceMenuToggles();
-    showMoreButton();
-    addEventHandler();
-    showMyAccountIfNecessary();
-    closeAllMenuSections();
-    trackRecentSearch();
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/profile.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/profile.js
deleted file mode 100644
index af6f722b796..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/profile.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/profile.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import { getUserFromCookie } from 'common/modules/identity/api';
-
-const CONFIG = {
-    classes: {
-        container: 'js-profile-nav',
-        content: 'js-profile-info',
-        popup: 'js-profile-popup',
-        register: 'js-profile-register',
-        commentActivity: 'js-comment-activity',
-        action: 'brand-bar__item--action',
-    },
-};
-
-class Profile {
-    dom: {
-        [key: string]: ?HTMLElement,
-    };
-    opts: {
-        url: string,
-    };
-
-    constructor(options: Object): void {
-        const opts = {
-            url: 'https://profile.theguardian.com',
-        };
-
-        this.opts = Object.assign({}, opts, options);
-
-        this.dom = {};
-
-        if (document.body) {
-            this.dom.container = document.body.getElementsByClassName(
-                CONFIG.classes.container
-            )[0];
-
-            if (this.dom.container) {
-                this.dom.content = this.dom.container.getElementsByClassName(
-                    CONFIG.classes.content
-                )[0];
-            }
-        }
-
-        if (document.body) {
-            this.dom.popup = document.body.getElementsByClassName(
-                CONFIG.classes.popup
-            )[0];
-        }
-
-        if (document.body) {
-            this.dom.register = document.body.getElementsByClassName(
-                CONFIG.classes.register
-            )[0];
-        }
-
-        if (document.body) {
-            this.dom.commentActivity = document.body.getElementsByClassName(
-                CONFIG.classes.commentActivity
-            )[0];
-        }
-    }
-
-    init(): void {
-        // setFragmentFromCookie
-        const user = getUserFromCookie();
-        const $container = bonzo(this.dom.container);
-        const $content = bonzo(this.dom.content);
-        const $register = bonzo(this.dom.register);
-        const $commentActivity = bonzo(this.dom.commentActivity);
-        if (user) {
-            // Run this code only if we haven't already inserted
-            // the username in the header
-            if (!$container.hasClass('is-signed-in')) {
-                fastdom.mutate(() => {
-                    $content.text(user.displayName);
-                    $container.addClass('is-signed-in');
-                    $register.hide();
-                });
-            }
-            $commentActivity.removeClass('u-h');
-            $commentActivity.attr(
-                'href',
-                `${this.opts.url}/user/id/${user.id}`
-            );
-        }
-    }
-}
-
-export { Profile };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/search.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/search.js
deleted file mode 100644
index bcf2b98ad4e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/search.js
+++ /dev/null
@@ -1,256 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/search.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-import config from 'lib/config';
-
-// TODO refactor to singleton
-class Search {
-    gcsUrl: string;
-    resultSetSize: number;
-
-    constructor(): void {
-        fastdom
-            .measure(() =>
-                Array.from(document.getElementsByClassName('js-search-toggle'))
-            )
-            .then(toggles => {
-                const googleSearchSwitch = config.get('switches.googleSearch');
-                const googleSearchUrl = config.get('page.googleSearchUrl');
-                const googleSearchId = config.get('page.googleSearchId');
-
-                if (
-                    googleSearchSwitch &&
-                    googleSearchUrl &&
-                    googleSearchId &&
-                    toggles.length > 0
-                ) {
-                    this.gcsUrl = `${googleSearchUrl}?cx=${googleSearchId}`;
-                    this.resultSetSize =
-                        config.get('page.section') === 'identity' ? 3 : 10;
-
-                    toggles.forEach(toggle => {
-                        const popupClass = toggle.getAttribute('data-toggle');
-
-                        if (!popupClass) {
-                            return;
-                        }
-
-                        fastdom.mutate(() => {
-                            toggle.setAttribute('role', 'button');
-                            toggle.setAttribute(
-                                'aria-controls',
-                                'search-popup'
-                            );
-                            toggle.setAttribute('aria-haspopup', 'dialog');
-                        });
-
-                        fastdom
-                            .measure(
-                                () =>
-                                    document.getElementsByClassName(
-                                        popupClass
-                                    )[0]
-                            )
-                            .then(popup => {
-                                if (!popup) {
-                                    return;
-                                }
-
-                                bean.on(toggle, 'click', e => {
-                                    const handleEsc = (event: Event): void => {
-                                        const keyboardEvent: KeyboardEvent = (event: any);
-
-                                        if (keyboardEvent.key === 'Escape') {
-                                            // eslint-disable-next-line no-use-before-define
-                                            dismissSearchPopup(keyboardEvent);
-                                            toggle.focus();
-                                        }
-                                    };
-                                    const dismissSearchPopup = (
-                                        event: Event
-                                    ): void => {
-                                        event.preventDefault();
-                                        toggle.classList.remove('is-active');
-                                        popup.classList.add('is-off');
-
-                                        bean.off(
-                                            document,
-                                            'click',
-                                            // eslint-disable-next-line no-use-before-define
-                                            maybeDismissSearchPopup
-                                        );
-                                        document.removeEventListener(
-                                            'keyup',
-                                            handleEsc
-                                        );
-                                    };
-                                    const maybeDismissSearchPopup = (
-                                        event: Event
-                                    ): void => {
-                                        let el: ?Element = (event.target: any);
-                                        let clickedPop = false;
-
-                                        while (el && !clickedPop) {
-                                            /*  either the search pop-up or the autocomplete resultSetSize
-                                                NOTE: it would be better to check for `.gssb_c`,
-                                                 which is the outer autocomplete element, but
-                                                 google stops the event bubbling earlier
-                                            */
-                                            if (
-                                                el &&
-                                                el.classList &&
-                                                (el.classList.contains(
-                                                    popupClass
-                                                ) ||
-                                                    el.classList.contains(
-                                                        'gsq_a'
-                                                    ))
-                                            ) {
-                                                clickedPop = true;
-                                            }
-
-                                            el = el && el.parentElement;
-                                        }
-
-                                        if (!clickedPop) {
-                                            dismissSearchPopup(event);
-                                        }
-                                    };
-
-                                    setTimeout(() => {
-                                        if (
-                                            toggle.classList.contains(
-                                                'is-active'
-                                            )
-                                        ) {
-                                            popup.focus();
-                                            bean.on(
-                                                document,
-                                                'click',
-                                                maybeDismissSearchPopup
-                                            );
-                                            document.addEventListener(
-                                                'keyup',
-                                                handleEsc
-                                            );
-                                        }
-                                    });
-
-                                    this.load(popup);
-
-                                    // Make sure search is always in the correct state
-                                    e.preventDefault();
-                                });
-                            });
-                    });
-                }
-            });
-    }
-
-    load(popup: HTMLElement): void {
-        let s;
-        let x;
-
-        fastdom
-            .measure(() => ({
-                allSearchPlaceholders: Array.from(
-                    document.getElementsByClassName('js-search-placeholder')
-                ),
-                searchPlaceholder: popup.getElementsByClassName(
-                    'js-search-placeholder'
-                )[0],
-            }))
-            .then(els => {
-                const { allSearchPlaceholders, searchPlaceholder } = els;
-
-                if (!searchPlaceholder) {
-                    return;
-                }
-
-                // Unload any search placeholders elsewhere in the DOM
-                allSearchPlaceholders.forEach(c => {
-                    if (c !== searchPlaceholder) {
-                        fastdom.mutate(() => {
-                            c.innerHTML = '';
-                        });
-                    }
-                });
-
-                // Load the Google search monolith, if not already present in this context.
-                // We have to re-run their script each time we do this.
-                if (!searchPlaceholder.innerHTML) {
-                    fastdom.mutate(() => {
-                        if (searchPlaceholder) {
-                            searchPlaceholder.innerHTML = `<div class="search-box" role="search">
-                            <gcse:searchbox></gcse:searchbox>
-                            </div>
-                            <div class="search-results" data-link-name="search">
-                            <gcse:searchresults webSearchResultSetSize="'}${
-                                this.resultSetSize
-                            }" linkTarget="_self"></gcse:searchresults>
-                            </div>`;
-                        }
-                    });
-
-                    bean.on(searchPlaceholder, 'keydown', '.gsc-input', () => {
-                        fastdom.measure(() => {
-                            const $autoCompleteObject = $('.gssb_c');
-                            const searchFromTop = $autoCompleteObject.css(
-                                'top'
-                            );
-                            const windowOffset = $(window).scrollTop();
-
-                            fastdom.mutate(() => {
-                                $autoCompleteObject.css({
-                                    top:
-                                        parseInt(searchFromTop, 10) +
-                                        windowOffset,
-                                    'z-index': '1030',
-                                });
-                            });
-                        });
-                    });
-
-                    bean.on(
-                        searchPlaceholder,
-                        'click',
-                        '.search-results',
-                        e => {
-                            const targetEl = e.target;
-
-                            if (targetEl.nodeName.toLowerCase() === 'a') {
-                                targetEl.target = '_self';
-                            }
-                        }
-                    );
-
-                    s = document.createElement('script');
-                    s.async = true;
-                    s.src = this.gcsUrl;
-                    x = document.getElementsByTagName('script')[0];
-
-                    fastdom.mutate(() => {
-                        if (x.parentNode) {
-                            x.parentNode.insertBefore(s, x);
-                        }
-                    });
-                }
-            });
-    }
-}
-
-export { Search };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/navigation/user-account.js b/static/src/javascripts.flow.archive/projects/common/modules/navigation/user-account.js
deleted file mode 100644
index e7afd53c40c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/navigation/user-account.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/navigation/user-account.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import { getUserFromCookie, isUserLoggedIn } from 'common/modules/identity/api';
-
-const updateCommentLink = (commentItems): void => {
-    const user = getUserFromCookie();
-
-    if (user) {
-        commentItems.forEach(commentItem => {
-            fastdom
-                .measure(() =>
-                    commentItem.querySelector('.js-add-comment-activity-link')
-                )
-                .then(commentLink =>
-                    fastdom.mutate(() => {
-                        commentItem.classList.remove('u-h');
-                        commentLink.setAttribute(
-                            'href',
-                            `https://profile.theguardian.com/user/id/${user.id}`
-                        );
-                    })
-                );
-        });
-    }
-};
-
-const showMyAccountIfNecessary = (): void => {
-    if (!isUserLoggedIn()) {
-        return;
-    }
-
-    fastdom
-        .measure(() => ({
-            signIns: Array.from(
-                document.querySelectorAll('.js-navigation-sign-in')
-            ),
-            accountActionsLists: Array.from(
-                document.querySelectorAll('.js-navigation-account-actions')
-            ),
-            commentItems: Array.from(
-                document.querySelectorAll('.js-show-comment-activity')
-            ),
-        }))
-        .then(els => {
-            const { signIns, accountActionsLists, commentItems } = els;
-            return fastdom
-                .mutate(() => {
-                    signIns.forEach(signIn => {
-                        signIn.remove();
-                    });
-                    accountActionsLists.forEach(accountActions => {
-                        accountActions.classList.remove('is-hidden');
-                    });
-
-                    Array.from(
-                        document.querySelectorAll('.js-user-account-trigger')
-                    ).forEach(accountTrigger => {
-                        accountTrigger.classList.remove('is-hidden');
-                    });
-                })
-                .then(() => {
-                    updateCommentLink(commentItems);
-                });
-        });
-};
-
-export { showMyAccountIfNecessary };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/geo-most-popular.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/geo-most-popular.js
deleted file mode 100644
index 41d337987f9..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/geo-most-popular.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/geo-most-popular.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: geo-most-popular.js
- Description: Shows popular trails for a given country.
- */
-import qwery from 'qwery';
-import fastdom from 'lib/fastdom-promise';
-import { Component } from 'common/modules/component';
-import mediator from 'lib/mediator';
-import once from 'lodash/once';
-
-const promise: Promise<void> = new Promise((resolve, reject) => {
-    mediator.on('modules:onward:geo-most-popular:ready', resolve);
-    mediator.on('modules:onward:geo-most-popular:cancel', resolve);
-    mediator.on('modules:onward:geo-most-popular:error', reject);
-});
-
-class GeoMostPopular extends Component {
-    static error(error: Error): void {
-        mediator.emit('modules:onward:geo-most-popular:error', error);
-    }
-
-    constructor(): void {
-        super();
-
-        this.endpoint = '/most-read-geo.json';
-
-        mediator.emit('register:begin', 'geo-most-popular');
-    }
-
-    ready(): void {
-        mediator.emit('register:end', 'geo-most-popular');
-        mediator.emit('modules:onward:geo-most-popular:ready', this);
-    }
-}
-
-// we don't want to show most popular on short articles as the sticky right mpu slot will push most popular behind other containers at the bottom.
-const showMostPopularThreshold = 1500;
-
-const fetchMostPopular = (articleBodyHeight: number): void => {
-    if (articleBodyHeight > showMostPopularThreshold) {
-        new GeoMostPopular().fetch(
-            qwery('.js-components-container'),
-            'rightHtml'
-        );
-    }
-};
-
-const geoMostPopular = {
-    render: once(
-        (): Promise<void> => {
-            fastdom
-                .measure(() => {
-                    const jsArticleBodyElement = document.querySelector(
-                        '.js-article__body'
-                    );
-                    return jsArticleBodyElement
-                        ? jsArticleBodyElement.getBoundingClientRect() &&
-                              jsArticleBodyElement.getBoundingClientRect()
-                                  .height
-                        : 0;
-                })
-                .then(fetchMostPopular);
-
-            return promise;
-        }
-    ),
-
-    whenRendered: promise,
-};
-
-export { geoMostPopular };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/history.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/history.js
deleted file mode 100644
index 3a7d3818ef2..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/history.js
+++ /dev/null
@@ -1,605 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/history.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: history.js
- Description: Gets and sets users reading history
- */
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import { storage } from '@guardian/libs';
-import { getPath } from 'lib/url';
-import isObject from 'lodash/isObject';
-
-import type { bonzo } from 'bonzo';
-import {getCookie} from "lib/cookies";
-import { ARTICLES_VIEWED_OPT_OUT_COOKIE } from "common/modules/commercial/user-features";
-
-const editions = ['uk', 'us', 'au'];
-
-const editionalised = [
-    'business',
-    'commentisfree',
-    'culture',
-    'environment',
-    'media',
-    'money',
-    'sport',
-    'technology',
-];
-
-const pageMeta = [
-    {
-        tid: 'section',
-        tname: 'sectionName',
-    },
-    {
-        tid: 'keywordIds',
-        tname: 'keywords',
-    },
-    {
-        tid: 'seriesId',
-        tname: 'series',
-    },
-    {
-        tid: 'authorIds',
-        tname: 'author',
-    },
-];
-
-const buckets = [
-    {
-        type: 'content',
-        indexInRecord: 1,
-    },
-    {
-        type: 'front',
-        indexInRecord: 2,
-    },
-];
-
-const getMondayFromDate = (date: Date) => {
-    const day = date.getDay() || 7;
-    // Do not set date to Monday if it is already Monday
-    if (day !== 1) {
-        date.setHours(-24 * (day - 1));
-    }
-    return Math.floor(date.getTime() / 86400000);
-};
-
-const summaryPeriodDays = 90;
-const forgetUniquesAfter = 10;
-const historySize = 50;
-const storageKeyHistory = 'gu.history';
-const storageKeySummary = 'gu.history.summary';
-const storageKeyDailyArticleCount = 'gu.history.dailyArticleCount'; // Array containing an article count for each day
-const storageKeyWeeklyArticleCount = 'gu.history.weeklyArticleCount';
-
-const today = Math.floor(Date.now() / 86400000); // 1 day in ms
-const startOfThisWeek = getMondayFromDate(new Date());
-
-let historyCache: ?Array<Array<any>>;
-let summaryCache: ?Object;
-let popularFilteredCache: ?Array<Array<any>>;
-let topNavItemsCache: ?Array<string>;
-let inMegaNav: boolean = false;
-
-const saveHistory = (history: Array<Array<any>>): void => {
-    historyCache = history;
-    storage.local.set(storageKeyHistory, history);
-};
-
-const saveSummary = (summary: Object): void => {
-    summaryCache = summary;
-    storage.local.set(storageKeySummary, summary);
-};
-
-const getHistory = (): Array<Array<any>> => {
-    historyCache = historyCache || storage.local.get(storageKeyHistory) || [];
-    return historyCache;
-};
-
-const getSummary = (): Object => {
-    if (!summaryCache) {
-        summaryCache = storage.local.get(storageKeySummary);
-
-        if (
-            !isObject(summaryCache) ||
-            !isObject(summaryCache.tags) ||
-            typeof summaryCache.periodEnd !== 'number'
-        ) {
-            summaryCache = {
-                periodEnd: today,
-                tags: {},
-                showInMegaNav: true,
-            };
-        }
-    }
-    return summaryCache;
-};
-
-const seriesSummary = (): Object => {
-    const views = item => item.reduce((acc, val) => acc + val[1], 0);
-    const summaryTags = getSummary().tags;
-
-    const seriesTags = Object.keys(summaryTags).reduce((acc, val) => {
-        if (val.includes('series')) {
-            acc[val] = summaryTags[val];
-        }
-
-        return acc;
-    }, {});
-
-    const seriesTagsSummary = Object.keys(seriesTags).reduce((acc, val) => {
-        const tag = seriesTags[val];
-
-        acc[val] = views(tag[1]) + views(tag[2]);
-
-        return acc;
-    }, {});
-
-    return seriesTagsSummary;
-};
-
-const mostViewedSeries = (): string => {
-    const summary = seriesSummary();
-
-    return Object.keys(summary).reduce(
-        (topSeries, currentSeries) =>
-            summary[topSeries] > summary[currentSeries]
-                ? topSeries
-                : currentSeries,
-        ''
-    );
-};
-
-const deleteFromSummary = (tag: string): void => {
-    const summary = getSummary();
-
-    delete summary.tags[tag];
-    saveSummary(summary);
-};
-
-const isRevisit = (pageId: string): boolean => {
-    const visited = getHistory().find(page => page[0] === pageId);
-
-    return !!(visited && visited[1] > 1);
-};
-
-const pruneSummary = (summary: Object, newToday: number = today) => {
-    const updateBy = newToday - summary.periodEnd;
-
-    if (updateBy !== 0) {
-        summary.periodEnd = newToday;
-
-        Object.keys(summary.tags).forEach(tid => {
-            const record = summary.tags[tid];
-
-            const result = buckets.map(bucket => {
-                if (record[bucket.indexInRecord]) {
-                    const visits = record[bucket.indexInRecord]
-                        .map(day => {
-                            const newAge = day[0] + updateBy;
-                            return newAge < summaryPeriodDays && newAge >= 0
-                                ? [newAge, day[1]]
-                                : false;
-                        })
-                        .filter(Boolean);
-
-                    return visits.length > 1 ||
-                        (visits.length === 1 &&
-                            visits[0][0] < forgetUniquesAfter)
-                        ? visits
-                        : [];
-                }
-
-                return [];
-            });
-
-            if (result.some(r => r.length)) {
-                summary.tags[tid] = [record[0]].concat(result);
-            } else {
-                delete summary.tags[tid];
-            }
-        });
-    }
-
-    return summary;
-};
-
-const tally = (
-    visits: Array<Array<number>>,
-    weight: number = 1,
-    minimum: number = 1
-): number => {
-    let totalVisits = 0;
-
-    const result = visits.reduce((t, day) => {
-        const dayOffset = day[0];
-        const dayVisits = day[1];
-
-        totalVisits += dayVisits;
-        return t + weight * (9 + dayVisits) * (summaryPeriodDays - dayOffset);
-    }, 0);
-
-    return totalVisits < minimum ? 0 : result;
-};
-
-const getPopular = (opts: ?Object): Array<Array<string>> => {
-    const tags = getSummary().tags;
-    let tids = Object.keys(tags);
-
-    const op = Object.assign(
-        {},
-        {
-            number: 100,
-            weights: {},
-            thresholds: {},
-        },
-        opts
-    );
-
-    if (op.whitelist) {
-        tids = tids.filter(tid => op.whitelist.includes(tid));
-    }
-
-    if (op.blacklist) {
-        tids = tids.filter(tid => !op.blacklist.includes(tid));
-    }
-
-    return tids
-        .map(tid => {
-            const record = tags[tid];
-            const rank = buckets.reduce(
-                (r, bucket) =>
-                    r +
-                    tally(
-                        record[bucket.indexInRecord],
-                        op.weights[bucket.type],
-                        op.thresholds[bucket.type]
-                    ),
-                0
-            );
-
-            return {
-                idAndName: [tid, record[0]],
-                rank,
-            };
-        })
-        .filter(Boolean)
-        .sort((a, b) => a.rank - b.rank)
-        .slice(-op.number)
-        .map(tid => tid.idAndName)
-        .reverse();
-};
-
-const getContributors = (): Array<any> => {
-    const contibutors = [];
-    const tags = getSummary().tags;
-
-    Object.keys(tags).forEach(tagId => {
-        if (tagId.startsWith('profile/')) {
-            contibutors.push(tags[tagId]);
-        }
-    });
-
-    return contibutors;
-};
-
-const collapsePath = (path: string): string => {
-    const isEditionalisedRx = new RegExp(
-        `^(${editions.join('|')})/(${editionalised.join('|')})$`
-    );
-    const stripEditionRx = new RegExp(`^(${editions.join('|')})/`);
-
-    if (path) {
-        let newPath = path.replace(/^\/|\/$/g, '');
-
-        if (newPath.match(isEditionalisedRx)) {
-            newPath = newPath.replace(stripEditionRx, '');
-        }
-
-        const newPathSplit = newPath.split('/');
-
-        if (newPathSplit.length === 2 && newPathSplit[0] === newPathSplit[1]) {
-            newPath = [newPathSplit[0]].join('/');
-        }
-
-        return newPath;
-    }
-
-    return '';
-};
-
-const getTopNavItems = (): Array<string> => {
-    topNavItemsCache =
-        topNavItemsCache ||
-        $('.js-navigation-header .js-top-navigation a').map(item =>
-            collapsePath(getPath($(item).attr('href')))
-        );
-
-    return topNavItemsCache;
-};
-
-const getPopularFiltered = (opts?: Object): Array<Array<any>> => {
-    const flush = opts && opts.flush;
-
-    popularFilteredCache =
-        (!flush && popularFilteredCache) ||
-        getPopular({
-            blacklist: getTopNavItems(),
-            number: 10,
-            weights: {
-                content: 1,
-                front: 5,
-            },
-            thresholds: {
-                content: 5,
-                front: 1,
-            },
-        });
-
-    return popularFilteredCache;
-};
-
-const firstCsv = (str: string): string => (str || '').split(',')[0];
-
-const reset = (): void => {
-    historyCache = undefined;
-    summaryCache = undefined;
-    storage.local.remove(storageKeyHistory);
-    storage.local.remove(storageKeySummary);
-    storage.local.remove(storageKeyDailyArticleCount);
-};
-
-const logHistory = (pageConfig: Object): void => {
-    const { pageId } = pageConfig;
-    let history;
-    let foundCount = 0;
-
-    if (!pageConfig.isFront) {
-        history = getHistory().filter(item => {
-            const isArr = Array.isArray(item);
-            const found = isArr && item[0] === pageId;
-
-            foundCount = found ? item[1] : foundCount;
-            return isArr && !found;
-        });
-
-        history.unshift([pageId, foundCount + 1]);
-
-        saveHistory(history.slice(0, historySize));
-    }
-};
-
-const logSummary = (pageConfig: Object, mockToday?: number): void => {
-    const summary = pruneSummary(getSummary(), mockToday);
-    const page = collapsePath(pageConfig.pageId);
-    let isFront = false;
-
-    const meta = pageMeta.reduceRight((tagMeta, tag) => {
-        const tid = collapsePath(firstCsv(pageConfig[tag.tid]));
-        const tname = tid && firstCsv(pageConfig[tag.tname]);
-
-        if (tid && tname) {
-            tagMeta[tid] = tname;
-        }
-        isFront = isFront || tid === page;
-        return tagMeta;
-    }, {});
-
-    Object.keys(meta).forEach(tid => {
-        const tname = meta[tid];
-        const record = summary.tags[tid] || [];
-
-        buckets.forEach(bucket => {
-            record[bucket.indexInRecord] = record[bucket.indexInRecord] || [];
-        });
-
-        record[0] = tname;
-
-        const visits = record[isFront ? 2 : 1];
-        const todaysVisits = visits.find(day => day[0] === 0);
-
-        if (todaysVisits) {
-            todaysVisits[1] += 1;
-        } else {
-            visits.unshift([0, 1]);
-        }
-
-        summary.tags[tid] = record;
-    });
-
-    saveSummary(summary);
-};
-
-const getMegaNav = (): bonzo => $('.js-global-navigation');
-
-const removeFromMegaNav = (): void => {
-    getMegaNav().each(megaNav => {
-        fastdom.mutate(() => {
-            $('.js-global-navigation__section--history', megaNav).remove();
-        });
-    });
-    inMegaNav = false;
-};
-
-const tagHtml = (
-    tag: Array<string>,
-    index: number
-): string => `<li class="inline-list__item">
-        <a href="/${
-            tag[0]
-        }" class="button button--small button--tag button--secondary" data-link-name="${index +
-    1} | ${tag[1]}">${tag[1]}</a>
-    </li>`;
-
-const showInMegaNav = (): void => {
-    let tagsHTML;
-
-    if (getSummary().showInMegaNav === false) {
-        return;
-    }
-
-    if (inMegaNav) {
-        removeFromMegaNav();
-    }
-
-    const tags = getPopularFiltered();
-
-    if (tags.length) {
-        tagsHTML = `<li class="global-navigation__section js-global-navigation__section--history" data-link-name="shortcuts">
-                        <span class="global-navigation__title global-navigation__title--history">recently visited</span>
-                        <ul class="global-navigation__children global-navigation__children--history">
-                            ${tags.map(tagHtml).join('')}
-                            <a class="button button--small button--tag button--tertiary" href="/preferences" data-link-name="edit">edit these</a>
-                        </ul>
-                    </li>`;
-        fastdom.mutate(() => {
-            getMegaNav().prepend(tagsHTML);
-        });
-        inMegaNav = true;
-    }
-};
-
-const showInMegaNavEnabled = (): boolean =>
-    getSummary().showInMegaNav !== false;
-
-const showInMegaNavEnable = (bool: boolean): void => {
-    const summary = getSummary();
-
-    summary.showInMegaNav = bool;
-
-    if (summary.showInMegaNav) {
-        showInMegaNav();
-    } else {
-        removeFromMegaNav();
-    }
-
-    saveSummary(summary);
-};
-
-const incrementDailyArticleCount = (pageConfig: Object): void => {
-    if (!pageConfig.isFront && !getCookie(ARTICLES_VIEWED_OPT_OUT_COOKIE.name)) {
-        const dailyCount = storage.local.get(storageKeyDailyArticleCount) || [];
-
-        if (dailyCount[0] && dailyCount[0].day && dailyCount[0].day === today) {
-            dailyCount[0].count += 1;
-        } else {
-            // New day
-            dailyCount.unshift({ day: today, count: 1 });
-
-            // Remove any days older than 60
-            const cutOff = today - 60;
-            const firstOldDayIndex = dailyCount.findIndex(
-                c => c.day && c.day < cutOff
-            );
-            if (firstOldDayIndex > 0) {
-                dailyCount.splice(firstOldDayIndex);
-            }
-        }
-
-        storage.local.set(storageKeyDailyArticleCount, dailyCount);
-    }
-};
-
-const incrementWeeklyArticleCount = (pageConfig: Object): void => {
-    if (!pageConfig.isFront && !getCookie(ARTICLES_VIEWED_OPT_OUT_COOKIE.name)) {
-        const weeklyArticleCount =
-            storage.local.get(storageKeyWeeklyArticleCount) || [];
-        if (
-            weeklyArticleCount[0] &&
-            weeklyArticleCount[0].week &&
-            weeklyArticleCount[0].week === startOfThisWeek
-        ) {
-            weeklyArticleCount[0].count += 1;
-        } else {
-            // New day
-            weeklyArticleCount.unshift({
-                week: startOfThisWeek,
-                count: 1,
-            });
-
-            // Remove any weeks older than a year
-            const cutOff = startOfThisWeek - 365;
-            const firstOldWeekIndex = weeklyArticleCount.findIndex(
-                c => c.week && c.week < cutOff
-            );
-            if (firstOldWeekIndex > 0) {
-                weeklyArticleCount.splice(firstOldWeekIndex);
-            }
-        }
-
-        storage.local.set(storageKeyWeeklyArticleCount, weeklyArticleCount);
-    }
-};
-
-const getArticleViewCountForDays = (days: number): number => {
-    const dailyCount = storage.local.get(storageKeyDailyArticleCount) || [];
-    const cutOff = today - days;
-
-    const firstOldDayIndex = dailyCount.findIndex(
-        c => c.day && c.day <= cutOff
-    );
-    const dailyCountWindow =
-        firstOldDayIndex >= 0
-            ? dailyCount.slice(0, firstOldDayIndex)
-            : dailyCount;
-
-    return dailyCountWindow.reduce((acc, current) => current.count + acc, 0);
-};
-
-const getArticleViewCountForWeeks = (weeks: number): number => {
-    const weeklyCount = storage.local.get(storageKeyWeeklyArticleCount) || [];
-    const cutOff = startOfThisWeek - weeks * 7;
-
-    const firstOldWeekIndex = weeklyCount.findIndex(
-        c => c.week && c.week <= cutOff
-    );
-    const weeklyCountWindow =
-        firstOldWeekIndex >= 0
-            ? weeklyCount.slice(0, firstOldWeekIndex)
-            : weeklyCount;
-
-    return weeklyCountWindow.reduce((acc, current) => current.count + acc, 0);
-};
-
-export {
-    logHistory,
-    logSummary,
-    showInMegaNav,
-    showInMegaNavEnable,
-    showInMegaNavEnabled,
-    getPopular,
-    getPopularFiltered,
-    getContributors,
-    deleteFromSummary,
-    isRevisit,
-    reset,
-    seriesSummary,
-    mostViewedSeries,
-    incrementDailyArticleCount,
-    incrementWeeklyArticleCount,
-    getArticleViewCountForDays,
-    getArticleViewCountForWeeks,
-    getMondayFromDate,
-    storageKeyDailyArticleCount,
-    storageKeyWeeklyArticleCount,
-};
-
-export const _ = {
-    getSummary,
-    getHistory,
-    pruneSummary,
-    collapsePath,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/history.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/history.spec.js
deleted file mode 100644
index ee654939612..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/history.spec.js
+++ /dev/null
@@ -1,490 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/history.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import Chance from 'chance';
-import {
-    logHistory,
-    logSummary,
-    showInMegaNavEnable,
-    getPopular,
-    getContributors,
-    isRevisit,
-    reset,
-    seriesSummary,
-    mostViewedSeries,
-    getArticleViewCountForDays,
-    _,
-    incrementDailyArticleCount,
-    getMondayFromDate,
-    getArticleViewCountForWeeks,
-    incrementWeeklyArticleCount,
-} from 'common/modules/onward/history';
-import { getCookie as getCookie_ } from 'lib/cookies';
-import { storage as storageStub } from '@guardian/libs';
-
-jest.mock('@guardian/libs', () => ({
-    storage: {
-        local: {
-            get: jest.fn(),
-            set: jest.fn(),
-            isAvailable: jest.fn(),
-            remove: jest.fn(),
-        },
-    }
-}));
-
-jest.mock('lib/url', () => ({
-    getPath: jest.fn(),
-}));
-
-jest.mock('fastdom');
-
-const getCookie: any = getCookie_;
-
-jest.mock('lib/cookies', () => ({
-    getCookie: jest.fn(),
-}));
-
-jest.mock('raven-js', () => ({
-    config() {
-        return this;
-    },
-    install() {
-        return this;
-    },
-    captureException: jest.fn(),
-}));
-
-const contains = [['/p/3kvgc', 1], ['/p/3kx8f', 1], ['/p/3kx7e', 1]];
-
-const today = Math.floor(Date.now() / 86400000); // 1 day in ms
-const startOfThisWeek = getMondayFromDate(new Date());
-
-const pageConfig = {
-    pageId: '/p/3jbcb',
-
-    section: 'foobar',
-    sectionName: 'Foobar Section',
-
-    keywordIds: 'foo/bar,baz/poo',
-    keywords: 'Foobar Tag,Bazpoo Tag',
-
-    seriesId: 'foo/series/bar',
-    series: 'Foobar Series',
-
-    authorIds: 'profile/finbarrsaunders,profile/rogermellie',
-    author: 'Finbarr Saunders, Roger Mellie',
-};
-
-const oftenVisited = {
-    pageId: '123',
-    section: 'often/visited',
-    sectionName: 'Often Visited Section',
-};
-
-const lessVisited = {
-    pageId: '456',
-    section: 'less/visited',
-    sectionName: 'Less Visited Section',
-};
-
-describe('history', () => {
-    let mockContains;
-    let mockSummary;
-    let mockDailyArticleCount;
-    let mockWeeklyArticleCount;
-
-    beforeEach(() => {
-        mockContains = contains;
-
-        storageStub.local.get.mockImplementation(key => {
-            if (key === 'gu.history') {
-                return mockContains;
-            } else if (key === 'gu.history.summary') {
-                return mockSummary;
-            } else if (key === 'gu.history.dailyArticleCount') {
-                return mockDailyArticleCount;
-            } else if (key === 'gu.history.weeklyArticleCount') {
-                return mockWeeklyArticleCount;
-            }
-        });
-
-        storageStub.local.set.mockImplementation((key, data) => {
-            if (key === 'gu.history') {
-                mockContains = data;
-            } else if (key === 'gu.history.summary') {
-                mockSummary = data;
-            } else if (key === 'gu.history.dailyArticleCount') {
-                mockDailyArticleCount = data;
-            } else if (key === 'gu.history.weeklyArticleCount') {
-                mockWeeklyArticleCount = data;
-            }
-        });
-    });
-
-    afterEach(() => {
-        reset();
-        mockSummary = {};
-    });
-
-    it('should get history from local storage', () => {
-        expect(_.getHistory()).toEqual(mockContains);
-    });
-
-    it('should set history to local storage', () => {
-        logHistory(pageConfig);
-
-        expect(_.getHistory()[0][0]).toEqual(pageConfig.pageId);
-    });
-
-    it('should set the count of entries', () => {
-        logHistory(pageConfig);
-        expect(_.getHistory()[0][1]).toEqual(1);
-
-        logHistory(pageConfig);
-        expect(_.getHistory()[0][1]).toEqual(2);
-    });
-
-    it('should be able to check a page revisit', () => {
-        logHistory(pageConfig);
-        expect(isRevisit(pageConfig.pageId)).toBeFalsy();
-
-        logHistory(pageConfig);
-        expect(isRevisit(pageConfig.pageId)).toBeTruthy();
-    });
-
-    it('should only store 50 latest entries', () => {
-        const chance = new Chance();
-        const max = [];
-
-        while (max.length < 50) {
-            max.push([chance.string(), 1]);
-        }
-
-        storageStub.local.set('gu.history', max);
-
-        logHistory(pageConfig);
-
-        expect(_.getHistory().length).toEqual(50);
-    });
-
-    it('should increment a count in the summary, for the 1st value from each of various page metadata', () => {
-        logSummary(pageConfig);
-
-        /* eslint-disable dot-notation */
-        expect(_.getSummary().tags['foobar'][0]).toEqual('Foobar Section');
-        expect(_.getSummary().tags['foobar'][1][0][1]).toEqual(1);
-        /* eslint-enable dot-notation */
-
-        expect(_.getSummary().tags['foo/bar'][0]).toEqual('Foobar Tag');
-        expect(_.getSummary().tags['foo/bar'][1][0][1]).toEqual(1);
-        expect(_.getSummary().tags['baz/poo']).toBeUndefined();
-
-        expect(_.getSummary().tags['foo/series/bar'][0]).toEqual(
-            'Foobar Series'
-        );
-        expect(_.getSummary().tags['foo/series/bar'][1][0][1]).toEqual(1);
-
-        expect(_.getSummary().tags['profile/finbarrsaunders'][0]).toEqual(
-            'Finbarr Saunders'
-        );
-        expect(_.getSummary().tags['profile/finbarrsaunders'][1][0][1]).toEqual(
-            1
-        );
-        expect(_.getSummary().tags['profile/rogermellie']).toBeUndefined();
-
-        logSummary(pageConfig);
-        logSummary(pageConfig);
-
-        /* eslint-disable dot-notation */
-        expect(_.getSummary().tags['foobar'][0]).toEqual('Foobar Section');
-        expect(_.getSummary().tags['foobar'][1][0][1]).toEqual(3);
-        /* eslint-enable dot-notation */
-    });
-
-    it('should age the data points in the the summary', () => {
-        /* eslint-disable dot-notation */
-        expect(
-            _.pruneSummary({
-                periodEnd: today,
-                tags: { foo: ['Foo', [[0, 1]]] },
-            }).tags['foo'][1][0][0]
-        ).toEqual(0);
-
-        expect(
-            _.pruneSummary({
-                periodEnd: today - 5,
-                tags: { foo: ['Foo', [[0, 1]]] },
-            }).tags['foo'][1][0][0]
-        ).toEqual(5);
-        /* eslint-enable dot-notation */
-    });
-
-    it('should drop the obsoleted data points from the summary', () => {
-        /* eslint-disable dot-notation */
-        expect(
-            _.pruneSummary({
-                periodEnd: today - 500,
-                tags: { foo: ['Foo', [[0, 1]]] },
-            }).tags['foo']
-        ).toBeUndefined();
-        /* eslint-enable dot-notation */
-    });
-
-    it('should return equally visited items in last-in-first-out order', () => {
-        logSummary(oftenVisited, today);
-        logSummary(lessVisited, today);
-
-        logSummary(oftenVisited, today + 1);
-        logSummary(lessVisited, today + 1);
-
-        logSummary(oftenVisited, today + 2);
-        logSummary(lessVisited, today + 2);
-
-        expect(getPopular()[0][0]).toEqual('less/visited');
-
-        expect(getPopular()[1][0]).toEqual('often/visited');
-    });
-
-    it('should return most visited items first', () => {
-        logSummary(oftenVisited, today);
-        logSummary(oftenVisited, today);
-        logSummary(lessVisited, today);
-
-        logSummary(oftenVisited, today + 1);
-        logSummary(lessVisited, today + 1);
-
-        logSummary(oftenVisited, today + 2);
-        logSummary(lessVisited, today + 2);
-
-        expect(getPopular()[0][0]).toEqual('often/visited');
-
-        expect(getPopular()[1][0]).toEqual('less/visited');
-    });
-
-    describe('series summary', () => {
-        const pages = [
-            {
-                pageId: '111',
-                section: 'a/series/b',
-                sectionName: 'A series (two views)',
-            },
-            {
-                pageId: '112',
-                section: 'a/series/b',
-                sectionName: 'A series (two views)',
-            },
-            {
-                pageId: '222',
-                section: 'g/series/h',
-                sectionName: 'Another series',
-            },
-            {
-                pageId: '333',
-                section: 'j/series/k',
-                sectionName: 'A different series',
-            },
-            {
-                pageId: '444',
-                section: 'x/series/y',
-                sectionName: 'A really different series',
-            },
-            {
-                pageId: '555',
-                section: 'a/sport/z',
-                sectionName: 'Not a series',
-            },
-        ];
-
-        beforeEach(() => {
-            pages.forEach((page, i) => {
-                logSummary(page, today + i);
-            });
-        });
-
-        it('should calculate series summary', () => {
-            expect(seriesSummary()).toEqual({
-                'a/series/b': 2,
-                'g/series/h': 1,
-                'j/series/k': 1,
-                'x/series/y': 1,
-            });
-        });
-
-        it('should calculate most viewed series', () => {
-            expect(mostViewedSeries()).toEqual('a/series/b');
-        });
-    });
-
-    it('strips edition from matching pageId', () => {
-        expect(_.collapsePath('uk/business')).toEqual('business');
-    });
-
-    it('does not strips edition from non-matching pageId', () => {
-        expect(_.collapsePath('uk/xxx')).toEqual('uk/xxx');
-    });
-
-    it('removes tags from megaNav', () => {
-        const megaNav = document.createElement('div');
-
-        megaNav.classList.add('js-global-navigation');
-
-        megaNav.innerHTML =
-            '<div class="js-global-navigation__section--history"></div>' +
-            '<div class="js-global-navigation__section--history"></div>';
-
-        if (document.body) {
-            document.body.appendChild(megaNav);
-        }
-
-        logSummary(pageConfig);
-
-        expect(
-            megaNav.querySelectorAll('.js-global-navigation__section--history')
-                .length
-        ).toEqual(2);
-
-        showInMegaNavEnable(false);
-
-        expect(
-            megaNav.querySelectorAll('.js-global-navigation__section--history')
-                .length
-        ).toEqual(0);
-    });
-
-    it('adds tags to megaNav', () => {
-        const megaNav = document.createElement('div');
-
-        megaNav.classList.add('js-global-navigation');
-
-        if (document.body) {
-            document.body.appendChild(megaNav);
-        }
-
-        logSummary(pageConfig);
-
-        expect(
-            megaNav.querySelectorAll('.js-global-navigation__section--history')
-                .length
-        ).toEqual(0);
-
-        showInMegaNavEnable(true);
-
-        expect(
-            megaNav.querySelectorAll('.js-global-navigation__section--history')
-                .length
-        ).toEqual(1);
-    });
-
-    it('get contributor names', () => {
-        logSummary(pageConfig);
-
-        expect(getContributors().length).toEqual(1);
-        expect(getContributors()[0][0]).toEqual('Finbarr Saunders');
-    });
-
-    // dailyArticleCount tests
-    it('gets article count for today only', () => {
-        const counts = [{ day: today, count: 1 }, { day: today - 1, count: 1 }];
-        storageStub.local.set('gu.history.dailyArticleCount', counts);
-
-        expect(getArticleViewCountForDays(1)).toEqual(1);
-    });
-
-    it('gets article count for 2 days', () => {
-        const counts = [{ day: today, count: 1 }, { day: today - 1, count: 1 }];
-        storageStub.local.set('gu.history.dailyArticleCount', counts);
-
-        expect(getArticleViewCountForDays(2)).toEqual(2);
-    });
-
-    it('increments the daily article count', () => {
-        const counts = [{ day: today, count: 1 }];
-        storageStub.local.set('gu.history.dailyArticleCount', counts);
-
-        incrementDailyArticleCount(pageConfig);
-
-        expect(getArticleViewCountForDays(1)).toEqual(2);
-    });
-
-    it('increments the yearly article count', () => {
-        const counts = [{ day: today, count: 1 }];
-        storageStub.local.set('gu.history.dailyArticleCount', counts);
-
-        incrementDailyArticleCount(pageConfig);
-
-        expect(getArticleViewCountForDays(1)).toEqual(2);
-    });
-
-    it('removes old daily history while incrementing the article count', () => {
-        const counts = [{ day: today - 70, count: 9 }];
-        storageStub.local.set('gu.history.dailyArticleCount', counts);
-
-        incrementDailyArticleCount(pageConfig);
-
-        expect(storageStub.local.get('gu.history.dailyArticleCount')).toEqual([
-            { day: today, count: 1 },
-        ]);
-    });
-
-    // weeklyArticleCountB tests
-    it('gets weekly count for this week only', () => {
-        const counts = [
-            { week: startOfThisWeek, count: 1 },
-            { week: startOfThisWeek - 7, count: 1 },
-        ];
-        storageStub.local.set('gu.history.weeklyArticleCount', counts);
-
-        expect(getArticleViewCountForWeeks(1)).toEqual(1);
-    });
-
-    it('gets article count for 2 weeks', () => {
-        const counts = [
-            { week: startOfThisWeek, count: 1 },
-            { week: startOfThisWeek - 7, count: 1 },
-        ];
-        storageStub.local.set('gu.history.weeklyArticleCount', counts);
-
-        expect(getArticleViewCountForWeeks(2)).toEqual(2);
-    });
-
-    it('increments the weekly article count', () => {
-        const counts = [{ week: startOfThisWeek, count: 1 }];
-        storageStub.local.set('gu.history.weeklyArticleCount', counts);
-
-        incrementWeeklyArticleCount(pageConfig);
-
-        expect(getArticleViewCountForWeeks(1)).toEqual(2);
-    });
-
-    it('removes old weekly history while incrementing the article count', () => {
-        const counts = [{ week: startOfThisWeek - 400, count: 9 }];
-        storageStub.local.set('gu.history.weeklyArticleCount', counts);
-
-        incrementWeeklyArticleCount(pageConfig);
-
-        expect(storageStub.local.get('gu.history.weeklyArticleCount')).toEqual([
-            { week: startOfThisWeek, count: 1 },
-        ]);
-    });
-
-    it('does not increment the weekly article count if opt-out cookie set', () => {
-        const counts = [{ week: startOfThisWeek, count: 1 }];
-        storageStub.local.set('gu.history.weeklyArticleCount', counts);
-        getCookie.mockReturnValue(new Date().getTime().toString());
-
-        incrementWeeklyArticleCount(pageConfig);
-
-        expect(getArticleViewCountForWeeks(1)).toEqual(1);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/onward-content.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/onward-content.js
deleted file mode 100644
index a02e7bce141..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/onward-content.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/onward-content.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-import { begin, error, end } from 'common/modules/analytics/register';
-import { Component } from 'common/modules/component';
-
-const getTag = (): string =>
-    [
-        ...config.get('page.nonKeywordTagIds', '').split(','),
-        ...config.get('page.blogIds', '').split(','),
-        ...[config.get('page.seriesId')],
-    ].shift();
-
-const getShortUrl = (): string =>
-    encodeURIComponent(config.get('page.shortUrl'));
-
-class OnwardContent extends Component {
-    constructor(context: HTMLElement): void {
-        super();
-
-        begin('series-content');
-
-        this.endpoint = `/series/${getTag()}.json?shortUrl=${getShortUrl()}`;
-
-        this.fetch(context, 'html');
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    error(): void {
-        error('series-content');
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    ready(): void {
-        end('series-content');
-        mediator.emit('modules:onward:loaded');
-    }
-}
-
-export { OnwardContent };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/onward-content.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/onward-content.spec.js
deleted file mode 100644
index 9937704a952..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/onward-content.spec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/onward-content.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-
-import { OnwardContent } from './onward-content';
-
-jest.mock('ophan/ng', () => ({
-    record: jest.fn(),
-}));
-
-jest.mock('lib/config');
-
-const getShortUrl = (): string =>
-    encodeURIComponent(config.get('page.shortUrl'));
-
-describe('Onward Content', () => {
-    beforeEach(() => {
-        config.page = {
-            shortUrl: 'http://www.theguardian.com/p/42zeg',
-            blogIds: 'global-development/poverty-matters',
-            seriesId: 'global-development/series/modern-day-slavery-in-focus',
-        };
-
-        if (document.body) {
-            document.body.innerHTML = `
-                <div class="js-onward"></div>
-            `;
-        }
-    });
-
-    test('should use blog tag if first', () => {
-        config.page.nonKeywordTagIds = [
-            ['global-development', 'poverty-matters'].join('/'),
-
-            [
-                'global-development',
-                'series',
-                'modern-day-slavery-in-focus',
-            ].join('/'),
-        ].join(',');
-
-        const el = document.querySelector('.js-onward');
-
-        if (el) {
-            // eslint-disable-next-line no-new
-            const onward = new OnwardContent(el);
-
-            expect(onward.endpoint).toBe(
-                `/series/global-development/poverty-matters.json?shortUrl=${getShortUrl()}`
-            );
-        }
-    });
-
-    test('should use series tag if first', () => {
-        config.page.nonKeywordTagIds = [
-            [
-                'global-development',
-                'series',
-                'modern-day-slavery-in-focus',
-            ].join('/'),
-
-            ['global-development', 'poverty-matters'].join('/'),
-        ].join(',');
-
-        const el = document.querySelector('.js-onward');
-
-        if (el) {
-            // eslint-disable-next-line no-new
-            const onward = new OnwardContent(el);
-
-            expect(onward.endpoint).toBe(
-                `/series/global-development/series/modern-day-slavery-in-focus.json?shortUrl=${getShortUrl()}`
-            );
-        }
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/popular.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/popular.js
deleted file mode 100644
index 3a02e854a25..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/popular.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/popular.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import qwery from 'qwery';
-import config from 'lib/config';
-import { Component } from 'common/modules/component';
-import mediator from 'lib/mediator';
-
-class MostPopular extends Component {
-    constructor(): void {
-        super();
-
-        /* This is not going to evolve into a random list of sections. If
-           anyone wants more than these 2 then they get to comission the work to
-           have it go through the entire tooling chain so that a section has a
-           property that tells us whether it shows most popular or not. */
-        const sectionsWithoutPopular = ['info', 'global'];
-        const pageSection = config.get('page.section');
-        const hasSection =
-            pageSection && !sectionsWithoutPopular.includes(pageSection);
-
-        this.endpoint = `/most-read${hasSection ? `/${pageSection}` : ''}.json`;
-
-        mediator.emit('register:begin', 'popular-in-section');
-
-        this.fetch(qwery('.js-popular-trails'), 'html');
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    ready() {
-        mediator.emit('modules:popular:loaded');
-        mediator.emit('register:end', 'popular-in-section');
-    }
-}
-
-export { MostPopular };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/popular.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/popular.spec.js
deleted file mode 100644
index 6045a24a8cb..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/popular.spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/popular.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import Chance from 'chance';
-import config from 'lib/config';
-import { MostPopular } from 'common/modules/onward/popular';
-
-const chance = new Chance();
-
-describe('Most popular', () => {
-    test('should request most popular for most sections', () => {
-        config.page.section = chance.word();
-        const popular = new MostPopular();
-
-        expect(popular.endpoint).toBe(`/most-read/${config.page.section}.json`);
-    });
-
-    test('should only request global most popular for blacklisted sections', () => {
-        config.page.section = 'info';
-        const popular = new MostPopular();
-
-        expect(popular.endpoint).toBe('/most-read.json');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/related.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/related.js
deleted file mode 100644
index e6c5205d071..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/related.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/related.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-import fetchJSON from 'lib/fetch-json';
-import fastdom from 'lib/fastdom-promise';
-import { begin, error, end } from 'common/modules/analytics/register';
-import { Expandable } from 'common/modules/ui/expandable';
-import { commercialFeatures } from 'common/modules/commercial/commercial-features';
-
-const buildExpandable = (el: HTMLElement): void => {
-    new Expandable({
-        dom: el,
-        expanded: false,
-        showCount: false,
-    }).init();
-};
-
-const popularInTagOverride = (): ?string | false => {
-    /* whitelist of tags to override related story component with a
-       popular-in-tag component */
-    if (!config.get('page.keywordIds')) {
-        return false;
-    }
-
-    // This list also exists in DCR https://github.com/guardian/dotcom-rendering/blob/88a9693e7ee23e3e7e140ba680b12a19288e96f6/src/web/components/Onwards/Onwards.tsx
-    // If you change this list then you should also update ^
-    // order matters here (first match wins)
-    const whitelistedTags = [
-        // sport tags
-        'sport/cricket',
-        'sport/rugby-union',
-        'sport/rugbyleague',
-        'sport/formulaone',
-        'sport/tennis',
-        'sport/cycling',
-        'sport/motorsports',
-        'sport/golf',
-        'sport/horse-racing',
-        'sport/boxing',
-        'sport/us-sport',
-        'sport/australia-sport',
-
-        // football tags
-        'football/championsleague',
-        'football/premierleague',
-        'football/championship',
-        'football/europeanfootball',
-        'football/world-cup-2014',
-
-        // football team tags
-        'football/manchester-united',
-        'football/chelsea',
-        'football/arsenal',
-        'football/manchestercity',
-        'football/tottenham-hotspur',
-        'football/liverpool',
-    ];
-
-    const intersect = (a: Array<string>, b: Array<string>): Array<string> =>
-        [...new Set(a)].filter(_ => new Set(b).has(_));
-    const pageTags = config.get('page.keywordIds', '').split(',');
-    // if this is an advertisement feature, use the page's keyword (there'll only be one)
-    const popularInTags = config.get('page.isPaidContent')
-        ? pageTags
-        : intersect(whitelistedTags, pageTags);
-
-    if (popularInTags.length) {
-        return `/popular-in-tag/${popularInTags[0]}.json`;
-    }
-};
-
-const related = (opts: Object): void => {
-    let relatedUrl;
-    let popularInTag;
-    let componentName;
-
-    const shouldHideForAdFree =
-        commercialFeatures.adFree && config.get('page.isPaidContent');
-
-    if (config.get('page.hasStoryPackage')) {
-        const expandable =
-            document.body && document.body.querySelector('.related-trails');
-
-        if (expandable) {
-            buildExpandable(expandable);
-        }
-    } else if (
-        config.get('switches.relatedContent') &&
-        config.get('page.showRelatedContent') &&
-        !shouldHideForAdFree
-    ) {
-        const container =
-            document.body && document.body.querySelector('.js-related');
-
-        if (container && !container.classList.contains('lazyloaded')) {
-            popularInTag = popularInTagOverride();
-            componentName = popularInTag
-                ? 'related-popular-in-tag'
-                : 'related-content';
-
-            begin(componentName);
-            container.setAttribute('data-component', componentName);
-            relatedUrl =
-                popularInTag || `/related/${config.get('page.pageId')}.json`;
-            const queryParams = opts.excludeTags.map(
-                tag => `exclude-tag=${tag}`
-            );
-
-            if (opts.excludeTags && opts.excludeTags.length) {
-                relatedUrl += `?${queryParams.join('&')}`;
-            }
-
-            fetchJSON(relatedUrl, { mode: 'cors' })
-                .then(resp =>
-                    fastdom.mutate(() => {
-                        container.innerHTML = resp.html;
-                        container.classList.add('lazyloaded');
-                    })
-                )
-                .then(() => {
-                    const relatedContainer = container.querySelector(
-                        '.related-content'
-                    );
-
-                    if (relatedContainer) {
-                        buildExpandable(relatedContainer);
-                    }
-
-                    // upgrade images
-                    mediator.emit('modules:related:loaded', container);
-                    end(componentName);
-                })
-                .catch(() => {
-                    container.remove();
-                    error(componentName);
-                });
-        }
-    } else {
-        Array.from(document.querySelectorAll('.js-related')).forEach(el =>
-            el.classList.add('u-h')
-        );
-    }
-};
-
-export { related };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/related.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/related.spec.js
deleted file mode 100644
index 0bae970df12..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/related.spec.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/related.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import { commercialFeatures } from 'common/modules/commercial/commercial-features';
-import { related } from './related';
-
-jest.mock('lib/config');
-jest.mock('common/modules/commercial/commercial-features', () => ({
-    commercialFeatures() {},
-}));
-jest.mock('common/modules/ui/expandable', () => ({
-    Expandable: jest.fn(),
-}));
-jest.mock('common/modules/analytics/register', () => ({
-    begin() {},
-    end() {},
-    error() {},
-}));
-
-const FakeExp: any = require('common/modules/ui/expandable').Expandable;
-
-describe('onward/related', () => {
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-                <div class="js-related lazyloaded"></div>
-                <div class="related-trails"></div>
-            `;
-        }
-
-        config.page = {
-            hasStoryPackage: false,
-            showRelatedContent: true,
-        };
-        config.switches = {
-            relatedContent: true,
-            ajaxRelatedContent: true,
-        };
-
-        FakeExp.mockReset();
-        FakeExp.prototype.init = jest.fn();
-
-        jest.resetAllMocks();
-        jest.resetModules();
-    });
-
-    afterEach(() => {
-        FakeExp.prototype.init.mockRestore();
-    });
-
-    it("should hide if there's no story package and related can't be fetched", () => {
-        const container: HTMLElement = (document.querySelector(
-            '.js-related'
-        ): any);
-
-        config.switches.relatedContent = false;
-
-        related({});
-
-        expect(container.classList.contains('u-h')).toBe(true);
-    });
-
-    it('should hide if user has ad-free and the page is paid content', () => {
-        const container: HTMLElement = (document.querySelector(
-            '.js-related'
-        ): any);
-
-        config.page.isPaidContent = true;
-        commercialFeatures.adFree = true;
-
-        related({});
-
-        expect(container.classList.contains('u-h')).toBe(true);
-    });
-
-    it('should create expandable if page has story package', () => {
-        config.page.hasStoryPackage = true;
-
-        related({});
-
-        expect(FakeExp).toHaveBeenCalledWith({
-            dom: document.querySelector('.related-trails'),
-            expanded: false,
-            showCount: false,
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/onward/tonal.js b/static/src/javascripts.flow.archive/projects/common/modules/onward/tonal.js
deleted file mode 100644
index 6a42bbaf438..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/onward/tonal.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/onward/tonal.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-import { begin, error, end } from 'common/modules/analytics/register';
-import { Component } from 'common/modules/component';
-
-const tones = {
-    uk: {
-        comment: 'uk-alpha/contributors/feature-stories',
-    },
-    us: {
-        comment: 'us-alpha/contributors/feature-stories',
-    },
-    au: {
-        comment: 'au-alpha/contributors/feature-stories',
-    },
-    int: {
-        comment: 'ee3386bb-9430-4a6d-8bca-b99d65790f3b',
-    },
-};
-
-class TonalComponent extends Component {
-    static getTone(): string {
-        return config
-            .get('page.tones', '')
-            .split(',')[0]
-            .toLowerCase();
-    }
-
-    static ready(): void {
-        mediator.emit('modules:tonal:loaded');
-        end('tonal-content');
-    }
-
-    static error(): void {
-        error('tonal-content');
-    }
-
-    constructor(): void {
-        super();
-
-        begin('tonal-content');
-
-        this.edition = config.get('page.edition', '').toLowerCase();
-
-        // Ensures we only fetch supported tones.
-        if (this.isSupported()) {
-            this.endpoint = this.getEndpoint();
-        }
-    }
-
-    getEndpoint(): string {
-        const endpoint = tones[this.edition][TonalComponent.getTone()];
-        return `/container/${endpoint}.json`;
-    }
-
-    edition: string;
-
-    isSupported(): boolean {
-        return TonalComponent.getTone() in tones[this.edition];
-    }
-}
-
-export { TonalComponent };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/social/share-count.js b/static/src/javascripts.flow.archive/projects/common/modules/social/share-count.js
deleted file mode 100644
index 40834e52791..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/social/share-count.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/social/share-count.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'fastdom';
-import reportError from 'lib/report-error';
-import $ from 'lib/$';
-import fetchJSON from 'lib/fetch-json';
-import config from 'lib/config';
-import { integerCommas } from 'lib/formatters';
-import template from 'lodash/template';
-import { inlineSvg } from 'common/views/svgs';
-import shareCountTemplate from 'raw-loader!common/views/content/share-count.html';
-import shareCountImmersiveTemplate from 'raw-loader!common/views/content/share-count-immersive.html';
-
-const $shareCountEls = $('.js-sharecount');
-const tooltip: string = 'Facebook: <%=facebook%>';
-const counts: Object = {
-    facebook: 'n/a',
-};
-let shareCount: number = 0;
-let $fullValueEls;
-let $shortValueEls;
-
-const incrementShareCount = (amount: number): void => {
-    if (amount !== 0) {
-        shareCount += amount;
-
-        const displayCount = parseInt(shareCount.toFixed(0), 10);
-        const formattedDisplayCount = integerCommas(displayCount);
-        const shortDisplayCount =
-            displayCount > 10000
-                ? `${Math.round(displayCount / 1000)}k`
-                : displayCount;
-
-        fastdom.mutate(() => {
-            $fullValueEls.text(formattedDisplayCount);
-            $shortValueEls.text(shortDisplayCount);
-        });
-    }
-};
-
-const updateTooltip = (): void => {
-    $shareCountEls.attr('title', template(tooltip)(counts));
-};
-
-const addToShareCount = (val: number): void => {
-    const shareSvg = inlineSvg('share');
-    const shareTemplate = $shareCountEls.hasClass('js-sharecount-immersive')
-        ? shareCountImmersiveTemplate
-        : shareCountTemplate;
-    const html = template(shareTemplate)({
-        icon: shareSvg,
-    });
-
-    $shareCountEls
-        .removeClass('u-h')
-        .html(html)
-        .css('display', '');
-
-    $shortValueEls = $('.sharecount__value--short', $shareCountEls[0]);
-    $fullValueEls = $('.sharecount__value--full', $shareCountEls[0]);
-
-    incrementShareCount(val);
-};
-
-const fetch = (): void => {
-    const url = `${config.get('page.ajaxUrl')}/sharecount/${config.get(
-        'page.pageId'
-    )}.json`;
-
-    fetchJSON(url, {
-        mode: 'cors',
-    }).then(res => {
-        const count = res.share_count || 0;
-        counts.facebook = count;
-        if (count > 0) {
-            addToShareCount(count);
-            updateTooltip();
-        }
-    });
-};
-
-const loadShareCounts = (): void => {
-    /* asking for social counts in preview "leaks" upcoming URLs to social sites.
-       when they then crawl them they get 404s which affects later sharing.
-      don't call counts in preview */
-    if (
-        config.get('switches.serverShareCounts') &&
-        $shareCountEls.length &&
-        !config.get('page.isPreview')
-    ) {
-        try {
-            fetch();
-        } catch (e) {
-            reportError(
-                new Error(`Error retrieving share counts (${e.message})`),
-                {
-                    feature: 'share-count',
-                },
-                false
-            );
-        }
-    }
-};
-
-export { loadShareCounts };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/spacefinder.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/spacefinder.spec.js
deleted file mode 100644
index a1e214585d4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/spacefinder.spec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/spacefinder.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { _ } from 'common/modules/spacefinder';
-
-jest.mock('commercial/modules/dfp/track-ad-render', () =>
-    Promise.resolve(true)
-);
-
-describe('spacefinder', () => {
-    test('should test elements correctly', () => {
-        const rules = { minAbove: 50, minBelow: 300 };
-        const element = document.createElement('div');
-        const para = { top: 200, bottom: 300, element };
-        const others: Object[] = [
-            {
-                opponent: { top: 0, bottom: 100, element },
-                expectedResult: true,
-            }, // fine
-            {
-                opponent: { top: 600, bottom: 700, element },
-                expectedResult: true,
-            }, // fine
-            {
-                opponent: { top: 0, bottom: 151, element },
-                expectedResult: false,
-            }, // too close to top (49 < 50)
-            {
-                opponent: { top: 400, bottom: 500, element },
-                expectedResult: false,
-            }, // too close to bottom (200 < 300)
-            {
-                opponent: { top: 210, bottom: 290, element },
-                expectedResult: false,
-            }, // overlapping
-            {
-                opponent: { top: 0, bottom: 600, element },
-                expectedResult: false,
-            }, // overlapping
-            {
-                opponent: { top: 100, bottom: 250, element },
-                expectedResult: false,
-            }, // overlapping
-        ];
-
-        others.forEach(other => {
-            expect(_.testCandidate(rules, para, other.opponent)).toBe(
-                other.expectedResult
-            );
-        });
-
-        expect(_.testCandidates(rules, para, others.map(x => x.opponent))).toBe(
-            false
-        );
-        expect(
-            _.testCandidates(
-                rules,
-                para,
-                others.slice(0, 2).map(x => x.opponent)
-            )
-        ).toBe(true);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/football.js b/static/src/javascripts.flow.archive/projects/common/modules/sport/football/football.js
deleted file mode 100644
index 510e73b0c28..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/football.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/sport/football/football.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { Component } from 'common/modules/component';
-
-const factory = (url: string): Component => {
-    const c = new Component();
-    c.endpoint = url;
-    return c;
-};
-
-const matchDayFor = (competition: string, date: string): Component =>
-    factory(`/football/match-day/${competition}/${date}.json`);
-
-const tableFor = (competition: string): Component =>
-    factory(`/football/${competition}/table.json`);
-
-const statsFor = (url: string): Component => factory(`${url}.json`);
-
-export { matchDayFor, tableFor, statsFor };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/match-info.js b/static/src/javascripts.flow.archive/projects/common/modules/sport/football/match-info.js
deleted file mode 100644
index 4db2f1c31c4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/match-info.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/sport/football/match-info.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fetchJSON from 'lib/fetch-json';
-
-class MatchInfo {
-    constructor(match: Object, whosCalling: string): void {
-        const base = '/football/api/match-nav';
-        const slug = match.id || [match.date].concat(match.teams).join('/');
-        const page = encodeURIComponent(whosCalling);
-        this.endpoint = `${base}/${slug}.json?page=${page}`;
-    }
-
-    endpoint: string;
-
-    fetch(): Promise<any> {
-        return fetchJSON(this.endpoint, {
-            mode: 'cors',
-        });
-    }
-}
-
-export { MatchInfo };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/match-list-live.js b/static/src/javascripts.flow.archive/projects/common/modules/sport/football/match-list-live.js
deleted file mode 100644
index 0c054d0df8b..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/match-list-live.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/sport/football/match-list-live.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import bonzo from 'bonzo';
-import { Component } from 'common/modules/component';
-
-class MatchListLive extends Component {
-    constructor(type: string, competition: string | true, date: ?string): void {
-        super();
-
-        const slug = ['football', type, competition, date]
-            .filter(e => e)
-            .join('/');
-
-        this.autoupdated = true;
-        this.updateEvery = 10;
-        this.endpoint = `/${slug}.json`;
-    }
-
-    autoupdate(elem: HTMLElement): void {
-        const updated = $('.football-match', elem);
-
-        $('.football-match', this.elem).each((match, i) => {
-            const $match = bonzo(match).removeClass('football-match--updated');
-            const $updated = bonzo(updated[i]);
-
-            ['score-home', 'score-away', 'match-status'].forEach(state => {
-                const stateData = `data-${state}`;
-
-                if ($updated.attr(stateData) !== $match.attr(stateData)) {
-                    $match.replaceWith(
-                        $updated.addClass('football-match--updated')
-                    );
-
-                    this.prerender();
-                }
-            });
-        });
-    }
-
-    prerender(): void {
-        const elem = this.elem;
-
-        $('.football-team__form', elem).remove();
-        $('.date-divider', elem).remove();
-        $(this.elem).addClass('table--small');
-
-        $('.football-matches__date', this.elem).replaceWith(
-            '<span class="item__live-indicator">Live</span>'
-        );
-    }
-}
-
-export { MatchListLive };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/tag-page-stats.js b/static/src/javascripts.flow.archive/projects/common/modules/sport/football/tag-page-stats.js
deleted file mode 100644
index f18993c780c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/sport/football/tag-page-stats.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/sport/football/tag-page-stats.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import fetchJSON from 'lib/fetch-json';
-import reportError from 'lib/report-error';
-
-export const tagPageStats = (): void => {
-    const firstContainer = document.querySelector(
-        '.js-insert-team-stats-after'
-    );
-
-    if (firstContainer) {
-        fetchJSON(
-            `/${config.get('page.pageId')}/fixtures-and-results-container`,
-            {
-                mode: 'cors',
-            }
-        )
-            .then(container => {
-                if (container.html) {
-                    firstContainer.insertAdjacentHTML(
-                        'afterend',
-                        container.html
-                    );
-                }
-            })
-            .catch(ex => {
-                reportError(ex, { feature: 'tag-fixtures' });
-            });
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/sport/score-board.js b/static/src/javascripts.flow.archive/projects/common/modules/sport/score-board.js
deleted file mode 100644
index e273bd6700e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/sport/score-board.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/sport/score-board.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bonzo from 'bonzo';
-import { Component } from 'common/modules/component';
-import { isBreakpoint } from 'lib/detect';
-import $ from 'lib/$';
-
-type PageTypes = 'minbymin' | 'preview' | 'report' | 'stats';
-
-type ScoreBoardContext = {
-    autoupdated: boolean,
-    pageType: PageTypes,
-    placeholder?: HTMLElement,
-    parent: bonzo,
-    responseDataKey: string,
-    updateEvery?: number,
-};
-
-const getScoreContainerHtml = (context: Object): string => `
-    <div class="score-container">
-        <div class="score__loading ${context.loadingState}">
-            <div class="loading__text">Fetching the scores…</div>
-            <div class="is-updating"></div>
-        </div>
-    </div>
-`;
-
-class ScoreBoard extends Component {
-    constructor(context: ScoreBoardContext): void {
-        super();
-
-        Object.assign(this, context);
-
-        const scoreContainerHtml = getScoreContainerHtml({
-            loadingState:
-                this.pageType !== 'report' ? ' score__loading--live' : '',
-        });
-
-        this.updateEvery = isBreakpoint({ min: 'desktop' }) ? 30 : 60;
-        this.placeholder = bonzo.create(scoreContainerHtml)[0];
-
-        if (this.pageType === 'report') {
-            context.parent.after(this.placeholder);
-        } else {
-            context.parent.addClass('u-h').before(this.placeholder);
-        }
-    }
-
-    placeholder: HTMLElement;
-    pageType: PageTypes;
-    parent: bonzo;
-
-    prerender(): void {
-        const scoreLoadingPlaceholder = $(
-            '.score__loading',
-            $(this.placeholder)
-        );
-
-        if (scoreLoadingPlaceholder.length) {
-            scoreLoadingPlaceholder.remove();
-        }
-    }
-
-    ready(): void {
-        this.setState(this.pageType);
-    }
-
-    load(): void {
-        this.fetch(this.placeholder);
-    }
-
-    loadFromJson(html: string): void {
-        this.template = html;
-        this.render(this.placeholder);
-    }
-
-    error(): void {
-        this.placeholder.innerHTML = '';
-        this.parent.removeClass('u-h');
-    }
-}
-
-export { ScoreBoard };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/accessibility-prefs.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/accessibility-prefs.js
deleted file mode 100644
index 6c0ae6da31a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/accessibility-prefs.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/accessibility-prefs.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-/* We live in a rainbow of chaos. */
-// ^ U WOT
-
-import fastdom from 'fastdom';
-import userPrefs from 'common/modules/user-prefs';
-
-const FILTERS = [
-    'sepia',
-    'grayscale',
-    'invert',
-    'contrast',
-    'saturate',
-    'opacity',
-];
-
-const setFilter = (mode: string): void => {
-    const body = document.body;
-    const value: string = `${mode}(100%)`;
-
-    if (body) {
-        // $FlowFixMe -webkit-filter is not recognised
-        Object.assign(body.style, {
-            '-webkit-filter': value,
-            filter: value,
-        });
-    }
-};
-
-const breuer = (): void => {
-    if (document.body) {
-        document.body.classList.add('is-breuer-mode');
-    }
-};
-
-const initAccessibilityPreferences = (): void => {
-    fastdom.mutate(() => {
-        FILTERS.forEach(filter => {
-            if (userPrefs.isOn(filter)) {
-                setFilter(filter);
-            }
-        });
-    });
-
-    if (userPrefs.isOn('breuerMode')) {
-        breuer();
-    }
-};
-
-export { initAccessibilityPreferences };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/autoupdate.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/autoupdate.js
deleted file mode 100644
index a64106bcdfa..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/autoupdate.js
+++ /dev/null
@@ -1,253 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/autoupdate.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-
-import $ from 'lib/$';
-import fastdom from 'lib/fastdom-promise';
-import fetchJSON from 'lib/fetch-json';
-import { isBreakpoint, pageVisible, initPageVisibility } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { enhanceTweets } from 'common/modules/article/twitter';
-import { Sticky } from 'common/modules/ui/sticky';
-import { scrollToElement } from 'lib/scroller';
-import { init as initRelativeDates } from 'common/modules/ui/relativedates';
-import { initNotificationCounter } from 'common/modules/ui/notification-counter';
-import { checkElemsForVideos } from 'common/modules/atoms/youtube';
-
-type autoUpdateOptions = {
-    toastOffsetTop: number,
-    minUpdateDelay: number,
-    maxUpdateDelay: number,
-    backoffMultiplier: number,
-};
-
-const autoUpdate = (opts?: autoUpdateOptions): void => {
-    const options = Object.assign(
-        {
-            toastOffsetTop: 12,
-            minUpdateDelay: (isBreakpoint({ min: 'desktop' }) ? 10 : 30) * 1000,
-            maxUpdateDelay: 20 * 60 * 1000, // 20 mins
-            backoffMultiplier: 0.75, // increase or decrease the back off rate by modifying this
-        },
-        opts
-    );
-
-    // Cache selectors
-    const $liveblogBody = $('.js-liveblog-body');
-    const $toastButton = $('.toast__button');
-    const $toastText = $('.toast__text', $toastButton);
-    const toastContainer = qwery('.toast__container')[0];
-    let currentUpdateDelay = options.minUpdateDelay;
-    let latestBlockId = $liveblogBody.data('most-recent-block');
-    let unreadBlocksNo = 0;
-    let updateTimeoutId;
-
-    const updateDelay = (delay: number): void => {
-        let newDelay;
-
-        if (pageVisible()) {
-            newDelay = options.minUpdateDelay;
-        } else {
-            newDelay = Math.min(delay * 1.5, options.maxUpdateDelay);
-        }
-
-        currentUpdateDelay = newDelay;
-    };
-
-    const scrolledPastTopBlock = (): boolean =>
-        $liveblogBody.offset().top < window.pageYOffset;
-
-    const isLivePage = !window.location.search.includes('?page=');
-
-    const revealInjectedElements = (): void => {
-        fastdom.mutate(() => {
-            $('.autoupdate--hidden', $liveblogBody)
-                .addClass('autoupdate--highlight')
-                .removeClass('autoupdate--hidden');
-            mediator.emit('modules:autoupdate:unread', 0);
-        });
-    };
-
-    const toastButtonRefresh = (): void => {
-        fastdom.mutate(() => {
-            if (unreadBlocksNo > 0) {
-                const updateText =
-                    unreadBlocksNo > 1 ? ' new updates' : ' new update';
-                $toastButton.removeClass('toast__button--closed');
-                $(toastContainer).addClass('toast__container--open');
-                $toastText.html(unreadBlocksNo + updateText);
-            } else {
-                $toastButton
-                    .removeClass('loading')
-                    .addClass('toast__button--closed');
-                $(toastContainer).removeClass('toast__container--open');
-            }
-        });
-    };
-
-    const injectNewBlocks = (newBlocks: string): void => {
-        // Clean up blocks before insertion
-        const resultHtml = $.create(`<div>${newBlocks}</div>`)[0];
-        let elementsToAdd;
-
-        fastdom.mutate(() => {
-            bonzo(resultHtml.children).addClass('autoupdate--hidden');
-            elementsToAdd = Array.from(resultHtml.children);
-
-            // Insert new blocks
-            $liveblogBody.prepend(elementsToAdd);
-
-            mediator.emit('modules:autoupdate:updates', elementsToAdd.length);
-
-            initRelativeDates();
-            enhanceTweets();
-            checkElemsForVideos(elementsToAdd);
-        });
-    };
-
-    const displayNewBlocks = (): void => {
-        if (pageVisible()) {
-            revealInjectedElements();
-        }
-
-        unreadBlocksNo = 0;
-        toastButtonRefresh();
-    };
-
-    const checkForUpdates = (): Promise<void> => {
-        if (updateTimeoutId !== undefined) {
-            clearTimeout(updateTimeoutId);
-        }
-
-        let count = 0;
-        const shouldFetchBlocks = `&isLivePage=${
-            isLivePage ? 'true' : 'false'
-        }`;
-        const latestBlockIdToUse = latestBlockId || 'block-0';
-        const params = `?lastUpdate=${latestBlockIdToUse}${shouldFetchBlocks}`;
-        const endpoint = `${window.location.pathname}.json${params}`;
-
-        // #? One day this should be in Promise.finally()
-        const setUpdateDelay = (): void => {
-            if (count === 0 || currentUpdateDelay > 0) {
-                updateDelay(currentUpdateDelay);
-
-                updateTimeoutId = setTimeout(
-                    checkForUpdates,
-                    currentUpdateDelay
-                );
-            } else {
-                // might have been cached so check straight away
-                updateTimeoutId = setTimeout(checkForUpdates, 1);
-            }
-        };
-
-        return fetchJSON(endpoint, {
-            mode: 'cors',
-        })
-            .then(resp => {
-                count = resp.numNewBlocks;
-
-                if (count > 0) {
-                    unreadBlocksNo += count;
-
-                    // updates notification bar with number of unread blocks
-                    mediator.emit('modules:autoupdate:unread', unreadBlocksNo);
-
-                    latestBlockId = resp.mostRecentBlockId;
-
-                    if (isLivePage) {
-                        injectNewBlocks(resp.html);
-
-                        if (scrolledPastTopBlock()) {
-                            toastButtonRefresh();
-                        } else {
-                            displayNewBlocks();
-                        }
-                    } else {
-                        toastButtonRefresh();
-                    }
-                }
-
-                setUpdateDelay();
-            })
-            .catch(() => {
-                setUpdateDelay();
-            });
-    };
-
-    const setUpListeners = (): void => {
-        bean.on(document.body, 'click', '.toast__button', () => {
-            if (isLivePage) {
-                fastdom.measure(() => {
-                    scrollToElement(qwery('.blocks')[0], 300, 'easeOutQuad');
-
-                    fastdom
-                        .mutate(() => {
-                            $toastButton.addClass('loading');
-                        })
-                        .then(() => {
-                            displayNewBlocks();
-                        });
-                });
-            } else {
-                window.location.assign(window.location.pathname);
-            }
-        });
-
-        mediator.on('modules:toast__tofix:unfixed', () => {
-            if (isLivePage && unreadBlocksNo > 0) {
-                fastdom
-                    .mutate(() => {
-                        $toastButton.addClass('loading');
-                    })
-                    .then(() => {
-                        displayNewBlocks();
-                    });
-            }
-        });
-
-        mediator.on('modules:detect:pagevisibility:visible', () => {
-            if (unreadBlocksNo === 0) {
-                revealInjectedElements();
-            }
-
-            currentUpdateDelay = 0; // means please get us fully up to date
-            checkForUpdates();
-        });
-    };
-
-    // init
-    initNotificationCounter();
-
-    new Sticky(toastContainer, {
-        top: options.toastOffsetTop,
-        emitMessage: true,
-        containInParent: false,
-    }).init();
-
-    checkForUpdates();
-    initPageVisibility();
-    setUpListeners();
-
-    fastdom.mutate(() => {
-        // Enables the animations for injected blocks
-        $liveblogBody.addClass('autoupdate--has-animation');
-    });
-};
-
-export { autoUpdate };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/bannerPicker.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/bannerPicker.js
deleted file mode 100644
index 11c12dbd125..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/bannerPicker.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/bannerPicker.js
- * to .ts, then delete it.
- */
-
-// @flow
-import ophan from 'ophan/ng';
-
-export type Banner = {
-    id: string,
-    canShow: () => Promise<boolean>,
-    show: () => Promise<boolean>,
-};
-
-const init = (banners: Array<Banner>): Promise<void> => {
-    const results: Array<'pending' | boolean> = new Array(banners.length).fill(
-        'pending',
-        0
-    );
-
-    const getSuccessfulBannerIndex = (): number => {
-        const firstCheckPassedIndex = results.findIndex(item => item === true);
-
-        // if no check has passed firstCheckPassedIndex equals -1
-        // if first check has passed firstCheckPassedIndex equals 0
-        if (firstCheckPassedIndex <= 0) {
-            return firstCheckPassedIndex;
-        }
-
-        // if firstCheckPassedIndex greater than 0 then get higher priority checks from array that are pending
-        const pendingHigherPriorityCheckIndex = results
-            .slice(0, firstCheckPassedIndex)
-            .findIndex(item => item === 'pending');
-
-        // if there are no higher priority checks pending return firstCheckPassedIndex
-        if (pendingHigherPriorityCheckIndex === -1) {
-            return firstCheckPassedIndex;
-        }
-
-        return -1;
-    };
-
-    return new Promise(resolve => {
-        const TIME_LIMIT = 2000;
-        let bannerPicked = false;
-
-        banners.forEach((banner, index) => {
-            const pushToResults = (result: boolean): void => {
-                results[index] = result;
-
-                const successfulBannerIndex = getSuccessfulBannerIndex();
-
-                if (!bannerPicked && successfulBannerIndex !== -1) {
-                    const successfulBanner = banners[successfulBannerIndex];
-                    successfulBanner.show();
-
-                    bannerPicked = true;
-
-                    const trackingObj = {
-                        component: 'banner-picker',
-                        value: successfulBanner.id,
-                    };
-
-                    ophan.record(trackingObj);
-                }
-
-                if (!results.includes('pending')) {
-                    resolve();
-                }
-            };
-
-            let hasTimedOut = false;
-
-            // checks that take longer than TIME_LIMIT are forced to fail
-            const timeout = setTimeout(() => {
-                hasTimedOut = true;
-
-                pushToResults(false);
-
-                const trackingObj = {
-                    component: 'banner-picker-timeout',
-                    value: banner.id,
-                };
-
-                ophan.record(trackingObj);
-            }, TIME_LIMIT);
-
-            banner.canShow().then(result => {
-                if (!hasTimedOut) {
-                    clearTimeout(timeout);
-                    pushToResults(result);
-                }
-            });
-        });
-    });
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/bannerPicker.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/bannerPicker.spec.js
deleted file mode 100644
index 7b89d92dde2..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/bannerPicker.spec.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/bannerPicker.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { init } from 'common/modules/ui/bannerPicker';
-import fakeOphan from 'ophan/ng';
-import userPrefs_ from 'common/modules/user-prefs';
-
-jest.useFakeTimers();
-
-jest.mock('ophan/ng', () => ({
-    record: jest.fn(),
-}));
-
-jest.mock('common/modules/user-prefs', () => ({
-    get: jest.fn().mockReturnValue([]),
-}));
-
-const userPrefs: any = userPrefs_;
-
-beforeEach(() => {
-    userPrefs.get.mockClear();
-    fakeOphan.record.mockClear();
-});
-
-describe('bannerPicker', () => {
-    describe('bannerPicker picks correct banner to show', () => {
-        // resultsSeq is the order banner's checks will resolve in the test
-        const tests = [
-            {
-                description:
-                    'should call show() for successful bannerIndex 0 when no other checks in list',
-                resultsSeq: [
-                    {
-                        bannerIndex: 0,
-                        value: true,
-                    },
-                ],
-                successfulIndex: 0,
-            },
-            {
-                description:
-                    'should call show() for successful bannerIndex 1 when bannerIndex 0 fails',
-                resultsSeq: [
-                    {
-                        bannerIndex: 0,
-                        value: false,
-                    },
-                    {
-                        bannerIndex: 1,
-                        value: true,
-                    },
-                ],
-                successfulIndex: 1,
-            },
-            {
-                description:
-                    'should call show() for successful bannerIndex 0 even if bannerIndex 1 passes',
-                resultsSeq: [
-                    {
-                        bannerIndex: 0,
-                        value: true,
-                    },
-                    {
-                        bannerIndex: 1,
-                        value: true,
-                    },
-                ],
-                successfulIndex: 0,
-            },
-            {
-                description:
-                    'should call show() for successful bannerIndex 1 when bannerIndex 1 fails',
-                resultsSeq: [
-                    {
-                        bannerIndex: 0,
-                        value: false,
-                    },
-                    {
-                        bannerIndex: 1,
-                        value: true,
-                    },
-                ],
-                successfulIndex: 1,
-            },
-            {
-                description:
-                    'should call show() for successful bannerIndex 0 even if bannerIndex 1 passes first',
-                resultsSeq: [
-                    {
-                        bannerIndex: 1,
-                        value: true,
-                    },
-                    {
-                        bannerIndex: 0,
-                        value: true,
-                    },
-                ],
-                successfulIndex: 0,
-            },
-            {
-                description:
-                    'should call show() for successful bannerIndex 2 when higher priority bannerIndexes 0 & 1 fail',
-                resultsSeq: [
-                    {
-                        bannerIndex: 1,
-                        value: false,
-                    },
-                    {
-                        bannerIndex: 3,
-                        value: true,
-                    },
-                    {
-                        bannerIndex: 2,
-                        value: true,
-                    },
-                    {
-                        bannerIndex: 0,
-                        value: false,
-                    },
-                ],
-                successfulIndex: 2,
-            },
-        ];
-
-        tests.forEach(test => {
-            it(test.description, () => {
-                const resolveList = [];
-
-                const newCheck = () => () =>
-                    new Promise(resolve => {
-                        resolveList.push(resolve);
-                    });
-
-                const createBanner = result => ({
-                    id: `banner-${result.bannerIndex}`,
-                    canShow: newCheck(),
-                    show: jest.fn(),
-                });
-
-                // create a list to be populated with banners
-                const banners = new Array(test.resultsSeq.length);
-
-                // create a banner for each result and add to banners list
-                test.resultsSeq.forEach(result => {
-                    banners[result.bannerIndex] = createBanner(result);
-                });
-
-                // pass banners to bannerPicker
-                const asyncTest = init(banners);
-
-                // resolve each banners check in the order specified by the result sequence
-                test.resultsSeq.forEach(result => {
-                    resolveList[result.bannerIndex](result.value);
-                });
-
-                // test whether the banner canShow function has been called
-                return asyncTest.then(() => {
-                    const trackingObj = {
-                        component: 'banner-picker',
-                        value: `banner-${test.successfulIndex}`,
-                    };
-                    expect(fakeOphan.record).toHaveBeenCalledWith(trackingObj);
-                    banners.forEach((banner, index) => {
-                        if (index === test.successfulIndex) {
-                            expect(banner.show).toHaveBeenCalledTimes(1);
-                            expect(banner.show).toHaveBeenCalled();
-                        } else {
-                            expect(banner.show).not.toHaveBeenCalled();
-                        }
-                    });
-                });
-            });
-        });
-    });
-
-    describe('bannerPicker picks correct banner to show when check timesout', () => {
-        it('should call show() for banner at index 1 if index 0 timesout', () => {
-            const resolveList = [];
-
-            /**
-             * this will be assigned the resolve function of
-             * onCheckResolved.
-             * */
-            let triggerTimeout;
-
-            /**
-             * the promise returned by onCheckResolved.
-             * will resolve when triggerTimeout has been called
-             * */
-            const onCheckResolved = () =>
-                new Promise(resolve => {
-                    triggerTimeout = resolve;
-                });
-
-            /**
-             * wait for onCheckResolved to resolve then execute all pending timers
-             * to force a timeout on the banners[0]
-             * */
-            onCheckResolved().then(() => {
-                jest.runOnlyPendingTimers();
-            });
-
-            const newCheck = () => () =>
-                new Promise(resolve => {
-                    resolveList.push(result => {
-                        resolve(result);
-                        /**
-                         * we've just resolved the check for banners[1] call
-                         * triggerTimeout to resolve onCheckResolved
-                         * and trigger a timeout on banners[0]
-                         * */
-                        triggerTimeout();
-                    });
-                });
-
-            const banners = [
-                {
-                    id: 'banner-0',
-                    canShow: newCheck(),
-                    show: jest.fn(),
-                },
-                {
-                    id: 'banner-1',
-                    canShow: newCheck(),
-                    show: jest.fn(),
-                },
-            ];
-
-            const asyncTest = init(banners);
-
-            // resolve banner[1] check
-            resolveList[1](true);
-
-            return asyncTest.then(() => {
-                const successTrackingObj = {
-                    component: 'banner-picker',
-                    value: `banner-1`,
-                };
-
-                const timeoutTrackingObj = {
-                    component: 'banner-picker-timeout',
-                    value: `banner-0`,
-                };
-
-                expect(fakeOphan.record).toHaveBeenCalledTimes(2);
-                expect(fakeOphan.record).toHaveBeenCalledWith(
-                    successTrackingObj
-                );
-                expect(fakeOphan.record).toHaveBeenCalledWith(
-                    timeoutTrackingObj
-                );
-                expect(banners[0].show).not.toHaveBeenCalled();
-                expect(banners[1].show).toHaveBeenCalled();
-            });
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/clickstream.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/clickstream.js
deleted file mode 100644
index aeb8fff28c9..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/clickstream.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/clickstream.js
- * to .ts, then delete it.
- */
-
-// @flow
-// #? Clean up unused `data-` attributes
-import bean from 'bean';
-import mediator from 'lib/mediator';
-
-type Options = {
-    location?: Location,
-    filter?: string[],
-};
-
-export type Spec = {
-    el?: Element,
-    tag?: string,
-    tags: string[],
-    target: Element,
-    samePage?: boolean,
-    sameHost?: boolean,
-    validTarget?: boolean,
-    linkContext?: boolean,
-    linkContextPath?: string,
-    linkContextName?: string,
-    customEventProperties?: Object,
-};
-
-let location;
-let filters;
-
-const filterSource = element => filters.filter(f => f === element);
-
-const compareHosts = (url?: string = ''): boolean => {
-    if (url.startsWith('mailto:')) {
-        return false;
-    }
-
-    const urlHost = url.match(/:\/\/(.[^/]+)/);
-
-    // Lack of a urlHost implies a relative url.
-    // For absolute urls we are protocol-agnostic,
-    // e.g. we should treat https://www.theguardian.com/foo -> http://www.theguardian.com/bar as a same-host link.
-    return !urlHost || urlHost[1] === location.hostname;
-};
-
-const getClickSpec = (spec: Spec, forceValid: ?boolean): Spec | boolean => {
-    if (!spec.el) {
-        return false;
-    }
-
-    const el = spec.el;
-    const elName = el.tagName.toLowerCase();
-    const dataLinkName = el.getAttribute('data-link-name');
-
-    if (dataLinkName) {
-        spec.tags.unshift(dataLinkName);
-    }
-
-    if (elName === 'body') {
-        spec.tag = spec.tags.join(' | ');
-        delete spec.el;
-
-        if (spec.validTarget && el.getAttribute('data-link-test')) {
-            spec.tag = `${el.getAttribute('data-link-test') ||
-                ''} | ${spec.tag || ''}`;
-        }
-        return spec;
-    }
-
-    const customEventProperties = JSON.parse(
-        el.getAttribute('data-custom-event-properties') || '{}'
-    );
-    spec.customEventProperties = Object.assign(
-        customEventProperties,
-        spec.customEventProperties
-    );
-
-    if (!spec.validTarget) {
-        spec.validTarget = filterSource(elName).length > 0 || !!forceValid;
-        if (spec.validTarget) {
-            const href = el.getAttribute('href');
-            spec.target = el;
-            spec.samePage =
-                (href && href.startsWith('#')) ||
-                elName === 'button' ||
-                !!el.hasAttribute('data-is-ajax');
-
-            spec.sameHost = spec.samePage || (!!href && compareHosts(href));
-        }
-    }
-
-    // Pick up the nearest data-link-context
-    if (!spec.linkContext && el.getAttribute('data-link-context-path')) {
-        spec.linkContextPath = el.getAttribute('data-link-context-path') || '';
-        spec.linkContextName = el.getAttribute('data-link-context-name') || '';
-    }
-
-    spec.el = (el.parentNode: any);
-
-    return getClickSpec(spec);
-};
-
-const initClickstream = (opts?: Options = {}) => {
-    // Allow a fake window.location to be passed in for testing
-    location = opts.location || window.location;
-    filters = opts.filter || [];
-
-    // delegate, emit the derived tag
-    bean.add(
-        document.body,
-        'click',
-        (event: Event): void => {
-            const clickSpec = getClickSpec({
-                el: (event.target: any),
-                tags: [],
-                target: (event.target: any),
-            });
-
-            mediator.emit('module:clickstream:click', clickSpec);
-        }
-    );
-};
-
-export { initClickstream };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/clickstream.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/clickstream.spec.js
deleted file mode 100644
index 4e82abd4061..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/clickstream.spec.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/clickstream.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import mediator from 'lib/mediator';
-import { initClickstream } from 'common/modules/ui/clickstream';
-import type { Spec } from 'common/modules/ui/clickstream';
-
-jest.mock('lib/mediator');
-
-describe('Clickstream', () => {
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-                <div data-link-name="outer div">
-                    <p id="not-inside-a-link">
-                        <a href="/foo" id="click-me" data-link-name="the link">The link</a>
-                        <a href="/foo" id="click-me-ancestor" data-link-name="the ancestor">
-                            <span>
-                                <span>
-                                    <span id="click-me-descendant" data-link-name="the descendant">The link descendant</span>
-                                </span>
-                            </span>
-                        </a>
-                        <a href="/foo" id="click-me-quick" data-is-ajax="true" data-link-name="xhr link">Xhr Link</a>
-                        <button id="click-me-button" data-link-name="the button">Span Link</button>
-                        <p href="#hello" id="click-me-slow" data-link-name="paragraph">Paragraph Link</p>
-                        <a href="/foo" id="click-me-internal" data-link-name="internal link">Same-host link</a>
-                        <a href="http://google.com/foo" id="click-me-external" data-link-name="external link">Other-host link</a>
-                        <span data-link-context="the outer context">
-                            <span data-link-context-path="the inner context path" data-link-context-name="the inner context name">
-                                <button href="/foo" id="click-me-link-context" data-link-name="the contextual link">The link</button>
-                            </span>
-                        </span>
-                        <div data-custom-event-properties='{ "prop1": "foo" }'>
-                            <button id="click-me-custom-event-properties" data-custom-event-properties='{ "prop2": "foo" }'>Button</button>
-                        </div>
-                    </p>
-                </div>`;
-        }
-    });
-
-    afterEach(() => {
-        bean.remove(document.body, 'click');
-        mediator.removeEvent('module:clickstream:click');
-    });
-
-    const buildClickspecInspector = (
-        expectedClickSpec: Spec,
-        callback: () => void
-    ) => (clickSpec: Spec) => {
-        Object.keys(expectedClickSpec).forEach(key => {
-            // `target` is a HTML Element and hard to match on
-            if (key !== 'target') {
-                expect(clickSpec[key]).toEqual(expectedClickSpec[key]);
-            }
-        });
-        callback();
-    };
-
-    it("should report the ancestor 'clickable' element, not the element that actually received the click", done => {
-        initClickstream({ filter: ['a'] });
-
-        const el = document.getElementById('click-me-descendant');
-        const expectedClickSpec = {
-            samePage: false,
-            sameHost: true,
-            validTarget: true,
-            tag: 'outer div | the ancestor | the descendant',
-            tags: ['outer div', 'the ancestor', 'the descendant'],
-            customEventProperties: {},
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-
-    it('should return clickspec with false validTarget when clicked element is *not* in the filter list of given element sources', done => {
-        initClickstream({ filter: ['a'] });
-
-        const el = document.getElementById('not-inside-a-link');
-        const expectedClickSpec = {
-            validTarget: false,
-            tag: 'outer div',
-            tags: ['outer div'],
-            customEventProperties: {},
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-
-    it('should indicate if a click emanates from a internal anchor', done => {
-        initClickstream({ filter: ['p'] });
-
-        const el = document.getElementById('click-me-slow');
-        const expectedClickSpec = {
-            samePage: true,
-            sameHost: true,
-            validTarget: true,
-            tag: 'outer div | paragraph',
-            tags: ['outer div', 'paragraph'],
-            customEventProperties: {},
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-
-    it('should indicate if a click emanates from a same-host link', done => {
-        initClickstream({ filter: ['a'] });
-
-        const el = document.getElementById('click-me-internal');
-        const expectedClickSpec = {
-            samePage: false,
-            sameHost: true,
-            validTarget: true,
-            tag: 'outer div | internal link',
-            tags: ['outer div', 'internal link'],
-            customEventProperties: {},
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-
-    it('should indicate if a click emanates from an other-host link', done => {
-        initClickstream({ filter: ['a'] });
-
-        const el = document.getElementById('click-me-external');
-        const expectedClickSpec = {
-            samePage: false,
-            sameHost: false,
-            validTarget: true,
-            tag: 'outer div | external link',
-            tags: ['outer div', 'external link'],
-            customEventProperties: {},
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-
-    it('should pick up the closest data-link-context attribute (only)', done => {
-        initClickstream({ filter: ['button'] });
-
-        const el = document.getElementById('click-me-link-context');
-        const expectedClickSpec = {
-            samePage: true,
-            sameHost: true,
-            validTarget: true,
-            tag: 'outer div | the contextual link',
-            tags: ['outer div', 'the contextual link'],
-            linkContextPath: 'the inner context path',
-            linkContextName: 'the inner context name',
-            customEventProperties: {},
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-
-    it('should get custom event properties recursively', done => {
-        initClickstream({ filter: ['button'] });
-
-        const el = document.getElementById('click-me-custom-event-properties');
-        const expectedClickSpec = {
-            tag: 'outer div',
-            tags: ['outer div'],
-            samePage: true,
-            sameHost: true,
-            validTarget: true,
-            customEventProperties: { prop1: 'foo', prop2: 'foo' },
-            target: document.createElement('a'),
-        };
-
-        mediator.on(
-            'module:clickstream:click',
-            buildClickspecInspector(expectedClickSpec, done)
-        );
-        bean.fire(el, 'click');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/cmp-ui.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/cmp-ui.js
deleted file mode 100644
index 01193e65981..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/cmp-ui.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/cmp-ui.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { cmp } from '@guardian/consent-management-platform';
-import { getPrivacyFramework } from 'lib/getPrivacyFramework';
-import type { Banner } from 'common/modules/ui/bannerPicker';
-
-export const addPrivacySettingsLink = (): void => {
-    if (!config.get('switches.consentManagement', true)) {
-        return;
-    }
-
-    const privacyLink: ?HTMLElement = document.querySelector(
-        'a[data-link-name=privacy]'
-    );
-
-    if (privacyLink) {
-        const privacyLinkListItem: ?Element = privacyLink.parentElement;
-
-        if (privacyLinkListItem) {
-            const newPrivacyLink: HTMLElement = privacyLink.cloneNode(false);
-
-            newPrivacyLink.dataset.linkName = 'privacy-settings';
-            newPrivacyLink.removeAttribute('href');
-            newPrivacyLink.innerText = getPrivacyFramework().ccpa
-                ? 'California resident – Do Not Sell'
-                : 'Privacy settings';
-
-            const newPrivacyLinkListItem: Element = privacyLinkListItem.cloneNode(
-                false
-            );
-
-            newPrivacyLinkListItem.appendChild(newPrivacyLink);
-
-            privacyLinkListItem.insertAdjacentElement(
-                'beforebegin',
-                newPrivacyLinkListItem
-            );
-
-            newPrivacyLink.addEventListener('click', () => {
-                cmp.showPrivacyManager();
-            });
-        }
-    }
-};
-
-export const cmpBannerCandidate: Banner = {
-    id: 'cmpUi',
-    canShow: (): Promise<boolean> => {
-        if (!config.get('switches.cmp', true)) return Promise.resolve(false);
-        return cmp.willShowPrivacyMessage();
-    },
-    // Remote banner is injected first: show() always resolves to `true`
-    show: (): Promise<boolean> => Promise.resolve(true),
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/cmp-ui.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/cmp-ui.spec.js
deleted file mode 100644
index 5733d666154..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/cmp-ui.spec.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/cmp-ui.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-import { cmp } from '@guardian/consent-management-platform';
-import { cmpBannerCandidate } from './cmp-ui';
-
-jest.mock('lib/raven');
-
-jest.mock('@guardian/consent-management-platform', () => ({
-    cmp: {
-        willShowPrivacyMessage: jest.fn(),
-    },
-    onConsentChange: jest.fn(),
-}));
-
-jest.mock('lib/report-error', () => jest.fn());
-
-describe('cmp-ui', () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    describe('cmpBannerCandidate', () => {
-        describe('canShow', () => {
-            it('return true if cmp.willShowPrivacyMessage() resolves to true', () => {
-                cmp.willShowPrivacyMessage.mockResolvedValue(true);
-
-                return cmpBannerCandidate.canShow().then(show => {
-                    expect(cmp.willShowPrivacyMessage).toHaveBeenCalledTimes(1);
-                    expect(show).toBe(true);
-                });
-            });
-            it('return false if cmp.willShowPrivacyMessage() resolves to false', () => {
-                cmp.willShowPrivacyMessage.mockResolvedValue(false);
-
-                return cmpBannerCandidate.canShow().then(show => {
-                    expect(show).toBe(false);
-                });
-            });
-            it('return false if CMP switch is off', () => {
-                config.set('switches.cmp', false);
-
-                return cmpBannerCandidate.canShow().then(show => {
-                    expect(show).toBe(false);
-                });
-            });
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/dropdowns.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/dropdowns.js
deleted file mode 100644
index a193fdfe1b9..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/dropdowns.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/dropdowns.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-
-const containerSelector = '.dropdown';
-const buttonCN = 'dropdown__button';
-const contentCN = 'dropdown__content';
-
-const updateAria = (container: Element): void => {
-    const v: boolean = container.classList.contains('dropdown--active');
-    const content = Array.from(container.getElementsByClassName(contentCN));
-    const button = Array.from(container.getElementsByClassName(buttonCN));
-    content.forEach((c: Element) => {
-        c.setAttribute('aria-hidden', (!v).toString());
-    });
-
-    [...content, ...button].forEach((c: Element) => {
-        c.setAttribute('aria-expanded', v.toString());
-    });
-};
-
-const init = (): void => {
-    bean.on(document.body, 'click', `.${buttonCN}`, (e: Event) => {
-        const container = (e.currentTarget: any).closest(containerSelector);
-
-        if (container) {
-            fastdom
-                .measure(() => {
-                    const documentElement: ?HTMLElement =
-                        document.documentElement;
-                    const content = container.querySelector(`.${contentCN}`);
-                    const isActive: boolean = container.classList.contains(
-                        'dropdown--active'
-                    );
-                    const isAnimated: boolean =
-                        container.classList.contains('dropdown--animated') &&
-                        (documentElement !== null &&
-                            documentElement !== undefined &&
-                            documentElement.classList.contains(
-                                'disable-flashing-elements'
-                            ) === false);
-                    const contentEstimatedHeight =
-                        content.offsetHeight !== undefined &&
-                        content.offsetHeight < window.innerHeight
-                            ? content.offsetHeight
-                            : window.innerHeight;
-
-                    /*
-                    by clamping the transition to windowHeight we avoid
-                    a very awkward effect where a long list doesn't really
-                    get any visual closing feedback in the first milliseconds
-                    because its starting to close from the bottom, which is off-screen
-                    */
-
-                    return {
-                        content,
-                        isActive,
-                        isAnimated,
-                        contentEstimatedHeight,
-                    };
-                })
-                .then(
-                    ({
-                        content,
-                        isActive,
-                        isAnimated,
-                        contentEstimatedHeight,
-                    }) => {
-                        if (isAnimated && 'ontransitionend' in window) {
-                            fastdom
-                                .mutate(() => {
-                                    container.style.pointerEvents = 'none';
-                                    if (!isActive) {
-                                        container.classList.toggle(
-                                            'dropdown--active'
-                                        );
-                                    }
-                                    content.style.height = isActive
-                                        ? `${contentEstimatedHeight}px`
-                                        : 0;
-                                })
-                                .then(() => {
-                                    requestAnimationFrame(() => {
-                                        content.style.height = isActive
-                                            ? 0
-                                            : `${contentEstimatedHeight}px`;
-
-                                        bean.one(
-                                            content,
-                                            'transitionend',
-                                            () => {
-                                                fastdom.mutate(() => {
-                                                    content.style.height =
-                                                        'auto';
-                                                    container.style.pointerEvents =
-                                                        'all';
-                                                    if (isActive) {
-                                                        container.classList.toggle(
-                                                            'dropdown--active'
-                                                        );
-                                                    }
-                                                    updateAria(container);
-                                                });
-                                            }
-                                        );
-                                    });
-                                });
-                        } else {
-                            fastdom.mutate(() => {
-                                container.classList.toggle('dropdown--active');
-                                updateAria(container);
-                            });
-                        }
-                    }
-                );
-        }
-    });
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/expandable.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/expandable.js
deleted file mode 100644
index dec3919da48..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/expandable.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/expandable.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
-    Module: expandable.js
-    Description: Used to make a list of items expand and contract
-*/
-
-type Options = {
-    dom: HTMLElement,
-    expanded?: boolean,
-    showCount?: boolean,
-    buttonAfterEl?: HTMLElement,
-};
-
-class Expandable {
-    opts: Options;
-    dom: Element;
-    cta: Element;
-    expanded: boolean;
-    showCount: boolean;
-
-    constructor(options: Options) {
-        this.opts = options;
-        this.dom = options.dom;
-        this.expanded = options.expanded !== false;
-        this.cta = document.createElement('button');
-        this.showCount = options.showCount !== false;
-    }
-
-    renderState(): void {
-        if (this.expanded) {
-            this.dom.classList.remove('shut');
-        } else {
-            this.dom.classList.add('shut');
-        }
-    }
-
-    getCount(): number {
-        return parseInt(this.dom.getAttribute('data-count') || '0', 10);
-    }
-
-    updateCallToAction(): void {
-        const text = `Show ${this.showCount ? `${this.getCount()} ` : ''}${
-            this.expanded ? 'fewer' : 'more'
-        }`;
-        this.cta.innerHTML = text;
-        this.cta.setAttribute(
-            'data-link-name',
-            `Show ${this.expanded ? 'more' : 'fewer'}`
-        );
-        this.cta.setAttribute('data-is-ajax', '1');
-    }
-
-    toggleExpanded(): void {
-        this.expanded = !this.expanded;
-        this.renderState();
-        this.updateCallToAction();
-    }
-
-    isOpen(): boolean {
-        return !this.dom.classList.contains('shut');
-    }
-
-    renderCallToAction(): void {
-        this.cta.addEventListener('click', () => {
-            this.toggleExpanded();
-        });
-        this.cta.className = 'cta';
-        if (this.opts.buttonAfterEl) {
-            this.opts.buttonAfterEl.insertAdjacentElement('afterend', this.cta);
-        } else {
-            this.dom.appendChild(this.cta);
-        }
-        this.updateCallToAction();
-    }
-
-    scrollToCallToAction(): void {
-        // feels a bit hacky but need to give the transition time to finish before scrolling
-        if (!this.expanded) {
-            window.setTimeout(() => {
-                this.cta.scrollIntoView();
-            }, 550);
-        }
-    }
-
-    init(): void {
-        if (
-            this.dom.classList.contains('expandable-initialised') ||
-            !this.dom.innerHTML ||
-            this.getCount() < 3
-        ) {
-            return;
-        }
-        this.dom.classList.add('expandable-initialised');
-
-        this.renderCallToAction();
-        this.renderState();
-    }
-
-    toggle(): void {
-        this.toggleExpanded();
-    }
-}
-
-export { Expandable };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/expandable.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/expandable.spec.js
deleted file mode 100644
index 5a733a9a12d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/expandable.spec.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/expandable.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import { Expandable } from 'common/modules/ui/expandable';
-
-describe('Expandable', () => {
-    const ctaOpen = ([amount]: Array<string>): string =>
-        `Show ${amount ? `${amount} ` : ''}fewer`;
-    const ctaShut = ([amount]: Array<string>): string =>
-        `Show ${amount ? `${amount} ` : ''}more`;
-
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-            <div id="trail-a" data-count="5">
-                <ul>
-                    <li class="t1">one</li>
-                    <li class="t2">two</li>
-                </ul>
-
-                <ul class="flex">
-                    <li class="t3">three</li>
-                    <li class="t4">four</li>
-                    <li class="t5">five</li>
-                </ul>
-            </div>
-
-            <div id="trail-b" data-count="3">
-                <ul>
-                    <li class="t1">one</li>
-                    <li class="t1">two</li>
-                </ul>
-
-                <ul class="flex">
-                    <li class="t2">three</li>
-                </ul>
-
-            </div>
-
-            <div id="trail-c" data-count="3" class="shut">
-                <ul></ul>
-            </div>
-
-            <div id="trail-d" data-count="1" class="shut">
-                <ul></ul>
-            </div>
-
-            <div id="trail-e" data-count="3">
-                <ul>
-                    <li class="t1">one</li>
-                    <li class="t2">two</li>
-                </ul>
-
-                <ul class="flex">
-                    <li class="t3">three</li>
-                </ul>
-            </div>
-
-            <div id="trail-f" data-count="-1">
-                <ul></ul>
-            </div>
-
-            <div id="trail-g" data-count="2">
-                <ul></ul>
-            </div>
-
-            <div id="trail-h" data-count="3">
-                <ul>
-                    <li class="t1">one</li>
-                    <li class="t2">two</li>
-                </ul>
-
-                <ul class="flex">
-                    <li class="t3">three</li>
-                </ul>
-            </div>
-            `;
-        }
-    });
-
-    it('should be able to operate multiple exapandables on a single page', () => {
-        const elA = document.querySelector('#trail-a');
-        const elB = document.querySelector('#trail-b');
-
-        if (elA && elB) {
-            new Expandable({ dom: elA }).init();
-            new Expandable({ dom: elB }).init();
-
-            expect($('#trail-a .cta')[0].innerHTML).toEqual(ctaOpen`5`);
-            expect($('#trail-b .cta')[0].innerHTML).toEqual(ctaOpen`3`);
-        }
-    });
-
-    it('should correctly render the default shut state', () => {
-        const elC = document.querySelector('#trail-c');
-
-        if (elC) {
-            new Expandable({
-                dom: elC,
-                expanded: false,
-            }).init();
-
-            expect($('#trail-c')[0].classList).toContain('shut');
-            expect($('#trail-c .cta').text()).toEqual(ctaShut`3`);
-        }
-    });
-
-    it('should expand and contract a panel', () => {
-        const elD = document.querySelector('#trail-d');
-
-        if (elD) {
-            const x = new Expandable({ dom: elD });
-            x.init();
-
-            // shut
-            x.toggle();
-            expect(elD.className).toEqual('shut');
-
-            // open
-            x.toggle();
-            expect(elD.className).toEqual('');
-        }
-    });
-
-    it('should visually represent the number of items in the panel', () => {
-        const elE = document.querySelector('#trail-e');
-
-        if (elE) {
-            new Expandable({ dom: elE }).init();
-            expect($('#trail-e .cta')[0].innerHTML).toEqual(ctaOpen`3`);
-        }
-    });
-
-    it('should not enable expandables where there are less than three hidden trails', () => {
-        const elG = document.querySelector('#trail-g');
-
-        if (elG) {
-            new Expandable({ dom: elG }).init();
-            expect($('#trail-g .cta').length).toEqual(0);
-        }
-    });
-
-    it('should be able to turn off the trail count', () => {
-        const elH = document.querySelector('#trail-h');
-
-        if (elH) {
-            new Expandable({
-                dom: elH,
-                showCount: false,
-            }).init();
-            expect($('#trail-h .cta')[0].innerHTML).toEqual(ctaOpen``);
-        }
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/faux-block-link.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/faux-block-link.js
deleted file mode 100644
index 6bc77a90931..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/faux-block-link.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/faux-block-link.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import fastdom from 'fastdom';
-
-const overlaySelector = '.u-faux-block-link__overlay';
-const hoverStateClassName = 'u-faux-block-link--hover';
-
-const showIntentToClick = (e: Event): void => {
-    fastdom.mutate(() => {
-        if ((e.currentTarget: any).parentElement) {
-            (e.currentTarget: any).parentElement.classList.add(
-                hoverStateClassName
-            );
-        }
-    });
-};
-
-const removeIntentToClick = (e: Event): void => {
-    fastdom.mutate(() => {
-        if ((e.currentTarget: any).parentElement) {
-            (e.currentTarget: any).parentElement.classList.remove(
-                hoverStateClassName
-            );
-        }
-    });
-};
-
-const fauxBlockLink = (): void => {
-    // mouseover
-    bean.on(document.body, 'mouseenter', overlaySelector, showIntentToClick);
-    // mouseout
-    bean.on(document.body, 'mouseleave', overlaySelector, removeIntentToClick);
-};
-
-export { fauxBlockLink };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/full-height.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/full-height.js
deleted file mode 100644
index 0de32bad286..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/full-height.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/full-height.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import fastdom from 'lib/fastdom-promise';
-import mediator from 'lib/mediator';
-import { getBreakpoint } from 'lib/detect';
-
-// Helper for full height elements as 100vh on mobile Chrome and Safari
-// changes as the url bar slides in and out
-// http://code.google.com/p/chromium/issues/detail?id=428132
-
-const renderBlock = (state: Object): Promise<void> =>
-    fastdom
-        .mutate(() => {
-            state.$el.css('height', '');
-        })
-        .then(() => {
-            if (state.isMobile) {
-                return fastdom
-                    .measure(() => state.$el.height())
-                    .then(height =>
-                        fastdom.mutate(() => {
-                            state.$el.css('height', height);
-                        })
-                    );
-            }
-        });
-
-const render = (state: Object): void => {
-    state.elements.forEach(element => {
-        renderBlock({ $el: $(element), isMobile: state.isMobile });
-    });
-};
-
-const getState = (): Promise<{
-    elements: Array<HTMLElement>,
-    isMobile: boolean,
-}> =>
-    fastdom.measure(() => {
-        const elements = Array.from(
-            document.getElementsByClassName('js-is-fixed-height')
-        );
-
-        return { elements, isMobile: getBreakpoint() === 'mobile' };
-    });
-
-const onViewportChange = (): void => {
-    getState().then(render);
-};
-
-const init = (): void => {
-    mediator.on('window:throttledResize', onViewportChange);
-    mediator.on('window:orientationchange', onViewportChange);
-
-    onViewportChange();
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/last-modified.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/last-modified.js
deleted file mode 100644
index ea1153944f1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/last-modified.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/last-modified.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-
-const lastModified = (): void => {
-    fastdom
-        .measure(() => ({
-            lastModifiedElm: document.querySelector('.js-lm'),
-            webPublicationDateElm: document.querySelector('.js-wpd'),
-        }))
-        .then(els => {
-            const { lastModifiedElm, webPublicationDateElm } = els;
-
-            if (lastModifiedElm && webPublicationDateElm) {
-                fastdom.mutate(() => {
-                    webPublicationDateElm.classList.add(
-                        'content__dateline-wpd--modified'
-                    );
-                });
-
-                webPublicationDateElm.addEventListener('click', () => {
-                    fastdom.mutate(() => {
-                        lastModifiedElm.classList.toggle('u-h');
-                    });
-                });
-            }
-        });
-};
-
-export { lastModified };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/message.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/message.js
deleted file mode 100644
index 1fbaabce07e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/message.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/message.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import { noop } from 'lib/noop';
-import bean from 'bean';
-import userPrefs from 'common/modules/user-prefs';
-import mediator from 'lib/mediator';
-import { isBreakpoint } from 'lib/detect';
-import { begin } from 'common/modules/analytics/register';
-import uniq from 'lodash/uniq';
-
-type MessagePosition = 'top' | 'bottom';
-
-/**
- * Message provides a common means of flash messaging a user in the UI.
- *
- * @constructor
- * @param {String} id Identifier of the message
- * @param {Object=} options
- */
-class Message {
-    id: string;
-    important: boolean;
-    permanent: boolean;
-    blocking: boolean;
-    trackDisplay: boolean;
-    type: string;
-    position: MessagePosition;
-    siteMessageComponentName: string;
-    siteMessageLinkName: string;
-    siteMessageCloseBtn: string;
-    prefs: string;
-    widthBasedMessage: boolean;
-    cssModifierClass: string;
-    customJs: Object => void;
-    customOpts: Object;
-    $siteMessage: Object;
-    $siteMessageContainer: Object;
-    $siteMessageOverlay: Object;
-
-    constructor(id: string, options?: Object) {
-        const opts = options || {};
-        this.id = id;
-        this.important = opts.important || false;
-        this.permanent = opts.permanent || false;
-        this.blocking = opts.blocking || false;
-        this.trackDisplay = opts.trackDisplay || false;
-        this.type = opts.type || 'banner';
-        this.position = opts.position || 'bottom';
-        this.siteMessageComponentName = opts.siteMessageComponentName || '';
-        this.siteMessageLinkName = opts.siteMessageLinkName || '';
-        this.siteMessageCloseBtn = opts.siteMessageCloseBtn || '';
-        this.prefs = 'messages';
-        this.widthBasedMessage = opts.widthBasedMessage || false;
-        this.cssModifierClass = opts.cssModifierClass || '';
-        this.customJs = opts.customJs || noop;
-        this.customOpts = opts.customOpts || {};
-        this.$siteMessageContainer = $('.js-site-message');
-        this.$siteMessageOverlay = $('.js-site-message-overlay');
-    }
-
-    show(message: string): boolean {
-        // don't let messages unknowingly overwrite each other
-        if (
-            !this.$siteMessageContainer.hasClass('is-hidden') &&
-            !this.important
-        ) {
-            // if we're not showing a banner message, display it in the footer
-            return false;
-        }
-
-        // Move the message to the top if needed
-        if (this.position === 'top') {
-            const bodyEl: ?HTMLElement = document.body;
-            if (!bodyEl) throw new Error('Missing <body>');
-            const bodyElFirstChild: ?Node = bodyEl.childNodes[0];
-            if (!bodyElFirstChild) throw new Error('<body> is empty');
-
-            bodyEl.insertBefore(
-                this.$siteMessageContainer[0],
-                bodyElFirstChild
-            );
-            this.$siteMessageContainer.addClass('site-message--on-top');
-        }
-
-        $('.js-site-message-copy').html(message);
-
-        // Add a blocking overlay if needed
-        if (this.blocking) {
-            $('body, html').addClass('is-scroll-blocked');
-            this.$siteMessageOverlay.removeClass('is-hidden');
-            this.$siteMessageOverlay[0].addEventListener('click', () => {
-                this.$siteMessageContainer[0].focus();
-            });
-            this.$siteMessageOverlay[0].addEventListener('focus', () => {
-                this.$siteMessageContainer[0].focus();
-            });
-            this.trapFocus();
-        }
-
-        // Add site modifier message
-        if (this.cssModifierClass) {
-            this.$siteMessageContainer.addClass(
-                `site-message--${this.cssModifierClass}`
-            );
-        }
-
-        this.$siteMessage = $('.js-site-message__message');
-
-        // Check and show the width based message
-        this.updateMessageOnWidth();
-        mediator.on(
-            'window:throttledResize',
-            this.updateMessageOnWidth.bind(this)
-        );
-
-        if (this.siteMessageComponentName) {
-            this.$siteMessageContainer.attr(
-                'data-component',
-                this.siteMessageComponentName
-            );
-            if (this.trackDisplay) {
-                begin(this.siteMessageComponentName);
-            }
-        }
-        if (this.siteMessageLinkName) {
-            this.$siteMessageContainer.attr(
-                'data-link-name',
-                this.siteMessageLinkName
-            );
-        }
-        if (this.siteMessageCloseBtn) {
-            $('.site-message__close-btn', '.js-site-message').attr(
-                'data-link-name',
-                this.siteMessageCloseBtn
-            );
-        }
-
-        this.$siteMessageContainer
-            .addClass(`site-message--${this.type}`)
-            .addClass(`site-message--${this.id}`);
-        this.$siteMessageContainer.removeClass('is-hidden');
-        if (this.permanent) {
-            this.$siteMessageContainer.addClass('site-message--permanent');
-            $('.site-message__close').addClass('is-hidden');
-        } else {
-            bean.on(
-                document,
-                'click',
-                '.js-site-message-close',
-                this.acknowledge.bind(this)
-            );
-        }
-
-        this.customJs(this.customOpts);
-
-        if (this.type === 'modal') {
-            this.bindModalListeners();
-        }
-
-        // Tell the calling function that our message is shown
-        return true;
-    }
-
-    bindModalListeners(): void {
-        bean.on(document, 'click', '.js-site-message-inner', e => {
-            // Suppress same-level and parent handling, but allow default click behaviour.
-            // This handler must come first.
-            e.stopImmediatePropagation();
-            e.stopPropagation();
-        });
-        bean.on(
-            document,
-            'click',
-            '.js-site-message',
-            this.acknowledge.bind(this)
-        );
-    }
-
-    trapFocus(): void {
-        const messageEl = this.$siteMessageContainer[0];
-        const trapEndEl = document.createElement('div');
-
-        trapEndEl.tabIndex = 0;
-
-        trapEndEl.addEventListener('focus', () => {
-            messageEl.focus();
-        });
-
-        messageEl.append(trapEndEl);
-        messageEl.focus();
-    }
-
-    hide(): void {
-        $('#header').removeClass('js-site-message');
-        this.$siteMessageContainer.addClass('is-hidden');
-        this.$siteMessageOverlay.addClass('is-hidden');
-        $('body, html').removeClass('is-scroll-blocked');
-    }
-
-    remember(): void {
-        if (this.isRemembered()) {
-            return;
-        }
-
-        const messageStates = userPrefs.get(this.prefs) || [];
-        messageStates.push(this.id);
-        userPrefs.set(this.prefs, uniq(messageStates));
-    }
-
-    isRemembered(): boolean {
-        const messageStates = userPrefs.get(this.prefs) || [];
-        return messageStates.includes(this.id);
-    }
-
-    acknowledge(): void {
-        this.remember();
-        this.hide();
-    }
-
-    updateMessageOnWidth(): void {
-        const narrowDataAttr = 'site-message-narrow';
-        const wideDataAttr = 'site-message-wide';
-
-        if (
-            this.widthBasedMessage &&
-            this.$siteMessage &&
-            this.$siteMessage.length
-        ) {
-            this.updateMessageFromData(
-                isBreakpoint({
-                    max: 'tablet',
-                })
-                    ? narrowDataAttr
-                    : wideDataAttr
-            );
-        }
-    }
-
-    updateMessageFromData(dataAttr: string): void {
-        if (this.$siteMessage) {
-            const message = this.$siteMessage.data(dataAttr);
-            if (message && this.$siteMessage) {
-                this.$siteMessage.text(message);
-            }
-        }
-    }
-}
-
-const hasUserAcknowledgedBanner = (id: string): boolean => {
-    const messageStates = userPrefs.get('messages');
-    return messageStates && messageStates.includes(id);
-};
-
-export type { MessagePosition };
-export { Message, hasUserAcknowledgedBanner };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/message.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/message.spec.js
deleted file mode 100644
index e70d0a9b510..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/message.spec.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/message.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import userPrefs from 'common/modules/user-prefs';
-import { Message } from './message';
-
-jest.mock('common/modules/user-prefs');
-jest.mock('common/modules/analytics/register', () => ({
-    begin: jest.fn(),
-}));
-
-describe('Message', () => {
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-                <div id="header" class="l-header"></div>
-                <div class="js-site-message is-hidden">
-                    <div class="js-site-message-copy">...</div>
-                    <button class="site-message__close"></button>
-                </div>
-            `;
-        }
-    });
-
-    afterEach(() => {
-        userPrefs.remove('messages');
-    });
-
-    it('Show a message', () => {
-        new Message('foo').show('hello world');
-        expect($('.js-site-message-copy').text()).toEqual('hello world');
-        expect($('.js-site-message').hasClass('is-hidden')).toEqual(false);
-    });
-
-    it('Hide a message', () => {
-        const m = new Message('foo');
-        m.show('hello world');
-        m.hide();
-        expect($('.js-site-message').hasClass('is-hidden')).toEqual(true);
-    });
-
-    it('Remember the user has acknowledged the message', () => {
-        const m = new Message('foo');
-        m.acknowledge();
-        expect(userPrefs.get('messages')).toEqual(['foo']);
-    });
-
-    it('Block messages from overwriting each other', () => {
-        const m1 = new Message('foo');
-        const m2 = new Message('bar');
-        m1.show('message one');
-        m2.show('message two');
-        expect($('.js-site-message-copy').text()).toEqual('message one');
-    });
-
-    it("Allow 'important' messages to overwrite an existing message", () => {
-        const m1 = new Message('a');
-        const m2 = new Message('b', { important: true });
-        const m3 = new Message('c');
-        m1.show('message one');
-        m2.show('message two');
-        m3.show('message three');
-        expect($('.js-site-message-copy').text()).toEqual('message two');
-    });
-
-    it('has option to stay permanently open', () => {
-        new Message('a', { permanent: true }).show('message one');
-        expect($('.site-message__close').hasClass('is-hidden')).toEqual(true);
-    });
-
-    it('permanent message should have class added', () => {
-        new Message('a', { permanent: true }).show('message one');
-        expect($('.site-message--permanent').length).toEqual(1);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/normalise.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/normalise.js
deleted file mode 100644
index 994a561495d..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/normalise.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/normalise.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-export const go = () => {
-    try {
-        fetch('https://sndrs.github.io/nfn/nfn.json')
-            .then(response => response.json())
-            .then(({ dictionary, transforms }) => {
-                Object.keys(dictionary).forEach(key => {
-                    dictionary[key.toLowerCase()] = dictionary[
-                        key
-                    ].toLowerCase();
-                });
-
-                const dictionaryRegex = new RegExp(
-                    `(\\W)(${Object.keys(dictionary).join(
-                        '|'
-                    )})(s|ed|ing|)(\\W)`,
-                    'g'
-                );
-
-                const transformRegexs = Object.keys(transforms).reduce(
-                    (regexs, transform) => ({
-                        [transforms[transform]]: new RegExp(transform, 'g'),
-                        ...regexs,
-                    }),
-                    {}
-                );
-
-                const transformers = Object.keys(transformRegexs);
-
-                const normalise = (s: string) => {
-                    transformers.forEach(transformer => {
-                        // eslint-disable-next-line no-param-reassign
-                        s = s.replace(
-                            transformRegexs[transformer],
-                            transformer
-                        );
-                    });
-                    return s.replace(
-                        dictionaryRegex,
-                        (match, p1, p2, p3, p4) => p1 + dictionary[p2] + p3 + p4
-                    );
-                };
-
-                let node;
-
-                // $FlowFixMe (tree walker is confused in flow)
-                const walker = document.createTreeWalker(
-                    document.body,
-                    NodeFilter.SHOW_TEXT,
-                    null,
-                    false
-                );
-
-                // eslint-disable-next-line no-cond-assign
-                while ((node = walker.nextNode())) {
-                    node.nodeValue = normalise(node.nodeValue);
-                }
-
-                const observer = new MutationObserver(mutations => {
-                    mutations.forEach(mutation => {
-                        if (mutation.addedNodes) {
-                            Array.from(mutation.addedNodes).forEach(
-                                addedNode => {
-                                    if (
-                                        addedNode.nodeValue &&
-                                        addedNode.parentNode &&
-                                        addedNode.parentNode.nodeName !==
-                                            'STYLE' &&
-                                        addedNode.parentNode.nodeName !==
-                                            'SCRIPT'
-                                    ) {
-                                        addedNode.nodeValue = normalise(
-                                            addedNode.nodeValue
-                                        );
-                                    }
-                                }
-                            );
-                        }
-                    });
-                });
-
-                observer.observe(document, {
-                    characterData: true,
-                    subtree: true,
-                    childList: true,
-                });
-            });
-    } catch (e) {
-        console.error(e); // eslint-disable-line no-console
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/notification-counter.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/notification-counter.js
deleted file mode 100644
index 0701aed32a6..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/notification-counter.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/notification-counter.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import mediator from 'lib/mediator';
-
-const setCount = (count: number, title: string): void => {
-    document.title = count > 0 ? `(${count}) ${title}` : title;
-};
-
-const initNotificationCounter = (): void => {
-    const ORIGINAL_PAGETITLE = document.title;
-
-    mediator.on('modules:autoupdate:unread', count => {
-        setCount(count, ORIGINAL_PAGETITLE);
-    });
-};
-
-export { initNotificationCounter };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/notification-counter.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/notification-counter.spec.js
deleted file mode 100644
index fe1a4ff788c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/notification-counter.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/notification-counter.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import mediator from 'lib/mediator';
-import { initNotificationCounter } from './notification-counter';
-
-jest.mock('lib/mediator');
-
-describe('notification-counter', () => {
-    const ORIGINAL_PAGETITLE = document.title;
-
-    beforeEach(() => {
-        document.title = ORIGINAL_PAGETITLE;
-        initNotificationCounter();
-    });
-
-    it('should show an unread count when modules:autoupdate:unread is fired', () => {
-        mediator.emit('modules:autoupdate:unread', 5);
-        expect(document.title).toContain('(5)');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/relativedates.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/relativedates.js
deleted file mode 100644
index cc83f1f7946..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/relativedates.js
+++ /dev/null
@@ -1,240 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/relativedates.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import bonzo from 'bonzo';
-
-type RelativeDateOptions = {
-    notAfter?: number,
-    format?: string,
-    showTime?: boolean,
-};
-
-const dayOfWeek = (day): string =>
-    [
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
-    ][day];
-
-const monthAbbr = (month): string =>
-    [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ][month];
-
-const pad = (n): number | string => (n < 10 ? `0${n}` : n);
-
-const isToday = (date): boolean => {
-    const today = new Date();
-    return date && date.toDateString() === today.toDateString();
-};
-
-const isWithin24Hours = (date): boolean => {
-    const today = new Date();
-    return date && date.valueOf() > today.valueOf() - 24 * 60 * 60 * 1000;
-};
-
-const isWithinSeconds = (date: Date, seconds: number): boolean => {
-    const today = new Date();
-    return date && date.valueOf() > today.valueOf() - (seconds || 0) * 1000;
-};
-
-const isYesterday = (relative): boolean => {
-    const today = new Date();
-    const yesterday = new Date();
-    yesterday.setDate(today.getDate() - 1);
-    return relative.toDateString() === yesterday.toDateString();
-};
-
-const isWithinPastWeek = (date): boolean => {
-    const weekAgo = new Date().valueOf() - 7 * 24 * 60 * 60 * 1000;
-    return date.valueOf() >= weekAgo;
-};
-
-const isValidDate = (date): boolean => {
-    if (Object.prototype.toString.call(date) !== '[object Date]') {
-        return false;
-    }
-    return !Number.isNaN(date.getTime());
-};
-
-const getSuffix = (type, format, value): string => {
-    let strs;
-
-    const units = {
-        s: {
-            short: ['s'],
-            med: ['s ago'],
-            long: [' second ago', ' seconds ago'],
-        },
-        m: {
-            short: ['m'],
-            med: ['m ago'],
-            long: [' minute ago', ' minutes ago'],
-        },
-        h: {
-            short: ['h'],
-            med: ['h ago'],
-            long: [' hour ago', ' hours ago'],
-        },
-        d: {
-            short: ['d'],
-            med: ['d ago'],
-            long: [' day ago', ' days ago'],
-        },
-    };
-
-    if (units[type]) {
-        strs = units[type][format];
-        if (value === 1) {
-            return strs[0];
-        }
-        return strs[strs.length - 1];
-    }
-    return '';
-};
-
-const withTime = (date): string =>
-    ` ${date.getHours()}:${pad(date.getMinutes())}`;
-
-const makeRelativeDate = (
-    epoch: number,
-    opts: RelativeDateOptions = {}
-): false | string => {
-    let minutes;
-    let hours;
-    let days;
-    let delta = 0;
-    const then = new Date(Number(epoch));
-    const now = new Date();
-    const format = opts.format || 'short';
-    const extendedFormatting = opts.format === 'short' || opts.format === 'med';
-
-    if (!isValidDate(then)) {
-        return false;
-    }
-
-    delta = parseInt((now.getTime() - then) / 1000, 10);
-
-    if (delta < 0) {
-        return false;
-    } else if (opts.notAfter && delta > opts.notAfter) {
-        return false;
-    } else if (delta < 55) {
-        return delta + getSuffix('s', format, delta);
-    } else if (delta < 55 * 60) {
-        minutes = Math.round(delta / 60);
-        return minutes + getSuffix('m', format, minutes);
-    } else if (isToday(then) || (extendedFormatting && isWithin24Hours(then))) {
-        hours = Math.round(delta / 3600);
-        return hours + getSuffix('h', format, hours);
-    } else if (extendedFormatting && isWithinPastWeek(then)) {
-        days = Math.round(delta / 3600 / 24);
-        return days + getSuffix('d', format, days);
-    } else if (isYesterday(then)) {
-        // yesterday
-        return `Yesterday${withTime(then)}`;
-    } else if (delta < 5 * 24 * 60 * 60) {
-        // less than 5 days
-        return (
-            [
-                dayOfWeek(then.getDay()),
-                then.getDate(),
-                monthAbbr(then.getMonth()),
-                then.getFullYear(),
-            ].join(' ') + (opts.showTime ? withTime(then) : '')
-        );
-    }
-    return (
-        [then.getDate(), monthAbbr(then.getMonth()), then.getFullYear()].join(
-            ' '
-        ) + (opts.showTime ? withTime(then) : '')
-    );
-};
-
-const findValidTimestamps = (): bonzo =>
-    // `.blocktime time` used in blog html
-    $('.js-timestamp, .js-item__timestamp');
-
-const replaceLocaleTimestamps = (html: ?Element): void => {
-    const cls = 'js-locale-timestamp';
-    const context = html || document;
-
-    $(`.${cls}`, context).each(el => {
-        let datetime;
-        const $el = bonzo(el);
-        const timestamp = parseInt($el.attr('data-timestamp'), 10);
-
-        if (timestamp) {
-            datetime = new Date(timestamp);
-            el.innerHTML = `${pad(datetime.getHours())}:${pad(
-                datetime.getMinutes()
-            )}`;
-            $el.removeClass(cls);
-        }
-    });
-};
-
-const replaceValidTimestamps = (opts: RelativeDateOptions = {}): void => {
-    findValidTimestamps().each(el => {
-        let targetEl;
-        const $el = bonzo(el);
-
-        const // Epoch dates are more reliable, fallback to datetime for liveblog blocks
-            timestamp =
-                parseInt($el.attr('data-timestamp'), 10) ||
-                $el.attr('datetime');
-
-        const datetime = new Date(timestamp);
-
-        const relativeDate = makeRelativeDate(datetime.getTime(), {
-            // NOTE: if this is in a block (blog), assume we want added time on > 1 day old dates
-            showTime: bonzo($el.parent()).hasClass('block-time'),
-            format: $el.attr('data-relativeformat'),
-            notAfter: opts.notAfter,
-        });
-
-        if (relativeDate) {
-            // If we find .timestamp__text (facia), use that instead
-            targetEl = $el[0].querySelector('.timestamp__text') || $el[0];
-            if (!targetEl.getAttribute('title')) {
-                targetEl.setAttribute('title', bonzo(targetEl).text());
-            }
-            targetEl.innerHTML = relativeDate;
-        } else if (opts.notAfter) {
-            $el.addClass('modern-hidden');
-        }
-    });
-};
-
-const init = (opts: RelativeDateOptions = {}): void => {
-    replaceValidTimestamps(opts);
-    replaceLocaleTimestamps();
-};
-
-export { makeRelativeDate, isWithinSeconds, replaceLocaleTimestamps, init };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/relativedates.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/relativedates.spec.js
deleted file mode 100644
index b742aba37ba..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/relativedates.spec.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/relativedates.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import {
-    init as relativeDatesInit,
-    makeRelativeDate,
-    replaceLocaleTimestamps,
-} from './relativedates';
-
-const markup = `
-    <time id="time-valid" class="js-timestamp" datetime="2012-08-12T18:43:00.000Z">12th August</time>
-    <time id="time-invalid" class="js-timestamp" datetime="201-08-12agd18:43:00.000Z">Last Tuesday</time>
-    <time id="time-locale" class="js-locale-timestamp" datetime="2014-06-13T17:00:00+0100" data-timestamp="1402675200000">16:00</time>
-`;
-
-const fakeNowEpoch = Date.parse('2012-08-13T12:00:00+01:00');
-const OriginalDate = global.Date;
-
-beforeEach(() => {
-    if (document.body) {
-        document.body.innerHTML = markup;
-    }
-
-    // This is a *partial* implementation of Date.
-    global.Date = jest.fn(dateString => {
-        if (dateString !== undefined) {
-            return new OriginalDate(dateString);
-        }
-        return new Date(Number(fakeNowEpoch));
-    });
-    global.Date.now = jest.fn(() => new OriginalDate(fakeNowEpoch));
-    global.Date.parse = jest.fn(dateString => OriginalDate.parse(dateString));
-});
-
-afterEach(() => {
-    if (document.body) {
-        document.body.innerHTML = '';
-    }
-
-    global.Date = OriginalDate;
-});
-
-const datesToTest = {
-    lessThanAMinuteAgo: {
-        date: '2012-08-13T11:59:50+01:00',
-        expectedOutput: '10s',
-        expectedShortOutput: '10s',
-        expectedMedOutput: '10s ago',
-        expectedLongOutput: '10 seconds ago',
-    },
-    oneMinuteAgo: {
-        // singular
-        date: '2012-08-13T11:58:40+01:00',
-        expectedOutput: '1m',
-        expectedShortOutput: '1m',
-        expectedMedOutput: '1m ago',
-        expectedLongOutput: '1 minute ago',
-    },
-    upToEightMinutesAgo: {
-        // plural
-        date: '2012-08-13T11:52:30+01:00',
-        expectedOutput: '8m',
-        expectedShortOutput: '8m',
-        expectedMedOutput: '8m ago',
-        expectedLongOutput: '8 minutes ago',
-    },
-    oneHourAgo: {
-        // singular
-        date: '2012-08-13T11:00:00+01:00',
-        expectedOutput: '1h',
-        expectedShortOutput: '1h',
-        expectedMedOutput: '1h ago',
-        expectedLongOutput: '1 hour ago',
-    },
-    betweenNinetyMinutesAndOneHour: {
-        // bug GFE-38
-        date: '2012-08-13T10:25:00+01:00',
-        expectedOutput: '2h',
-        expectedShortOutput: '2h',
-        expectedMedOutput: '2h ago',
-        expectedLongOutput: '2 hours ago',
-    },
-    lessThanFiveHoursAgo: {
-        // plural
-        date: '2012-08-13T08:30:00+01:00',
-        expectedOutput: '4h',
-        expectedShortOutput: '4h',
-        expectedMedOutput: '4h ago',
-        expectedLongOutput: '4 hours ago',
-    },
-    moreThanFiveHoursAgo: {
-        // ... but still today
-        date: '2012-08-13T02:03:00+01:00',
-        expectedOutput: '10h',
-        expectedShortOutput: '10h',
-        expectedMedOutput: '10h ago',
-        expectedLongOutput: '10 hours ago',
-    },
-    yesterday: {
-        date: '2012-08-12T08:45:00+01:00',
-        expectedOutput: 'Yesterday 8:45',
-        expectedShortOutput: '1d',
-        expectedMedOutput: '1d ago',
-        expectedLongOutput: 'Yesterday 8:45',
-    },
-    yesterdayButWithinTwentyFourHours: {
-        date: '2012-08-12T20:00:00+01:00',
-        expectedOutput: 'Yesterday 20:00',
-        expectedShortOutput: '16h',
-        expectedMedOutput: '16h ago',
-        expectedLongOutput: 'Yesterday 20:00',
-    },
-    moreThanTwoDaysAgo: {
-        date: '2012-08-09T08:34:00+01:00',
-        expectedOutput: 'Thursday 9 Aug 2012',
-        expectedShortOutput: '4d',
-        expectedMedOutput: '4d ago',
-        expectedLongOutput: 'Thursday 9 Aug 2012',
-    },
-    moreThanFiveDaysAgo: {
-        date: '2012-08-05T21:30:00+01:00',
-        expectedOutput: '5 Aug 2012',
-        expectedShortOutput: '5 Aug 2012',
-        expectedMedOutput: '5 Aug 2012',
-        expectedLongOutput: '5 Aug 2012',
-    },
-    oneMinuteAgoInAnotherTimeZone: {
-        date: '2012-08-13T12:58:40+02:00',
-        expectedOutput: '1m',
-        expectedShortOutput: '1m',
-        expectedMedOutput: '1m ago',
-        expectedLongOutput: '1 minute ago',
-    },
-};
-
-Object.keys(datesToTest).forEach(category => {
-    describe(`Show relative dates for timestamps formatted as YYYY-MM-DD HH:MM:SS [${category}]`, () => {
-        const d = datesToTest[category];
-        const epoch = Date.parse(d.date);
-
-        test('standard', () => {
-            expect(makeRelativeDate(epoch)).toBe(d.expectedOutput);
-        });
-
-        test('short', () => {
-            expect(makeRelativeDate(epoch, { format: 'short' })).toBe(
-                d.expectedShortOutput
-            );
-        });
-
-        test('med', () => {
-            expect(makeRelativeDate(epoch, { format: 'med' })).toBe(
-                d.expectedMedOutput
-            );
-        });
-
-        test('long', () => {
-            expect(makeRelativeDate(epoch, { format: 'long' })).toBe(
-                d.expectedLongOutput
-            );
-        });
-    });
-});
-
-test('Return the input date if said date is in the future', () => {
-    const epochBug = '2038-01-19T03:14:07';
-    const dat = Date.parse(epochBug);
-    expect(makeRelativeDate(dat)).toBe(false);
-});
-
-test('Fail politely if given non-date / invalid input for either argument', () => {
-    const nonsensicalEpoch = 10000000000000; // Beyond valid date range
-    expect(makeRelativeDate(nonsensicalEpoch)).toBe(false);
-});
-
-test("Fail politely if the date is older than a 'notAfter' value", () => {
-    const tenSecondsAgo = fakeNowEpoch - 10 * 1000;
-    expect(makeRelativeDate(tenSecondsAgo, { notAfter: 9 })).toBe(false);
-});
-
-test('Convert valid timestamps in the HTML document into their expected output', () => {
-    relativeDatesInit();
-    const el = document.getElementById('time-valid');
-    const text = el ? el.innerHTML : '';
-    const title = el ? el.getAttribute('title') : '';
-
-    expect(text).toBe('Yesterday 19:43');
-    expect(title).toBe('12th August');
-});
-
-test('Ignore invalid timestamps', () => {
-    relativeDatesInit();
-    const el = document.getElementById('time-invalid');
-    const text = el ? el.innerHTML : '';
-    expect(text).toBe('Last Tuesday');
-});
-
-test('Should convert timestamps in document to users locale', () => {
-    replaceLocaleTimestamps();
-    const el = document.getElementById('time-locale');
-    const text = el ? el.innerHTML : '';
-    expect(text).toBe('17:00');
-});
-
-test('Should convert timestamps in HTML element to users locale', () => {
-    const inner = `<time id="time-locale" class="js-locale-timestamp" datetime="2014-06-13T17:00:00+0100" data-timestamp="1402675200000">16:00</time>`;
-    const fixture = document.createElement('div');
-    fixture.innerHTML = inner;
-    replaceLocaleTimestamps(fixture);
-
-    const el = fixture.querySelector('#time-locale');
-    const text = el ? el.innerHTML : '';
-    expect(text).toBe('17:00');
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/rhc.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/rhc.js
deleted file mode 100644
index 5c38fc81a1a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/rhc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/rhc.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-
-const addComponent = (content: Element, importance: number = 1): void => {
-    const container = $('.js-components-container');
-    const classname = 'component--rhc';
-
-    return $.create(
-        `<div class="${classname}" data-importance="${importance}"></div>`
-    )
-        .append(content)
-        .each(component => {
-            const existingComponents = $(`.${classname}`, container[0]) || [];
-            const inferiorComponents = Array.from(existingComponents).filter(
-                existingComponent =>
-                    !existingComponent.hasAttribute('data-importance') ||
-                    importance >
-                        parseInt(
-                            existingComponent.getAttribute('data-importance'),
-                            10
-                        )
-            );
-
-            if (inferiorComponents.length === 0) {
-                container.append(component);
-            } else {
-                $(inferiorComponents[0]).before(component);
-            }
-        });
-};
-
-export { addComponent };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/rhc.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/rhc.spec.js
deleted file mode 100644
index 734d74eb4b1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/rhc.spec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/rhc.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import Chance from 'chance';
-import { addComponent } from './rhc';
-
-describe('rhc', () => {
-    const chance = new Chance();
-    const setFixture = htmlString => {
-        if (document.body) {
-            document.body.innerHTML = htmlString;
-        }
-    };
-
-    test('appends component to empty rhc container', () => {
-        const id = chance.word();
-        const content = $.create(`<div id="${id}"></div>`);
-        const selector = `.js-components-container #${id}`;
-
-        setFixture('<div class="js-components-container"></div>');
-        addComponent(content);
-
-        expect($(selector).get(0).id).toEqual(id);
-    });
-
-    test('passes its importance to the rhc container', () => {
-        const importance = chance.integer();
-        const content = $.create(`<div></div>`);
-        const selector = `.component--rhc`;
-
-        setFixture('<div class="js-components-container"></div>');
-        addComponent(content, importance);
-
-        expect(
-            $(selector)
-                .first()
-                .data('importance')
-        ).toEqual(importance);
-    });
-
-    test('prepends component in non-empty rhc container before inferior components', () => {
-        const inferiorImportance = chance.integer({
-            min: 1,
-            max: 10,
-        });
-        const importance = chance.integer({
-            min: inferiorImportance + 1,
-            max: 100,
-        });
-        const inferiorId = chance.word();
-        const id = chance.word();
-        const content = $.create(`<div id="${id}"></div>`);
-        const componentClass = `component--rhc`;
-        const selector = `.${componentClass} > div`;
-
-        setFixture(`
-            <div class="js-components-container">
-                <div class="${componentClass}" data-importance="${inferiorImportance}">
-                    <div id="${inferiorId}"></div>
-                </div>
-            </div>
-        `);
-        addComponent(content, importance);
-
-        expect(
-            $(selector)
-                .first()
-                .get(0).id
-        ).toEqual(id);
-        expect(
-            $(selector)
-                .last()
-                .get(0).id
-        ).toEqual(inferiorId);
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/selection-sharing.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/selection-sharing.js
deleted file mode 100644
index 2a3bfda913a..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/selection-sharing.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/selection-sharing.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import Rangefix from 'rangefix';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { hasTouchScreen } from 'lib/detect';
-import mediator from 'lib/mediator';
-import { inlineSvg } from 'common/views/svgs';
-import debounce from 'lodash/debounce';
-
-const twitterIcon = inlineSvg('shareTwitter', ['icon', 'centered-icon']);
-const emailIcon = inlineSvg('shareEmail', ['icon', 'centered-icon']);
-
-const selectionSharing = `
-    <div class="selection-sharing">
-        <ul class="social u-unstyled u-cf" data-component="social-selection">
-            <li class="social__item" data-link-name="twitter">
-                <a  class="rounded-icon social-icon social-icon--twitter js-selection-twitter"
-                    data-link-name="social-selection"
-                    target="_blank"
-                    href="#">
-                    <span class="u-h">Share on Twitter</span>
-                    ${twitterIcon}
-                </a>
-            </li>
-            <li class="social__item" data-link-name="email">
-                <a  class="rounded-icon social-icon social-icon--email js-selection-email"
-                    data-link-name="social-selection"
-                    target="_blank"
-                    href="#">
-                    <span class="u-h">Share via Email</span>
-                    ${emailIcon}
-                </a>
-            </li>
-        </ul>
-    </div>
-`;
-
-const $selectionSharing = $.create(selectionSharing);
-
-let $twitterAction;
-let $emailAction;
-
-// 280 - t.co length - 5 chars for quotes, url spacing and ellipsis
-const twitterMessageLimit = 252;
-
-const validAncestors = [
-    'js-article__body',
-    'content__standfirst',
-    'block',
-    'caption--main',
-    'content__headline',
-];
-
-const isValidSelection = (
-    range
-): boolean => // commonAncestorContainer is buggy, can't use it here.
-    validAncestors.some(
-        className =>
-            $.ancestor(range.startContainer, className) &&
-            $.ancestor(range.endContainer, className)
-    );
-
-const hideSelection = (): void => {
-    if ($selectionSharing.hasClass('selection-sharing--active')) {
-        $selectionSharing.removeClass('selection-sharing--active');
-    }
-};
-
-const showSelection = (): void => {
-    if (!$selectionSharing.hasClass('selection-sharing--active')) {
-        $selectionSharing.addClass('selection-sharing--active');
-    }
-};
-
-const updateSelection = (): void => {
-    const selection =
-        window.getSelection && document.createRange && window.getSelection();
-
-    const body = document.body;
-
-    if (body && selection && selection.rangeCount > 0 && selection.toString()) {
-        const range = selection.getRangeAt(0);
-        const rect = Rangefix.getBoundingClientRect(range);
-
-        if (!rect) {
-            return;
-        }
-
-        const top = $(body).scrollTop() + rect.top;
-        let twitterMessage = range.toString();
-
-        if (!isValidSelection(range)) {
-            hideSelection();
-            return;
-        }
-
-        // Truncate the twitter message.
-        if (twitterMessage.length > twitterMessageLimit) {
-            twitterMessage = `${twitterMessage.slice(
-                0,
-                twitterMessageLimit - 1
-            )}…`;
-        }
-
-        const twitterText = encodeURIComponent(twitterMessage);
-        const twitterShortUrl = `${config.get('page.host')}${config.get('page.shortUrlId')}/stw`;
-        const twitterUrl = encodeURI(twitterShortUrl);
-        const twitterHref = `https://twitter.com/intent/tweet?text=%E2%80%9C${twitterText}%E2%80%9D&url=${encodeURI(twitterUrl)}`;
-
-        const emailSubject = encodeURI(config.get('page.webTitle'));
-        const emailSelection = encodeURI(range.toString());
-        const emailShortUrl = `${config.get('page.host')}${config.get('page.shortUrlId')}/sbl`;
-        const emailUrl = encodeURI(emailShortUrl);
-        const emailHref = `mailto:?subject=${emailSubject}&body=%E2%80%9C${emailSelection}%E2%80%9D ${emailUrl}`;
-
-        $twitterAction.attr('href', twitterHref);
-        $emailAction.attr('href', emailHref);
-
-        $selectionSharing.css({
-            top: `${top}px`,
-            left: `${rect.left}px`,
-        });
-
-        showSelection();
-    } else {
-        hideSelection();
-    }
-};
-
-const onMouseDown = (event): void => {
-    if (!event.target.closest('.social__item')) {
-        hideSelection();
-    }
-};
-
-const init = (): void => {
-    // The current mobile Safari returns absolute Rect co-ordinates (instead of viewport-relative),
-    // and the UI is generally fiddly on touch.
-    if (document.body && !hasTouchScreen()) {
-        document.body.appendChild($selectionSharing[0]);
-
-        $twitterAction = $('.js-selection-twitter');
-        $emailAction = $('.js-selection-email');
-        // Set timeout ensures that any existing selection has been cleared.
-        bean.on(
-            document.body,
-            'keypress keydown keyup',
-            debounce(updateSelection, 50)
-        );
-        bean.on(document.body, 'mouseup', debounce(updateSelection, 200));
-        bean.on(document.body, 'mousedown', debounce(onMouseDown, 50));
-        mediator.on('window:throttledResize', updateSelection);
-    }
-};
-
-export { init, updateSelection };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/selection-sharing.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/selection-sharing.spec.js
deleted file mode 100644
index 85771f591ef..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/selection-sharing.spec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/selection-sharing.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import $ from 'lib/$';
-import {
-    init as selectionSharingInit,
-    updateSelection,
-} from './selection-sharing';
-
-const markup = `<div class="js-article__body"><p>Some text to select</p></div>`;
-
-jest.mock('lib/detect', () => ({
-    hasTouchScreen: () => false,
-}));
-
-jest.mock('rangefix', () => ({
-    getBoundingClientRect: () => ({ left: 0, bottom: 0 }),
-}));
-
-beforeEach(() => {
-    if (document.body) {
-        document.body.innerHTML = markup;
-    }
-});
-
-afterEach(() => {
-    if (document.body) {
-        document.body.innerHTML = '';
-    }
-});
-
-test('should be initially hidden in the article body', () => {
-    selectionSharingInit();
-
-    expect($('.selection-sharing').length).toBe(1);
-    expect($('.selection-sharing').hasClass('selection-sharing--active')).toBe(
-        false
-    );
-});
-
-test('should be visible when text is selected in the article body', () => {
-    // required mocks (not present in jsdom at time of writing)
-    class MockRange {
-        startContainer: ?Text;
-        endContainer: ?Text;
-        startOffset: number;
-        endOffset: number;
-
-        constructor() {
-            this.startContainer = null;
-            this.endContainer = null;
-            this.startOffset = 0;
-            this.endOffset = 0;
-        }
-
-        setStart(el, startOffset) {
-            this.startContainer = el;
-            this.startOffset = startOffset;
-        }
-
-        setEnd(el, endOffset) {
-            this.endContainer = el;
-            this.endOffset = endOffset;
-        }
-
-        toString() {
-            if (this.startContainer && this.endContainer) {
-                return (
-                    this.startContainer.wholeText + this.endContainer.wholeText
-                );
-            }
-
-            return 'no ranges...';
-        }
-    }
-
-    class MockSelection {
-        ranges: Array<Range>;
-        rangeCount: number;
-
-        constructor(range: Range) {
-            this.ranges = [range];
-            this.rangeCount = 1;
-        }
-
-        addRange(range) {
-            this.ranges.push(range);
-            this.rangeCount += 1;
-        }
-
-        getRangeAt(index) {
-            return this.ranges[index];
-        }
-
-        toString() {
-            return this.ranges[0].toString();
-        }
-    }
-
-    // Hacking around Flow as JSDOM doesn't have a Range type but Flow does and
-    // expects one here. The Flow interface is big enough that implementing it
-    // feels like overkill. It may be that JSDOM implements Range in the future
-    // though, which we can then sub in (see:
-    // https://github.com/tmpvar/jsdom/issues/317).
-    // $FlowFixMe
-    document.createRange = jest.fn(() => new MockRange());
-
-    if (document.body) {
-        document.body.scrollTop = 0;
-    }
-
-    selectionSharingInit();
-
-    const $jsArticleBody = $('.js-article__body');
-
-    const p1 = document.createElement('p');
-    const p2 = document.createElement('p');
-    const t1 = document.createTextNode('aa');
-    const t2 = document.createTextNode('aa');
-    const range = document.createRange();
-
-    // Additional mock, note defined after range constant
-    window.getSelection = jest.fn(() => new MockSelection(range));
-
-    p1.appendChild(t1);
-    p2.appendChild(t2);
-
-    $jsArticleBody.append(p1);
-    $jsArticleBody.append(p2);
-
-    range.setStart(t1, 1);
-    range.setEnd(t2, 1);
-
-    if (window.getSelection) {
-        window.getSelection().addRange(range);
-    }
-
-    // More reliable than testing a throttled event handler.
-    updateSelection();
-
-    expect($('.selection-sharing').hasClass('selection-sharing--active')).toBe(
-        true
-    );
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/sticky.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/sticky.js
deleted file mode 100644
index 3c5b66c4675..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/sticky.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/sticky.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-import fastdom from 'fastdom';
-
-/**
- * @todo: check if browser natively supports "position: sticky"
- */
-class Sticky {
-    element: HTMLElement;
-    opts: Object;
-    offsetFromParent: number;
-    lastMessage: string;
-
-    constructor(element: HTMLElement, options: Object = {}): void {
-        this.element = element;
-
-        this.opts = Object.assign(
-            {},
-            {
-                top: 0,
-                containInParent: true,
-                emitMessage: false,
-            },
-            options
-        );
-    }
-
-    init(): void {
-        const parentElement = this.element.parentElement;
-
-        if (!parentElement) {
-            return;
-        }
-
-        fastdom.measure(() => {
-            this.offsetFromParent =
-                this.element.getBoundingClientRect().top -
-                parentElement.getBoundingClientRect().top;
-        }, this);
-        mediator.on('window:throttledScroll', this.updatePosition.bind(this));
-        // kick off an initial position update
-        fastdom.measure(this.updatePosition, this);
-    }
-
-    updatePosition(): void {
-        const parentElement = this.element.parentElement;
-
-        if (!parentElement) {
-            return;
-        }
-
-        const elementRect = this.element.getBoundingClientRect();
-        const parentRect = parentElement.getBoundingClientRect();
-        const elementHeight = elementRect.height;
-        let css;
-        let message;
-        let stick;
-
-        // have we scrolled past the element
-        if (parentRect.top + this.offsetFromParent > 0) {
-            stick = false;
-            css = {
-                top: '',
-            };
-            message = 'unfixed';
-        } else {
-            stick = true;
-            const top =
-                this.opts.containInParent &&
-                parentRect.bottom <= elementRect.height
-                    ? Math.floor(
-                          parentRect.bottom - elementHeight - this.opts.top
-                      )
-                    : this.opts.top;
-            css = {
-                top: `${top}px`,
-            };
-            message = 'fixed';
-        }
-
-        if (this.opts.emitMessage && message && message !== this.lastMessage) {
-            this.emitMessage(message);
-            this.lastMessage = message;
-        }
-
-        if (css) {
-            fastdom.mutate(() => {
-                if (stick) {
-                    this.element.classList.add('is-sticky');
-                } else {
-                    this.element.classList.remove('is-sticky');
-                }
-                Object.assign(this.element.style, css);
-            }, this);
-        }
-    }
-
-    emitMessage(message: string): void {
-        mediator.emit(`modules:${this.element.id}:${message}`);
-    }
-}
-
-export { Sticky };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/tabs.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/tabs.js
deleted file mode 100644
index 79ec9960095..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/tabs.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/tabs.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-
-const NAV_CLASSES = [
-    'tabs__tab--selected',
-    'tone-colour',
-    'tone-accent-border',
-];
-
-const getTabTarget = (tab: HTMLElement): Promise<?string> =>
-    fastdom.measure(() => tab.getAttribute('href'));
-
-const hidePane = (tab: HTMLElement, pane: HTMLElement): Promise<void> => {
-    const tabList: HTMLElement = (tab.parentNode: any);
-
-    return fastdom.mutate(() => {
-        if (tabList) {
-            tabList.setAttribute('aria-selected', 'false');
-            NAV_CLASSES.forEach(className =>
-                tabList.classList.remove(className)
-            );
-        }
-
-        pane.classList.add('u-h');
-    });
-};
-
-const showPane = (tab: HTMLElement, pane: HTMLElement): Promise<void> => {
-    const tabList: HTMLElement = (tab.parentNode: any);
-
-    return fastdom.mutate(() => {
-        if (tabList) {
-            tabList.setAttribute('aria-selected', 'true');
-            NAV_CLASSES.forEach(className => tabList.classList.add(className));
-        }
-
-        pane.classList.remove('u-h', 'modern-hidden');
-        pane.focus();
-    });
-};
-
-const init = (): Promise<void> => {
-    const findTabs = (): Promise<Array<HTMLElement>> =>
-        fastdom.measure(() => Array.from(document.querySelectorAll('.tabs')));
-
-    return findTabs().then(tabs => {
-        tabs.forEach(tab => {
-            const nav = tab.querySelector('.js-tabs');
-
-            if (!nav) {
-                return;
-            }
-
-            const { tabsInitialized } = nav.dataset;
-
-            if (tabsInitialized === 'true') {
-                return;
-            }
-
-            fastdom.mutate(() => {
-                nav.setAttribute('data-tabs-initialized', 'true');
-            });
-
-            nav.addEventListener('click', (event: Event) => {
-                const target: HTMLElement = (event.target: any);
-
-                if (!target || target.nodeName !== 'A') {
-                    return;
-                }
-
-                event.preventDefault();
-
-                const currentTab = tab.querySelector('.tabs__tab--selected a');
-
-                getTabTarget(target).then(nextPaneTarget => {
-                    if (nextPaneTarget) {
-                        const nextPane = tab.querySelector(nextPaneTarget);
-
-                        if (nextPane) {
-                            showPane(target, nextPane);
-                        }
-                    }
-                });
-
-                if (currentTab) {
-                    getTabTarget(currentTab).then(currentPaneTarget => {
-                        if (currentPaneTarget) {
-                            const currentPane = tab.querySelector(
-                                currentPaneTarget
-                            );
-
-                            if (currentPane && target !== currentTab) {
-                                hidePane(currentTab, currentPane);
-                            }
-                        }
-                    });
-                }
-            });
-
-            return fastdom.mutate(() => {
-                nav.setAttribute('data-tabs-initialized', 'true');
-            });
-        });
-    });
-};
-
-export { init };
-
-export const _ = {
-    showPane,
-    hidePane,
-    getTabTarget,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/tabs.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/tabs.spec.js
deleted file mode 100644
index a65b649cecf..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/tabs.spec.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/tabs.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { init as tabsInit, _ } from './tabs';
-
-const NAV_CLASSES = [
-    'tabs__tab--selected',
-    'tone-colour',
-    'tone-accent-border',
-];
-
-jest.mock('lib/fastdom-promise');
-
-const markup = `
-    <p id="tabs-test">
-        <div class="tabs">
-            <ol class="tabs__container js-tabs"
-                role="tablist">
-                <li class="tabs__tab tabs__tab--selected"
-                    id="tab-1-tab" role="tab"
-                    aria-selected="true"
-                    aria-controls="tab1panel">
-                    <a id="tab1"
-                       href="#tab1panel">Foo</a>
-                </li>
-
-                <li class="tabs__tab"
-                    id="tab-2-tab"
-                    role="tab"
-                    aria-selected="false"
-                    aria-controls="tab2panel">
-                    <a id="tab2"
-                       href="#tab2panel">Bar</a>
-                </li>
-            </ol>
-
-            <div class="tabs__content">
-                <div class="tabs__pane"
-                     id="tab1panel"
-                     role="tabpanel">foo</div>
-                <div class="tabs__pane modern-hidden"
-                     id="tab2panel"
-                     role="tabpanel">bar</div>
-            </div>
-        </div>
-    </p>
-`;
-
-beforeEach(() => {
-    if (document.body) {
-        document.body.innerHTML = markup;
-    }
-});
-
-afterEach(() => {
-    if (document.body) {
-        document.body.innerHTML = '';
-    }
-});
-
-test('should properly save the initialized state', () => {
-    const nav: HTMLElement = (document.querySelector('.js-tabs'): any);
-
-    expect(nav.getAttribute('data-tabs-initialized')).toBe(null);
-
-    return tabsInit().then(() => {
-        expect(nav.getAttribute('data-tabs-initialized')).toBe('true');
-    });
-});
-
-test('showPane()', () => {
-    const tab: HTMLElement = (document.getElementById('tab2'): any);
-    const tabList: HTMLElement = (tab.parentNode: any);
-    const pane: HTMLElement = (document.getElementById('tab2panel'): any);
-
-    return _.showPane(tab, pane).then(() => {
-        expect(pane.classList.contains('u-h')).toBe(false);
-        expect(pane.classList.contains('modern-hidden')).toBe(false);
-        expect(tabList.getAttribute('aria-selected')).toBe('true');
-
-        NAV_CLASSES.forEach(className => {
-            expect(tabList.classList.contains(className)).toBe(true);
-        });
-    });
-});
-
-test('hidePane()', () => {
-    const tab: HTMLElement = (document.getElementById('tab2'): any);
-    const tabList: HTMLElement = (tab.parentNode: any);
-    const pane: HTMLElement = (document.getElementById('tab2panel'): any);
-
-    return _.showPane(tab, pane).then(() =>
-        _.hidePane(tab, pane).then(() => {
-            expect(pane.classList.contains('u-h')).toBe(true);
-            expect(tabList.getAttribute('aria-selected')).toBe('false');
-
-            NAV_CLASSES.forEach(className => {
-                expect(tabList.classList.contains(className)).toBe(false);
-            });
-        })
-    );
-});
-
-test('getTabTarget()', () => {
-    const tab: HTMLElement = (document.getElementById('tab2'): any);
-
-    return _.getTabTarget(tab).then(target => {
-        expect(target).toBe('#tab2panel');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/toggles.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/toggles.js
deleted file mode 100644
index cf4bc695b86..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/toggles.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/toggles.js
- * to .ts, then delete it.
- */
-
-// @flow
-import mediator from 'lib/mediator';
-
-class Toggles {
-    component: ?HTMLElement;
-    controls: Array<HTMLElement>;
-
-    constructor(component: ?HTMLElement = document.body): void {
-        if (component) {
-            const controls = Array.from(
-                component.querySelectorAll('[data-toggle]')
-            );
-
-            this.component = component;
-            this.controls = controls;
-
-            mediator.on('module:clickstream:click', clickSpec => {
-                this.reset(clickSpec ? clickSpec.target : null);
-            });
-        }
-    }
-
-    init() {
-        this.controls.forEach(this.prepareControl, this);
-    }
-
-    toggle(control: HTMLElement): void {
-        this.controls.forEach(c => {
-            if (c === control) {
-                if (c.classList.contains('is-active')) {
-                    this.close(c);
-                } else {
-                    this.open(c);
-                }
-            } else {
-                this.close(c);
-            }
-        });
-    }
-
-    reset(omitEl: ?HTMLElement): void {
-        const doNotReset = ['js-search-old', 'js-search-new'];
-
-        this.controls
-            .filter(
-                control =>
-                    !(
-                        omitEl === control ||
-                        doNotReset.includes(control.getAttribute('data-toggle'))
-                    )
-            )
-            .forEach(this.close, this);
-    }
-
-    prepareControl(control: HTMLElement): void {
-        const readyClass = 'js-toggle-ready';
-        const nav = document.querySelector('.js-profile-nav');
-        const isSignedIn = nav && nav.classList.contains('is-signed-in');
-
-        if (!control.classList.contains(readyClass)) {
-            const target = this.getTarget(control);
-
-            if (
-                target &&
-                !(
-                    !isSignedIn &&
-                    control.getAttribute('data-toggle-signed-in') === 'true'
-                )
-            ) {
-                control.classList.add(readyClass);
-                control.addEventListener(
-                    'click',
-                    (e: MouseEvent): void => {
-                        e.preventDefault();
-                        this.toggle(control);
-                    }
-                );
-            }
-        }
-    }
-
-    getTarget(control: HTMLElement): ?HTMLElement {
-        const targetClass = control.getAttribute('data-toggle');
-
-        if (targetClass) {
-            if (this.component) {
-                return this.component.querySelector(`.${targetClass}`);
-            }
-        }
-    }
-
-    open(control: HTMLElement): void {
-        const target = this.getTarget(control);
-
-        control.classList.add('is-active');
-
-        if (target) {
-            target.classList.remove('is-off');
-        }
-    }
-
-    close(control: HTMLElement): void {
-        const target = this.getTarget(control);
-
-        control.classList.remove('is-active');
-
-        if (target) {
-            target.classList.add('is-off');
-        }
-    }
-}
-
-export { Toggles };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/ui/toggles.spec.js b/static/src/javascripts.flow.archive/projects/common/modules/ui/toggles.spec.js
deleted file mode 100644
index a2c87fa93e6..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/ui/toggles.spec.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/ui/toggles.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import { Toggles } from './toggles';
-
-describe('Toggles', () => {
-    let componentA;
-    let toggles;
-
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `<div>
-                <div id="componentA">
-                    <div id="control-1" data-toggle="target-1" class="control">button</div>
-                    <div id="control-2" data-toggle="target-2" class="control is-active">button</div>
-                    <div id="target-1"  class="target-1 is-off">content</div>
-                    <div id="target-2"  class="target-2">content</div>
-                </div>
-                <div id="componentB">
-                    <div id="control-1b" data-toggle="target-1b" class="control">button</div>
-                    <div id="control-2b" data-toggle="target-2b" class="control is-active">button</div>
-                    <div id="target-1b"  class="target-1 is-off">content</div>
-                    <div id="target-2b"  class="target-2">content</div>
-                </div>
-            </div>`;
-        }
-
-        componentA = document.querySelector('#componentA');
-        toggles = new Toggles(componentA);
-        toggles.init();
-    });
-
-    test("Should update the state of a button when clicked (from an initial state of 'off')", () => {
-        const control = document.querySelector('#control-1');
-
-        if (control) {
-            expect(control.className).not.toContain('is-active');
-
-            bean.fire(control, 'click');
-
-            expect(control.className).toContain('is-active');
-        }
-    });
-
-    test("Should update the state of a button when clicked (from an initial state of 'on')", () => {
-        const control = document.querySelector('#control-2a');
-
-        if (control) {
-            expect(control.className).toContain('is-active');
-
-            bean.fire(control, 'click');
-
-            expect(control.className).not.toContain('is-active');
-        }
-    });
-
-    test('Should toggle the state of a button and when clicked repeatedly', () => {
-        const control = document.querySelector('#control-1a');
-
-        if (control) {
-            bean.fire(control, 'click');
-            expect(control.className).toContain('is-active');
-
-            bean.fire(control, 'click');
-            expect(control.className).not.toContain('is-active');
-
-            bean.fire(control, 'click');
-            expect(control.className).toContain('is-active');
-        }
-    });
-
-    test('Deactives its state when another button on the page is activated', () => {
-        const control1 = document.querySelector('#control-1');
-        const control2 = document.querySelector('#control-2');
-
-        bean.fire(control1, 'click');
-
-        if (control2) {
-            expect(control2.className).not.toContain('is-active');
-        }
-    });
-
-    test('Does not interfere with other control sets', () => {
-        const control1 = document.querySelector('#control-1');
-        const control1b = document.querySelector('#control-1b');
-        const componentB = document.querySelector('#componentB');
-        const otherToggles = new Toggles(componentB);
-
-        otherToggles.init();
-
-        bean.fire(control1, 'click');
-
-        if (control1) {
-            expect(control1.className).toContain('is-active');
-        }
-
-        if (control1b) {
-            expect(control1b.className).not.toContain('is-active');
-        }
-    });
-
-    test('Should reveal its related content', () => {
-        const control1 = document.querySelector('#control-1');
-        const target1 = document.querySelector('#target-1');
-
-        bean.fire(control1, 'click');
-
-        if (target1) {
-            expect(target1.className).not.toContain('is-off');
-        }
-    });
-
-    test('Should hide any un-related content', () => {
-        const control1 = document.querySelector('#control-1');
-        const target2 = document.querySelector('#target-2');
-
-        bean.fire(control1, 'click');
-
-        if (target2) {
-            expect(target2.className).toContain('is-off');
-        }
-    });
-
-    test('Should toggle the state of its related content when clicked repeatedly', () => {
-        const control1 = document.querySelector('#control-1');
-        const target1 = document.querySelector('#target-1');
-
-        if (control1 && target1) {
-            bean.fire(control1, 'click');
-            expect(target1.className).not.toContain('is-off');
-
-            bean.fire(control1, 'click');
-            expect(target1.className).toContain('is-off');
-
-            bean.fire(control1, 'click');
-            expect(target1.className).not.toContain('is-off');
-        }
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/video/events.js b/static/src/javascripts.flow.archive/projects/common/modules/video/events.js
deleted file mode 100644
index 6f06b77af21..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/video/events.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/video/events.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import mediator from 'lib/mediator';
-import reportError from 'lib/report-error';
-import $ from 'lib/$';
-import config from 'lib/config';
-import { isBreakpoint } from 'lib/detect';
-import { isRevisit } from 'common/modules/onward/history';
-import throttle from 'lodash/throttle';
-import forOwn from 'lodash/forOwn';
-import {
-    buildGoogleAnalyticsEvent,
-    getGoogleAnalyticsEventAction,
-} from 'common/modules/video/ga-helper';
-import type { MediaEvent } from 'common/modules/video/ga-helper';
-import ophan from 'ophan/ng';
-
-const isDesktop = isBreakpoint({
-    min: 'desktop',
-});
-const isEmbed = !!window.guardian.isEmbed;
-const QUARTILES = [25, 50, 75];
-// Advert and content events used by analytics. The expected order of bean events is:
-const EVENTS = [
-    'preroll:request',
-    'preroll:ready',
-    'preroll:play',
-    'preroll:end',
-    'content:ready',
-    'content:play',
-    'content:end',
-];
-const gaTracker = config.get('googleAnalytics.trackers.editorial');
-
-const bindCustomMediaEvents = (
-    eventsMap: Object,
-    player: Object,
-    mediaId: string,
-    mediaType: string,
-    isPreroll: boolean
-): void => {
-    forOwn(eventsMap, (value, key) => {
-        const fullEventName = `media:${value}`;
-        const mediaEvent: MediaEvent = {
-            mediaId,
-            mediaType,
-            eventType: value,
-            isPreroll,
-        };
-
-        player.one(key, () => {
-            player.trigger(fullEventName, mediaEvent);
-            mediator.emit(fullEventName, mediaEvent);
-        });
-    });
-};
-
-const addContentEvents = (
-    player: Object,
-    mediaId: any,
-    mediaType: any
-): void => {
-    const eventsMap = {
-        ready: 'ready',
-        play: 'play',
-        passed25: 'watched25',
-        passed50: 'watched50',
-        passed75: 'watched75',
-        ended: 'end',
-    };
-
-    player.on(
-        'timeupdate',
-        throttle(() => {
-            const percent = Math.round(
-                (player.currentTime() / player.duration()) * 100
-            );
-
-            if (percent >= 25) {
-                player.trigger('passed25');
-            }
-            if (percent >= 50) {
-                player.trigger('passed50');
-            }
-            if (percent >= 75) {
-                player.trigger('passed75');
-            }
-        }, 1000)
-    );
-
-    bindCustomMediaEvents(eventsMap, player, mediaId, mediaType, false);
-};
-
-const bindGoogleAnalyticsEvents = (player: Object, canonicalUrl: string) => {
-    const events = {
-        play: 'metric1',
-        skip: 'metric2',
-        watched25: 'metric3',
-        watched50: 'metric4',
-        watched75: 'metric5',
-        end: 'metric6',
-    };
-
-    Object.keys(events)
-        .map(eventName => `media:${eventName}`)
-        .forEach(playerEvent => {
-            player.on(playerEvent, (_, mediaEvent) => {
-                window.ga(
-                    `${gaTracker}.send`,
-                    'event',
-                    buildGoogleAnalyticsEvent(
-                        mediaEvent,
-                        events,
-                        canonicalUrl,
-                        'guardian-videojs',
-                        getGoogleAnalyticsEventAction,
-                        mediaEvent.mediaId
-                    )
-                );
-            });
-        });
-};
-
-const getMediaType = player => (isEmbed ? 'video' : player.guMediaType);
-
-const shouldAutoPlay = player =>
-    isDesktop && !isRevisit(config.get('page.pageId')) && player.guAutoplay;
-
-const constructEventName = (eventName: string, player: Object): string =>
-    `${getMediaType(player)}:${eventName}`;
-
-const ophanRecord = (id: ?string, event: Object, player: Object) => {
-    if (!id) return;
-
-    const record = ophanEmbed => {
-        const eventObject = {};
-        eventObject[getMediaType(player)] = {
-            id,
-            eventType: event.type,
-        };
-        ophanEmbed.record(eventObject);
-    };
-
-    if (isEmbed) {
-        require.ensure(
-            [],
-            require => {
-                record(require('ophan/embed'));
-            },
-            'ophan-embed'
-        );
-    } else {
-        record(ophan);
-    }
-};
-
-const initOphanTracking = (player: Object, mediaId: string) => {
-    EVENTS.concat(QUARTILES.map(q => `content:${q}`)).forEach(eventId => {
-        player.one(constructEventName(eventId, player), event => {
-            ophanRecord(mediaId, event, player);
-        });
-    });
-};
-
-const bindContentEvents = (player: Object) => {
-    const events = {
-        end() {
-            player.trigger(constructEventName('content:end', player));
-        },
-        play() {
-            const duration = player.duration();
-            if (duration) {
-                player.trigger(constructEventName('content:play', player));
-            } else {
-                player.one('durationchange', events.play);
-            }
-        },
-        timeupdate() {
-            const progress = Math.round(
-                parseInt((player.currentTime() / player.duration()) * 100, 10)
-            );
-            QUARTILES.reverse().some(quart => {
-                if (progress >= quart) {
-                    player.trigger(
-                        constructEventName(`content:${quart}`, player)
-                    );
-                    return true;
-                }
-                return false;
-            });
-        },
-        ready() {
-            player.trigger(constructEventName('content:ready', player));
-
-            player.one('play', events.play);
-            player.on('timeupdate', throttle(events.timeupdate, 1000));
-            player.one('ended', events.end);
-
-            if (shouldAutoPlay(player)) {
-                player.play();
-            }
-        },
-    };
-    events.ready();
-};
-
-// These events are so that other libraries (e.g. Ophan) can hook into events without
-// needing to know about videojs
-const bindGlobalEvents = (player: Object) => {
-    player.on('playing', () => {
-        bean.fire(document.body, 'videoPlaying');
-    });
-    player.on('pause', () => {
-        bean.fire(document.body, 'videoPause');
-    });
-    player.on('ended', () => {
-        bean.fire(document.body, 'videoEnded');
-    });
-};
-
-const beaconError = err => {
-    if (err && 'message' in err && 'code' in err) {
-        reportError(
-            new Error(err.message),
-            {
-                feature: 'player',
-                vjsCode: err.code,
-            },
-            false
-        );
-    }
-};
-
-const handleInitialMediaError = (player: Object) => {
-    const err = player.error();
-    if (err !== null) {
-        beaconError(err);
-        return err.code === 4;
-    }
-    return false;
-};
-
-const bindErrorHandler = (player: Object) => {
-    player.on('error', () => {
-        beaconError(player.error());
-        $('.vjs-big-play-button').hide();
-    });
-};
-
-export default {
-    constructEventName,
-    bindContentEvents,
-    bindGlobalEvents,
-    initOphanTracking,
-    handleInitialMediaError,
-    bindErrorHandler,
-    addContentEvents,
-    bindGoogleAnalyticsEvents,
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/video/metadata.js b/static/src/javascripts.flow.archive/projects/common/modules/video/metadata.js
deleted file mode 100644
index 5eda0c5d6ea..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/video/metadata.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/video/metadata.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import config from 'lib/config';
-import fetch from 'lib/fetch';
-import fetchJSON from 'lib/fetch-json';
-
-declare type VideoInfo = {
-    expired: boolean,
-    shouldHideAdverts: boolean,
-};
-
-const isGeoBlocked = (el: HTMLMediaElement): Promise<boolean> => {
-    const source = el.currentSrc;
-
-    // we currently only block to the uk
-    // these files are placed in a special location
-    if (!source.includes('/ukonly/')) {
-        return Promise.resolve(false);
-    }
-
-    return new Promise(resolve => {
-        fetch(source, {
-            mode: 'cors',
-            method: 'head',
-        })
-            .then(() => resolve(false))
-            .catch(res => resolve(res.status === 403));
-    });
-};
-
-const getVideoInfo = (el: HTMLMediaElement): Promise<VideoInfo> => {
-    const dataset = el.dataset;
-    const embedPath = dataset.embedPath;
-    const canonicalUrl = dataset.canonicalUrl || (embedPath || null);
-    const defaultVideoInfo: VideoInfo = {
-        expired: false,
-        shouldHideAdverts: dataset.blockVideoAds !== 'false',
-    };
-
-    if (!canonicalUrl) {
-        return Promise.resolve(defaultVideoInfo);
-    }
-
-    // We only have the canonical URL in videos embedded in articles / main media.
-    // These are set to the safest defaults that will always play video.
-    const url = `${config.get('page.ajaxUrl')}/${canonicalUrl}/info.json`;
-
-    return new Promise(resolve => {
-        fetchJSON(url, {
-            mode: 'cors',
-        })
-            .then(resolve)
-            .catch(() => resolve(defaultVideoInfo));
-    });
-};
-
-export { getVideoInfo, isGeoBlocked };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/video/more-in-series-container.js b/static/src/javascripts.flow.archive/projects/common/modules/video/more-in-series-container.js
deleted file mode 100644
index 829260031b4..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/video/more-in-series-container.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/video/more-in-series-container.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { Component } from 'common/modules/component';
-import mediator from 'lib/mediator';
-import { checkElemsForVideos } from 'common/modules/atoms/youtube';
-
-const moreInSeriesContainerInit = (
-    el: HTMLElement,
-    mediaType: string,
-    section: string,
-    shortUrl: string,
-    series?: string
-): void => {
-    const component = new Component();
-    const seriesStr = series ? `/${series}` : '';
-    // exclude professional network content from video pages
-    const excludeProfContent =
-        mediaType === 'video'
-            ? '&exclude-tag=guardian-professional/guardian-professional'
-            : '';
-
-    const endpoint = `/${mediaType}/section/${section}${seriesStr}.json?shortUrl=${shortUrl}${excludeProfContent}`;
-
-    component.endpoint = endpoint;
-
-    component.fetch(el).then(() => {
-        checkElemsForVideos([el]);
-        mediator.emit('page:media:moreinloaded', el);
-    });
-};
-
-export { moreInSeriesContainerInit };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/video/onward-container.js b/static/src/javascripts.flow.archive/projects/common/modules/video/onward-container.js
deleted file mode 100644
index 8749ca9d44e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/video/onward-container.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/video/onward-container.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import config from 'lib/config';
-import { Component } from 'common/modules/component';
-
-const getEndpoint = (mediaType: string): string => {
-    const isInSeries = Boolean(config.get('page.seriesTags'));
-
-    if (isInSeries) {
-        return `/video/in-series/${config.get('page.seriesId')}.json`;
-    }
-
-    return `/${
-        config.get('page.isPodcast') ? 'podcast' : mediaType
-    }/most-viewed.json`;
-};
-
-const createComponent = (
-    el: HTMLElement,
-    endpoint: string,
-    manipulationType: string,
-    page?: ?string
-): Promise<void> => {
-    const component = new Component();
-
-    component.manipulationType = manipulationType;
-    component.endpoint = endpoint + (page ? `?page=${page}` : '');
-    el.innerHTML = ''; // we have no replace in component
-
-    return component.fetch(el, 'html');
-};
-
-const initEvents = (
-    el: HTMLElement,
-    manipulationType: string,
-    endpoint: string
-): void => {
-    bean.on(el, 'click', '.most-viewed-navigation__button', (ev: Event) => {
-        const target: HTMLElement = (ev.target: any);
-        const page = target.getAttribute('data-page');
-
-        createComponent(el, endpoint, manipulationType, page);
-
-        ev.preventDefault();
-        return false;
-    });
-};
-
-const onwardVideo = (el: HTMLElement, mediaType: string) => {
-    const manipulationType = mediaType === 'video' ? 'append' : 'html';
-    const endpoint = getEndpoint(mediaType);
-
-    createComponent(el, endpoint, manipulationType).then(() => {
-        initEvents(el, manipulationType, endpoint);
-    });
-};
-
-export { onwardVideo };
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/video/video-container.js b/static/src/javascripts.flow.archive/projects/common/modules/video/video-container.js
deleted file mode 100644
index dc6c8f4501e..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/video/video-container.js
+++ /dev/null
@@ -1,351 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/video/video-container.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import fastdom from 'lib/fastdom-promise';
-import $ from 'lib/$';
-import { elementInView } from 'lib/element-inview';
-import { onVideoContainerNavigation } from 'common/modules/atoms/youtube';
-import { isBreakpoint } from 'lib/detect';
-
-type Action = {
-    type: string,
-};
-
-type Position = {
-    position: number,
-    atStart?: boolean,
-    atEnd?: boolean,
-};
-
-type State = Position & {
-    length: number,
-    videoWidth: number,
-    container: Element,
-};
-
-const updateYouTubeVideo = (currentItem: ?Element): void => {
-    if (currentItem != null) {
-        const youTubeAtom = currentItem.querySelector('.youtube-media-atom');
-        if (youTubeAtom) {
-            const atomId = youTubeAtom.getAttribute('data-unique-atom-id');
-            if (atomId) {
-                return onVideoContainerNavigation(atomId);
-            }
-        }
-    }
-};
-
-const getPositionState = (position: number, length: number): Position => ({
-    position,
-    atStart: position === 0,
-    atEnd: position >= length,
-});
-
-const reducers = {
-    NEXT: function next(previousState: State): State {
-        const position =
-            previousState.position >= previousState.length
-                ? previousState.position
-                : previousState.position + 1;
-
-        updateYouTubeVideo(
-            document.querySelector(`.js-video-playlist-item-${position - 1}`)
-        );
-        return Object.assign(
-            {},
-            previousState,
-            getPositionState(position, previousState.length)
-        );
-    },
-
-    PREV: function prev(previousState: State): State {
-        const position =
-            previousState.position <= 0 ? 0 : previousState.position - 1;
-        updateYouTubeVideo(
-            document.querySelector(`.js-video-playlist-item-${position + 1}`)
-        );
-        return Object.assign(
-            {},
-            previousState,
-            getPositionState(position, previousState.length)
-        );
-    },
-
-    INIT: function init(previousState: State): State {
-        const makeYouTubeNonPlayableAtSmallBreakpoint = state => {
-            if (
-                isBreakpoint({
-                    max: 'desktop',
-                })
-            ) {
-                const youTubeIframes = Array.from(
-                    state.container.querySelectorAll(
-                        '.youtube-media-atom iframe'
-                    )
-                );
-                youTubeIframes.forEach(el => {
-                    el.remove();
-                });
-                const overlayLinks = Array.from(
-                    state.container.querySelectorAll(
-                        '.video-container-overlay-link'
-                    )
-                );
-                overlayLinks.forEach(el => {
-                    el.classList.add('u-faux-block-link__overlay');
-                    // make visible to screen readers / keyboard users
-                    el.removeAttribute('tabindex');
-                    el.removeAttribute('aria-hidden');
-                });
-
-                const atomWrapper = Array.from(
-                    state.container.querySelectorAll('.youtube-media-atom')
-                );
-                atomWrapper.forEach(el => {
-                    el.classList.add('no-player');
-                });
-            }
-        };
-        makeYouTubeNonPlayableAtSmallBreakpoint(previousState);
-
-        fastdom.measure(() => {
-            // Lazy load images on scroll for mobile
-            $('.js-video-playlist-image', previousState.container).each(el => {
-                const inview = elementInView(
-                    el,
-                    $('.js-video-playlist-inner', previousState.container).get(
-                        0
-                    ),
-                    {
-                        // This loads 1 image in the future
-                        left: 410,
-                    }
-                );
-
-                inview.on('firstview', elem => {
-                    fastdom.mutate(() => {
-                        const dataSrc = elem.getAttribute('data-src');
-                        const src = elem.getAttribute('src');
-
-                        if (dataSrc && !src) {
-                            fastdom.mutate(() => {
-                                elem.setAttribute('src', dataSrc);
-                            });
-                        }
-                    });
-                });
-            });
-        });
-        return previousState;
-    },
-};
-
-const fetchLazyImage = (container: Element, i: number): void => {
-    $(`.js-video-playlist-image--${i}`, container).each(el => {
-        fastdom
-            .measure(() => {
-                const dataSrc = el.getAttribute('data-src');
-                const src = el.getAttribute('src');
-                return dataSrc && !src ? dataSrc : null;
-            })
-            .then(src => {
-                if (src) {
-                    fastdom.mutate(() => {
-                        el.setAttribute('src', src);
-                    });
-                }
-            });
-    });
-};
-
-const update = (state: State, container: Element): Promise<number> => {
-    const translateWidth = -state.videoWidth * state.position;
-
-    return fastdom.mutate(() => {
-        const activeEl = container.querySelector(
-            '.video-playlist__item--active'
-        );
-
-        if (activeEl != null) {
-            activeEl.classList.remove('video-playlist__item--active');
-            $('.youtube-media-atom__iframe', activeEl).hide();
-            $('.video-overlay .fc-item__link', activeEl).attr('tabindex', '-1');
-            $('.video-overlay .fc-item__link', activeEl).attr(
-                'aria-hidden',
-                'true'
-            );
-        }
-
-        const newActive = container.querySelector(
-            `.js-video-playlist-item-${state.position}`
-        );
-
-        if (newActive != null) {
-            newActive.classList.add('video-playlist__item--active');
-            $('.youtube-media-atom__iframe', newActive).show();
-            $('.video-overlay .fc-item__link', newActive).removeAttr(
-                'tabindex'
-            );
-            $('.video-overlay .fc-item__link', newActive).removeAttr(
-                'aria-hidden'
-            );
-        }
-
-        container.classList.remove(
-            'video-playlist--end',
-            'video-playlist--start'
-        );
-
-        if (state.atStart) {
-            container.classList.add('video-playlist--start');
-            $('.video-title__link', container).removeAttr('tabindex');
-            $('.video-title__link', container).removeAttr('aria-hidden');
-            $('.treats__treat', container).removeAttr('tabindex');
-            $('.treats__treat', container).removeAttr('aria-hidden');
-            $('.js-video-playlist-prev', container).attr('aria-hidden', 'true');
-            $('.js-video-playlist-prev', container).attr('tabindex', '-1');
-        } else {
-            $('.video-title__link', container).attr('tabindex', '-1');
-            $('.video-title__link', container).attr('aria-hidden', 'true');
-            $('.treats__treat', container).attr('tabindex', '-1');
-            $('.treats__treat', container).attr('aria-hidden', 'true');
-            $('.js-video-playlist-prev', container).removeAttr('aria-hidden');
-            $('.js-video-playlist-prev', container).attr('tabindex', '0');
-        }
-
-        if (state.atEnd) {
-            container.classList.add('video-playlist--end');
-            $('.js-video-playlist-next', container).attr('aria-hidden', 'true');
-            $('.js-video-playlist-next', container).attr('tabindex', '-1');
-        } else {
-            $('.js-video-playlist-next', container).removeAttr('aria-hidden');
-            $('.js-video-playlist-next', container).attr('tabindex', '0');
-        }
-
-        // fetch the next image (for desktop)
-        fetchLazyImage(container, state.position + 1);
-
-        const activePlaylistItem = container.querySelector(
-            `.js-video-playlist-item-${state.position}`
-        );
-        if (activePlaylistItem != null)
-            activePlaylistItem.classList.add('video-playlist__item--active');
-
-        const playlistInner = container.querySelector(
-            '.js-video-playlist-inner'
-        );
-        if (playlistInner != null)
-            playlistInner.setAttribute(
-                'style',
-                `-webkit-transform: translate(${translateWidth}px);` +
-                    `transform: translate(${translateWidth}px);`
-            );
-    });
-};
-
-const getInitialState = (container: Element): State => ({
-    position: 0,
-    length: Number(container.getAttribute('data-number-of-videos')),
-    videoWidth: 700,
-    container,
-});
-
-const setupDispatches = (
-    dispatch: (a: Action) => void,
-    container: Element
-): void => {
-    bean.on(container, 'click', '.js-video-playlist-next', () => {
-        dispatch({
-            type: 'NEXT',
-        });
-    });
-
-    bean.on(container, 'keypress', '.js-video-playlist-next', e => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            dispatch({
-                type: 'NEXT',
-            });
-        }
-    });
-
-    bean.on(container, 'click', '.js-video-playlist-prev', () => {
-        dispatch({
-            type: 'PREV',
-        });
-    });
-
-    bean.on(container, 'keypress', '.js-video-playlist-prev', e => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            dispatch({
-                type: 'PREV',
-            });
-        }
-    });
-};
-
-const reducer = (previousState: State, action: Action): State =>
-    reducers[action.type]
-        ? reducers[action.type](previousState)
-        : previousState;
-
-const createStore = (
-    storeReducer: (s: State, a: Action) => State,
-    initialState: State
-) => {
-    // We re-assign this over time
-    let state = initialState;
-    const subscribers = [];
-
-    const notify = () => {
-        subscribers.forEach(fn => {
-            fn();
-        });
-    };
-    const dispatch = action => {
-        state = storeReducer(state, action);
-        notify();
-    };
-    const subscribe = fn => {
-        subscribers.push(fn);
-    };
-    const getState = () => state;
-
-    dispatch({
-        type: 'INIT',
-    });
-
-    return {
-        dispatch,
-        subscribe,
-        getState,
-    };
-};
-
-export const videoContainerInit = (container: Element) => {
-    const initialState = getInitialState(container);
-    const store = createStore(reducer, initialState);
-
-    setupDispatches(store.dispatch, container);
-    store.subscribe(() => {
-        update(store.getState(), container);
-    });
-
-    $('.video-playlist__item:not(.video-playlist__item--first)').each($el => {
-        $('.youtube-media-atom__iframe', $el).hide();
-        $('.video-overlay .fc-item__link', $el).attr('tabindex', '-1');
-        $('.video-overlay .fc-item__link', $el).attr('aria-hidden', 'true');
-    });
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/modules/video/videojs-options.js b/static/src/javascripts.flow.archive/projects/common/modules/video/videojs-options.js
deleted file mode 100644
index 1200e1c6c8c..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/modules/video/videojs-options.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/modules/video/videojs-options.js
- * to .ts, then delete it.
- */
-
-// @flow
-const defaults = {
-    controls: true,
-    textTrackDisplay: false,
-    textTrackSettings: false,
-    controlBar: {
-        children: [
-            'playToggle',
-            'currentTimeDisplay',
-            'timeDivider',
-            'durationDisplay',
-            'progressControl',
-            'fullscreenToggle',
-            'volumeMenuButton',
-        ],
-    },
-    // `autoplay` is always set to false.
-    // If you are going to set autoplay to any other value, note it breaks
-    // `preload="auto"` on < Chrome 35 and `preload="metadata"` on old Safari
-    autoplay: false,
-    preload: 'none',
-    techOrder: ['html5'],
-    notSupportedMessage: 'This video is no longer available.',
-};
-
-export default (overrides: Object = {}): Object =>
-    Object.assign({}, defaults, overrides);
diff --git a/static/src/javascripts.flow.archive/projects/common/views/svg.js b/static/src/javascripts.flow.archive/projects/common/views/svg.js
deleted file mode 100644
index 5b51202e0e0..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/views/svg.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/views/svg.js
- * to .ts, then delete it.
- */
-
-// @flow
-export const addClassesAndTitle = (
-    markup: string,
-    classes?: Array<string>,
-    title?: string
-): string => {
-    // Only mess with classes if we actually need to.
-    let markupWithClasses = markup;
-    if (classes) {
-        // #? Typchecking not needed anymore
-        if (Array.isArray(classes)) {
-            markupWithClasses = markupWithClasses.replace(
-                /class="/,
-                `class="${classes.join(' ')} `
-            );
-        } else if (window.console && window.console.error) {
-            // Some environments don't support or don't always expose the console object
-            window.console.error(
-                `Classes for inlineSvg must be an array: ${classes}`
-            );
-        }
-    }
-
-    // Only mess with title if we actually need to.
-    const markupWithTitle = title
-        ? markupWithClasses.replace(/<span /, `<span title="${title}" `)
-        : markupWithClasses;
-
-    return markupWithTitle;
-};
diff --git a/static/src/javascripts.flow.archive/projects/common/views/svg.spec.js b/static/src/javascripts.flow.archive/projects/common/views/svg.spec.js
deleted file mode 100644
index 29f2a5b3449..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/views/svg.spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/views/svg.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import { addClassesAndTitle } from './svg';
-
-describe('svg.addClassesAndTitle', () => {
-    test('leaves markup alone if only markup passed', () => {
-        expect(addClassesAndTitle('<span></span>')).toBe('<span></span>');
-    });
-
-    test('adds all classes passed in', () => {
-        expect(
-            addClassesAndTitle('<span class="foo"></span>', ['bar', 'baz'])
-        ).toBe('<span class="bar baz foo"></span>');
-    });
-
-    test('adds title if present', () => {
-        expect(
-            addClassesAndTitle(
-                '<span class="foo"></span>',
-                ['bar', 'baz'],
-                'the title'
-            )
-        ).toBe('<span title="the title" class="bar baz foo"></span>');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/common/views/svgs.js b/static/src/javascripts.flow.archive/projects/common/views/svgs.js
deleted file mode 100644
index a47dd9deeb1..00000000000
--- a/static/src/javascripts.flow.archive/projects/common/views/svgs.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/common/views/svgs.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-// DEPRECATED: please don't use this file to inject SVGs into your markup
-// Instead load the SVGs directly into your JavaScript module
-
-// If you must add a new SVG file here, please reflect this in:
-// static/test/javascripts-legacy/helpers/svg-paths.js
-
-import commentCount16icon from 'svgs/icon/comment-16.svg';
-import marque36icon from 'svgs/icon/marque-36.svg';
-import marque54icon from 'svgs/icon/marque-54.svg';
-import marketDownIcon from 'svgs/icon/market-down.svg';
-import marketUpIcon from 'svgs/icon/market-up.svg';
-import marketSameIcon from 'svgs/icon/market-same.svg';
-import arrowicon from 'svgs/icon/arrow.svg';
-import arrowdownicon from 'svgs/icon/arrow-down.svg';
-import crossIcon from 'svgs/icon/cross.svg';
-import quoteIcon from 'svgs/icon/quote.svg';
-import paidContent from 'svgs/commercial/paid-content.svg';
-import closeCentralIcon from 'svgs/icon/close-central.svg';
-import arrowWhiteRight from 'svgs/icon/arrow-white-right.svg';
-import arrowRight from 'svgs/icon/arrow-right.svg';
-import bookmark from 'svgs/icon/bookmark.svg';
-import dropdownMask from 'svgs/icon/dropdown-mask.svg';
-import commentAnchor from 'svgs/icon/comment-anchor.svg';
-import reply from 'svgs/icon/reply.svg';
-import expandImage from 'svgs/icon/expand-image.svg';
-import cursor from 'svgs/icon/cursor.svg';
-import plus from 'svgs/icon/plus.svg';
-import share from 'svgs/icon/share.svg';
-import shareTwitter from 'svgs/icon/share-twitter.svg';
-import shareEmail from 'svgs/icon/share-email.svg';
-import shareFacebook from 'svgs/icon/share-facebook.svg';
-import externalLink from 'svgs/icon/external-link.svg';
-import tick from 'svgs/icon/tick.svg';
-import glabsLogoSmall from 'svgs/logo/glabs-logo-small.svg';
-import logomembership from 'svgs/commercial/logo-membership.svg';
-import star from 'svgs/icon/star.svg';
-import chevronRight from 'svgs/icon/chevron-right.svg';
-
-import { addClassesAndTitle } from 'common/views/svg';
-
-const svgs = {
-    commentCount16icon,
-    marque36icon,
-    marque54icon,
-    marketDownIcon,
-    marketUpIcon,
-    marketSameIcon,
-    arrowicon,
-    arrowdownicon,
-    crossIcon,
-    quoteIcon,
-    paidContent,
-    closeCentralIcon,
-    arrowWhiteRight,
-    arrowRight,
-    bookmark,
-    dropdownMask,
-    commentAnchor,
-    reply,
-    expandImage,
-    cursor,
-    plus,
-    share,
-    shareTwitter,
-    shareEmail,
-    shareFacebook,
-    externalLink,
-    tick,
-    glabsLogoSmall,
-    logomembership,
-    star,
-    chevronRight,
-};
-
-export const inlineSvg = (
-    name: string,
-    classes?: Array<string>,
-    title?: string
-): string => addClassesAndTitle(svgs[name].markup, classes, title);
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/geo-most-popular-front-extended.js b/static/src/javascripts.flow.archive/projects/facia/modules/onwards/geo-most-popular-front-extended.js
deleted file mode 100644
index 55d0ad5d2c3..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/geo-most-popular-front-extended.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/onwards/geo-most-popular-front-extended.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: geo-most-popular-front.js
- Description: replaces general most popular trails with geo based most popular on fronts.
- */
-import qwery from 'qwery';
-import $ from 'lib/$';
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-import { begin, end } from 'common/modules/analytics/register';
-import { Component } from 'common/modules/component';
-import type bonzo from 'bonzo';
-
-export class GeoMostPopularFrontExtended extends Component {
-    constructor() {
-        super();
-        begin('most-popular');
-        this.endpoint = '/most-read-geo.json';
-        this.manipulationType = 'html';
-    }
-
-    parent: ?bonzo;
-
-    prerender(): void {
-        const isInternational = config.get('page.pageId') === 'international';
-
-        /**
-         * mostReadClone is a clone of the server side rendered most read element.
-         * After making the clone we hydrate it with the latestMostPopularTab and the
-         * latestMostCards, which are retrieved from the element in the network response (aka this.elem).
-         * The server side rendered most read element will be replaced with the hydrated mostReadClone.
-         */
-        if (this.parent) {
-            const mostReadClone = this.parent.cloneNode(true);
-            const latestMostPopularTab = qwery('.most-popular', this.elem)[0];
-            /**
-             * Find the 2nd tab in mostReadClone and assign to mostPopularTabInClone.
-             * This tab is initially empty, so we want to hydrate/replace it with the latestMostPopularTab.
-             */
-            const mostPopularTabInClone = qwery(
-                '.js-tab-2 .most-popular',
-                mostReadClone
-            )[0];
-
-            if (
-                !isInternational && // we don't update the most popular list for international fronts
-                latestMostPopularTab &&
-                mostPopularTabInClone &&
-                mostPopularTabInClone.parentNode
-            ) {
-                // Replace mostPopularTabInClone with latestMostPopularTab
-                mostPopularTabInClone.parentNode.replaceChild(
-                    latestMostPopularTab,
-                    mostPopularTabInClone
-                );
-            }
-
-            const mostCardsSelector = '.most-popular__second-tier';
-            const latestMostCards = qwery(mostCardsSelector, this.elem)[0];
-            /**
-             * Find the most cards container in mostReadClone and assign to mostCardsInClone.
-             * This container is initially empty, so we want to hydrate/replace it with the latestMostCards.
-             */
-            const mostCardsInClone = qwery(mostCardsSelector, mostReadClone)[0];
-
-            if (
-                latestMostCards &&
-                mostCardsInClone &&
-                mostCardsInClone.parentNode
-            ) {
-                // Replace mostCardsInClone with latestMostCards
-                mostCardsInClone.parentNode.replaceChild(
-                    latestMostCards,
-                    mostCardsInClone
-                );
-            }
-
-            const latestPopularTrails = qwery(
-                '#popular-trails',
-                mostReadClone
-            )[0];
-
-            if (latestPopularTrails) {
-                /**
-                 * Setting this.elem to be latestPopularTrails means
-                 * latestPopularTrails will replace the contents of the existing
-                 * server side rendered most read element.
-                 */
-                this.elem = latestPopularTrails;
-            }
-        }
-    }
-
-    go(): void {
-        this.parent = qwery('.js-popular-trails')[0];
-
-        if (this.parent) {
-            this.fetch(this.parent, this.manipulationType);
-        }
-    }
-
-    ready(): void {
-        const isNetworkFront =
-            config.get('page.contentType') === 'Network Front';
-
-        // Hide tabs on all Network fronts
-        if (isNetworkFront) {
-            $('.js-tabs-content', this.parent).addClass(
-                'tabs__content--no-border'
-            );
-            $('.js-tabs', this.parent).addClass('u-h');
-        }
-
-        end('most-popular');
-        mediator.emit('modules:geomostpopular:ready');
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/geo-most-popular-front.js b/static/src/javascripts.flow.archive/projects/facia/modules/onwards/geo-most-popular-front.js
deleted file mode 100644
index 2721ae08a0a..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/geo-most-popular-front.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/onwards/geo-most-popular-front.js
- * to .ts, then delete it.
- */
-
-// @flow
-/*
- Module: geo-most-popular-front.js
- Description: replaces general most popular trails with geo based most popular on fronts.
- */
-import qwery from 'qwery';
-import $ from 'lib/$';
-import config from 'lib/config';
-import mediator from 'lib/mediator';
-import { begin, end } from 'common/modules/analytics/register';
-import { Component } from 'common/modules/component';
-import type bonzo from 'bonzo';
-
-const hideTabs = (parent: bonzo): void => {
-    $('.js-tabs-content', parent).addClass('tabs__content--no-border');
-    $('.js-tabs', parent).addClass('u-h');
-};
-
-export class GeoMostPopularFront extends Component {
-    constructor() {
-        super();
-        begin('most-popular');
-        this.endpoint = '/most-read-geo.json';
-        this.isNetworkFront =
-            config.get('page.contentType') === 'Network Front';
-        this.isVideoFront = config.get('page.pageId') === 'video';
-        this.isInternational = config.get('page.pageId') === 'international';
-        this.manipulationType = 'html';
-    }
-
-    isNetworkFront: boolean;
-    isVideoFront: boolean;
-    isInternational: boolean;
-    parent: ?bonzo;
-
-    prerender(): void {
-        this.elem = qwery('.headline-list', this.elem)[0];
-    }
-
-    go(): void {
-        const tabSelector = this.isNetworkFront ? '.js-tab-1' : '.js-tab-2';
-        this.parent = qwery('.js-popular-trails')[0];
-
-        if (this.parent) {
-            if (
-                (this.isInternational && this.isNetworkFront) ||
-                this.isVideoFront
-            ) {
-                // hide the tabs
-                hideTabs(this.parent);
-            } else {
-                const tab = this.parent.querySelector(tabSelector);
-
-                if (tab) {
-                    this.fetch(tab, 'html');
-                }
-            }
-        }
-    }
-
-    ready(): void {
-        if (this.isNetworkFront) {
-            hideTabs(this.parent);
-        }
-        end('most-popular');
-        mediator.emit('modules:geomostpopular:ready');
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/search-tool.js b/static/src/javascripts.flow.archive/projects/facia/modules/onwards/search-tool.js
deleted file mode 100644
index 941085cacdd..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/search-tool.js
+++ /dev/null
@@ -1,285 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/onwards/search-tool.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bean from 'bean';
-import $ from 'lib/$';
-import fetchJson from 'lib/fetch-json';
-import mediator from 'lib/mediator';
-import reportError from 'lib/report-error';
-import bonzo from 'bonzo';
-
-type WeatherSearchOptions = {
-    container: bonzo,
-    apiUrl: string,
-};
-
-type City = {
-    id: string,
-    city: string,
-    country: string,
-};
-
-// Keys must be strings for Flow: https://github.com/facebook/flow/issues/380
-const keyCodeMap = {
-    '13': 'enter',
-    '38': 'up',
-    '40': 'down',
-    '27': 'escape',
-};
-
-export type CityPreference = {
-    id: string,
-    city: string,
-    store: 'set' | 'remove',
-};
-
-export class SearchTool {
-    apiUrl: string;
-    $list: bonzo;
-    $input: bonzo;
-    oldQuery: string;
-    newQuery: string;
-    inputTmp: string;
-
-    constructor(options: WeatherSearchOptions) {
-        const container = options.container;
-        this.apiUrl = options.apiUrl;
-
-        this.bindElements(container);
-        this.bindEvents();
-
-        this.oldQuery = '';
-        this.newQuery = '';
-        this.inputTmp = '';
-    }
-
-    static nearestLinkNode(target: ?Node): ?Node {
-        if ($(target).hasClass('js-search-tool-link')) {
-            return target;
-        }
-        return $.ancestor(target, 'js-search-tool-link');
-    }
-
-    bindElements(container: ?Element): void {
-        this.$list = $('.js-search-tool-list', container);
-        this.$input = $('.js-search-tool-input', container);
-    }
-
-    bindEvents(): void {
-        bean.on(document.body, 'keyup', this.handleKeyEvents.bind(this));
-        bean.on(document.body, 'click', this.handleClick.bind(this));
-
-        mediator.on('autocomplete:toggle', this.toggleControls.bind(this));
-    }
-
-    hasInputValueChanged(): boolean {
-        return this.oldQuery.length !== this.newQuery.length;
-    }
-
-    handleClick(e: bean): void {
-        const isInput = $(e.target).hasClass('js-search-tool-input');
-        const isLink = SearchTool.nearestLinkNode(e.target);
-
-        if (isInput) {
-            e.preventDefault();
-            mediator.emit('autocomplete:toggle', true);
-        } else if (isLink) {
-            e.preventDefault();
-            $('.active', this.$list).removeClass('active');
-            $(isLink).addClass('active');
-            this.pushData();
-        } else {
-            mediator.emit('autocomplete:toggle', false);
-        }
-    }
-
-    toggleControls(value: bean): void {
-        const $input = $('.js-search-tool-input')[0];
-        const $location = $('.js-search-tool');
-        const $close = $('.js-close-location');
-
-        if (value) {
-            this.inputTmp = $input.value;
-            $location.addClass('is-editing');
-            $input.setSelectionRange(0, $input.value.length);
-            $close.removeClass('u-h');
-        } else {
-            $location.removeClass('is-editing');
-            this.clear();
-            this.setInputValue(this.inputTmp);
-            $close.addClass('u-h');
-        }
-    }
-
-    pushData(): void {
-        const $active = $('.active', this.$list);
-        let store = 'set';
-
-        if ($active.length === 0) {
-            if (this.$input.val() === '') {
-                store = 'remove';
-            } else {
-                return;
-            }
-        }
-
-        const data: CityPreference = {
-            id: $active.attr('data-weather-id'),
-            city: $active.attr('data-weather-city'),
-            store,
-        };
-
-        // Send data to whoever is listening
-        mediator.emit('autocomplete:fetch', data);
-        this.setInputValue();
-        this.inputTmp = data.city;
-        this.$input.blur();
-
-        // Clear all after timeout because of the tracking we can't remove everything straight away
-        setTimeout(this.destroy.bind(this), 50);
-    }
-
-    getListOfResults(e: bean): void {
-        this.newQuery = e.target.value;
-
-        // If we have empty input clear everything and don't fetch the data
-        if (!e.target.value.match(/\S/)) {
-            this.clear();
-            this.oldQuery = '';
-            return;
-        }
-
-        // If input value hasn't changed don't fetch the data
-        if (!this.hasInputValueChanged()) {
-            return;
-        }
-
-        this.fetchData();
-    }
-
-    fetchData(): Promise<void> {
-        return fetchJson(`${this.apiUrl}${this.newQuery}`, {
-            mode: 'cors',
-        })
-            .then(positions => {
-                this.renderList(positions, 5);
-                this.oldQuery = this.newQuery;
-            })
-            .catch(ex => {
-                reportError(ex, {
-                    feature: 'search-tool',
-                });
-            });
-    }
-
-    handleKeyEvents(e: bean): void {
-        const key = keyCodeMap[e.which || e.keyCode];
-
-        // Run this function only if we are inside the input
-        if (!$(e.target).hasClass('js-search-tool-input')) {
-            return;
-        }
-
-        if (key === 'down') {
-            // down
-            e.preventDefault();
-            this.move(1);
-        } else if (key === 'up') {
-            // up
-            e.preventDefault();
-            this.move(-1);
-        } else if (key === 'enter') {
-            // enter
-            this.pushData();
-        } else if (key === 'escape') {
-            this.toggleControls();
-        } else {
-            this.getListOfResults(e);
-        }
-    }
-
-    move(increment: number): void {
-        const $active = $('.active', this.$list);
-        let id = parseInt($active.attr('id'), 10);
-
-        if (Number.isNaN(id)) {
-            id = -1;
-        }
-
-        $active.removeClass('active');
-
-        // When outside of the list show latest query
-        if (this.getNewId(id + increment) < 0) {
-            this.setInputValue(this.oldQuery);
-
-            // When looping inside of the list show list item
-        } else {
-            $(`#${this.getNewId(id + increment)}sti`, this.$list).addClass(
-                'active'
-            );
-            this.setInputValue();
-        }
-    }
-
-    getNewId(id: number): number {
-        const len = $('li', this.$list).length;
-        let newId = id % len;
-
-        // Make sure that we can hit saved input option which has position -1
-        if (newId < -1) {
-            newId = len - 1;
-        } else if (id === len) {
-            newId = -1;
-        }
-
-        return newId;
-    }
-
-    setInputValue(value?: string): void {
-        const inputValue =
-            value || $('.active', this.$list).attr('data-weather-city');
-
-        this.$input.val(inputValue);
-    }
-
-    renderList(results: Array<City>, resultsToShow: number): void {
-        const docFragment = document.createDocumentFragment();
-
-        results.slice(0, resultsToShow).forEach((item, index) => {
-            const li = document.createElement('li');
-
-            li.className = 'search-tool__item';
-            li.innerHTML =
-                `<a role="button" href="#${item.id}"` +
-                ` id="${index}sti" class="js-search-tool-link search-tool__link${
-                    index === 0 ? ' active"' : '"'
-                } data-link-name="weather-search-tool" data-weather-id="${
-                    item.id
-                }" data-weather-city="${item.city}">${
-                    item.city
-                } <span class="search-tool__meta">${item.country}</span></a>`;
-
-            docFragment.appendChild(li);
-        });
-
-        this.clear().append(docFragment);
-    }
-
-    clear(): bonzo {
-        return this.$list.html('');
-    }
-
-    destroy(): void {
-        this.clear();
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/search-tool.spec.js b/static/src/javascripts.flow.archive/projects/facia/modules/onwards/search-tool.spec.js
deleted file mode 100644
index 6f5f3e94c8c..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/search-tool.spec.js
+++ /dev/null
@@ -1,240 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/onwards/search-tool.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import $ from 'lib/$';
-import fetchJson_ from 'lib/fetch-json';
-import { SearchTool } from 'facia/modules/onwards/search-tool';
-import mediator from 'lib/mediator';
-
-jest.mock('lib/raven');
-
-jest.mock('lib/fetch-json', () => jest.fn());
-
-const fetchJson: JestMockFn<*, *> = (fetchJson_: any);
-
-describe('Search tool', () => {
-    let container;
-    let sut;
-
-    beforeEach(done => {
-        container = $.create(
-            '<div class="weather"><p class="weather__desc">' +
-                '<span class="u-h">The temperature</span>' +
-                '<span class="weather__time">Now</span>' +
-                '<span class="u-h">is</span>' +
-                '<span class="weather__temp js-weather-temp">35°C</span>' +
-                '</p>' +
-                '<span class="inline-weather-31 inline-weather weather__icon js-weather-icon"></span>' +
-                '<input id="editlocation" class="search-tool__input js-search-tool-input js-weather-input" type="text" value="London" />' +
-                '<ul class="u-unstyled search-tool__list js-search-tool-list"></ul>' +
-                '</div>'
-        );
-
-        $('body').append(container);
-
-        sut = new SearchTool({
-            container,
-            apiUrl: 'http://testapiurl',
-        });
-
-        done();
-    });
-
-    afterEach(() => {
-        $('body').html('');
-        container = null;
-        fetchJson.mockReset();
-    });
-
-    it('should be defined', () => {
-        expect(sut).toEqual(expect.any(Object));
-    });
-
-    it('should respond to keydown event', () => {
-        const stubEvent = {
-            keyCode: 38,
-            preventDefault() {},
-            target: $('.js-search-tool-input')[0],
-        };
-
-        jest.spyOn(sut, 'move');
-        jest.spyOn(sut, 'pushData');
-        jest.spyOn(sut, 'getListOfResults');
-
-        // Test for up key
-        sut.handleKeyEvents(stubEvent);
-        expect(sut.move).toHaveBeenCalledWith(-1);
-
-        // Test for down key
-        stubEvent.keyCode = 40;
-        sut.handleKeyEvents(stubEvent);
-        expect(sut.move).toHaveBeenCalledWith(1);
-
-        // Test for down key
-        stubEvent.keyCode = 13;
-        sut.handleKeyEvents(stubEvent);
-        expect(sut.pushData).toHaveBeenCalled();
-
-        // Test for any other key
-        stubEvent.keyCode = 22;
-        fetchJson.mockImplementationOnce(() => Promise.resolve([]));
-        sut.handleKeyEvents(stubEvent);
-        expect(sut.getListOfResults).toHaveBeenCalledWith(stubEvent);
-    });
-
-    it('should close search tool if not clicked on the list', () => {
-        jest.spyOn(mediator, 'emit');
-
-        sut.handleClick({ target: $('body')[0] });
-        expect(mediator.emit).toHaveBeenCalledWith(
-            'autocomplete:toggle',
-            false
-        );
-    });
-
-    it('should push data after click on list item', () => {
-        jest.spyOn(sut, 'pushData');
-        jest.spyOn(mediator, 'emit');
-
-        $('.js-search-tool-list').html(
-            '<li><a class="js-search-tool-link active"></a><a class="js-search-tool-link" data-weather-id="292177" data-weather-city="Ufa"><span></span></a></li>'
-        );
-
-        bean.fire($('.js-search-tool-list span')[0], 'click');
-
-        expect(sut.pushData).toHaveBeenCalled();
-        expect(mediator.emit).toHaveBeenCalledWith('autocomplete:fetch', {
-            id: '292177',
-            city: 'Ufa',
-            store: 'set',
-        });
-        expect($('.active').length).toEqual(1);
-    });
-
-    it('should not push data after enter without selecting from the list', () => {
-        jest.spyOn(mediator, 'emit');
-
-        $('.js-search-tool-input').val('');
-        sut.pushData();
-
-        expect(mediator.emit).toHaveBeenCalled();
-        expect(mediator.emit).toHaveBeenCalledWith('autocomplete:fetch', {
-            id: null,
-            city: null,
-            store: 'remove',
-        });
-    });
-
-    it('should not push data after enter with uncomplete city name ', () => {
-        $('.js-search-tool-input').val('Syd');
-
-        expect(sut.pushData()).toEqual(undefined);
-    });
-
-    it('should return new ID', () => {
-        $('.js-search-tool-list').html('<li></li><li></li><li></li><li></li>');
-
-        expect(sut.getNewId(0)).toEqual(0);
-        expect(sut.getNewId(1)).toEqual(1);
-        expect(sut.getNewId(2)).toEqual(2);
-        expect(sut.getNewId(3)).toEqual(3);
-        expect(sut.getNewId(4)).toEqual(-1);
-        expect(sut.getNewId(-1)).toEqual(-1);
-    });
-
-    it("should not call for results if data haven't change", () => {
-        const stubEvent = {
-            keyCode: 38,
-            preventDefault() {},
-            target: {
-                value: 'test',
-            },
-        };
-
-        jest.spyOn(sut, 'fetchData');
-        jest.spyOn(sut, 'hasInputValueChanged').mockImplementation(() => false);
-
-        sut.getListOfResults(stubEvent);
-
-        expect(sut.fetchData).not.toHaveBeenCalled();
-    });
-
-    it('should close list if input is empty', () => {
-        const stubEvent = {
-            keyCode: 8, // Backspace
-            preventDefault() {},
-            target: {
-                value: '',
-            },
-        };
-
-        jest.spyOn(sut, 'fetchData');
-        jest.spyOn(sut, 'clear');
-
-        sut.getListOfResults(stubEvent);
-
-        expect(sut.clear).toHaveBeenCalled();
-        expect(sut.fetchData).not.toHaveBeenCalled();
-    });
-
-    it('should clear after pushing data', () => {
-        jest.spyOn(sut, 'destroy');
-
-        $('.js-search-tool-list').html(
-            '<li><a class="active" data-weather-city="test2"></a></li>'
-        );
-
-        jest.useFakeTimers();
-
-        sut.pushData();
-
-        jest.runTimersToTime(1);
-        expect(sut.destroy).not.toHaveBeenCalled();
-
-        jest.runTimersToTime(51);
-        expect(sut.destroy).toHaveBeenCalled();
-    });
-
-    it('should fetch data', done => {
-        fetchJson.mockImplementationOnce(() =>
-            Promise.resolve([{ localizedName: 'London' }])
-        );
-
-        jest.spyOn(sut, 'renderList');
-
-        jest.useFakeTimers();
-        sut.fetchData().then(() => {
-            expect(sut.renderList).toHaveBeenCalledWith(
-                [{ localizedName: 'London' }],
-                5
-            );
-            done();
-        });
-        jest.runAllTimers();
-    });
-
-    it('should set input value', () => {
-        jest.spyOn(sut, 'setInputValue');
-
-        sut.setInputValue('test1');
-        expect($('.js-search-tool-input').val()).toEqual('test1');
-
-        $('.js-search-tool-list').html(
-            '<li><a class="active" data-weather-city="test2"></a></li>'
-        );
-        sut.setInputValue();
-        expect($('.js-search-tool-input').val()).toEqual('test2');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/weather.js b/static/src/javascripts.flow.archive/projects/facia/modules/onwards/weather.js
deleted file mode 100644
index 7f31ec5c8a5..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/weather.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/onwards/weather.js
- * to .ts, then delete it.
- */
-
-// @flow
-/**
-    "WEATHER"
-
-    Whether the weather be fine,
-    Or whether the weather be not,
-    Whether the weather be cold,
-    Or whether the weather be hot,
-    We'll weather the weather
-    Whatever the weather,
-    Whether we like it or not!
-
-    Author: Anonymous British
- */
-
-import bean from 'bean';
-import reportError from 'lib/report-error';
-import $ from 'lib/$';
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import mediator from 'lib/mediator';
-import userPrefs from 'common/modules/user-prefs';
-import { SearchTool } from 'facia/modules/onwards/search-tool';
-import type { CityPreference } from 'facia/modules/onwards/search-tool';
-
-let $holder = null;
-let searchTool = null;
-let eventsBound = false;
-const prefName = 'weather-location';
-
-type Location = {
-    id: string,
-    city: string,
-};
-
-type WeatherResponse = {
-    html: string,
-};
-
-const isNetworkFront = (): boolean =>
-    ['uk', 'us', 'au', 'international'].includes(config.get('page.pageId'));
-
-export const Weather = {
-    init(): ?boolean {
-        if (!config.get('switches.weather', false) || !isNetworkFront()) {
-            return false;
-        }
-
-        this.getDefaultLocation();
-    },
-
-    /**
-     * Check if user has data in local storage.
-     * If yes return data from local storage else return default location data.
-     */
-    getUserLocation(): ?Location {
-        const prefs = userPrefs.get(prefName);
-
-        if (prefs && prefs.id) {
-            return prefs;
-        }
-    },
-
-    getWeatherData(url: string): Promise<WeatherResponse> {
-        return fetchJson(url, {
-            mode: 'cors',
-        });
-    },
-
-    /**
-     * Save user location into localStorage
-     */
-    saveUserLocation(location: Location): void {
-        userPrefs.set(prefName, {
-            id: location.id,
-            city: location.city,
-        });
-    },
-
-    getDefaultLocation(): Promise<void> {
-        const location = this.getUserLocation();
-
-        if (location) {
-            return this.fetchWeatherData(location);
-        }
-        return this.getWeatherData(`${config.get('page.weatherapiurl')}.json`)
-            .then(response => {
-                this.fetchWeatherData(response);
-            })
-            .catch(err => {
-                reportError(err, {
-                    feature: 'weather',
-                });
-            });
-    },
-
-    fetchWeatherData(location: Location): Promise<void> {
-        const weatherApiBase = config.get('page.weatherapiurl');
-        const edition = config.get('page.edition');
-        return this.getWeatherData(
-            `${weatherApiBase}/${
-                location.id
-            }.json?_edition=${edition.toLowerCase()}`
-        )
-            .then(response => {
-                this.render(response, location.city);
-                this.fetchForecastData(location);
-            })
-            .catch(err => {
-                reportError(err, {
-                    feature: 'weather',
-                });
-            });
-    },
-
-    clearLocation(): void {
-        userPrefs.remove(prefName);
-        if (searchTool !== null) {
-            searchTool.setInputValue();
-        }
-    },
-
-    fetchForecastData(location: Location): Promise<void> {
-        return this.getWeatherData(
-            `${config.get('page.forecastsapiurl')}/${
-                location.id
-            }.json?_edition=${config.get('page.edition').toLowerCase()}`
-        )
-            .then(response => {
-                this.renderForecast(response);
-            })
-            .catch(err => {
-                reportError(err, {
-                    feature: 'weather',
-                });
-            });
-    },
-
-    saveDeleteLocalStorage(response: CityPreference): void {
-        if (response.store === 'set') {
-            // After user interaction we want to store the location in localStorage
-            this.saveUserLocation(response);
-            this.fetchWeatherData(response).then(() => this.toggleForecast());
-        } else if (response.store === 'remove') {
-            // After user sent empty data we want to remove location and get the default location
-            this.clearLocation();
-            this.getDefaultLocation();
-        }
-    },
-
-    bindEvents(): void {
-        bean.on(document.body, 'click', '.js-toggle-forecast', e => {
-            e.preventDefault();
-            this.toggleForecast();
-        });
-
-        mediator.on(
-            'autocomplete:fetch',
-            this.saveDeleteLocalStorage.bind(this)
-        );
-    },
-
-    toggleForecast(): void {
-        $('.weather').toggleClass('is-expanded');
-    },
-
-    addSearch(): void {
-        searchTool = new SearchTool({
-            container: $('.js-search-tool'),
-            apiUrl: config.get('page.locationapiurl'),
-        });
-    },
-
-    render(weatherData: WeatherResponse, city: string): void {
-        this.attachToDOM(weatherData.html, city);
-
-        if (!eventsBound) {
-            this.bindEvents();
-            eventsBound = true;
-        }
-
-        if (searchTool === null) {
-            this.addSearch();
-        } else {
-            searchTool.bindElements($('.js-search-tool'));
-        }
-    },
-
-    attachToDOM(tmpl: string, city: string): void {
-        $holder = $('#headlines .js-container__header');
-        $('.js-weather', $holder).remove();
-        $holder.append(tmpl.replace(new RegExp('<%=city%>', 'g'), city));
-    },
-
-    renderForecast(forecastData: WeatherResponse): void {
-        const $forecastHolder = $('.js-weather-forecast');
-        const tmpl = forecastData.html;
-
-        $forecastHolder.empty().html(tmpl);
-    },
-};
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/weather.spec.js b/static/src/javascripts.flow.archive/projects/facia/modules/onwards/weather.spec.js
deleted file mode 100644
index 3768392ce0a..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/onwards/weather.spec.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/onwards/weather.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-/* eslint-disable guardian-frontend/no-direct-access-config */
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import userPrefs from 'common/modules/user-prefs';
-import { Weather } from 'facia/modules/onwards/weather';
-
-jest.mock('lib/raven');
-jest.mock('lib/config');
-jest.mock('common/modules/user-prefs');
-jest.mock('lib/fetch-json', () => jest.fn());
-
-const fetchJsonMock: JestMockFn<*, *> = (fetchJson: any);
-
-describe('Weather component', () => {
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML = `
-                <div id="headlines">
-                    <div class="js-container__header"></div>
-                    <div class="js-weather-forecast"></div>
-                </div>
-            `;
-        }
-        fetchJsonMock.mockImplementation(() => Promise.resolve());
-    });
-    afterEach(() => {
-        config.page = null;
-        config.switches = {
-            weather: true,
-        };
-        userPrefs.remove('weather-location');
-        fetchJsonMock.mockReset();
-    });
-
-    describe('initialisation', () => {
-        it('should be behind a switch', () => {
-            config.page = {
-                pageId: 'uk',
-                edition: 'uk',
-            };
-            config.switches = {
-                weather: false,
-            };
-
-            expect(Weather.init()).toEqual(false);
-
-            config.switches = null;
-            expect(Weather.init()).toEqual(false);
-
-            config.switches = {
-                weather: true,
-            };
-            expect(Weather.init()).not.toEqual(false);
-        });
-
-        it('should initialize only if on front page', () => {
-            config.page = {
-                pageId: '/social',
-            };
-            expect(Weather.init()).toEqual(false);
-
-            config.page.pageId = 'uk';
-            expect(Weather.init()).not.toEqual(false);
-        });
-
-        it('should return false when the page is not network front', () => {
-            config.page = {
-                pageId: 'uk',
-            };
-            expect(Weather.init()).not.toEqual(false);
-
-            config.page.pageId = 'us';
-            expect(Weather.init()).not.toEqual(false);
-
-            config.page.pageId = 'au';
-            expect(Weather.init()).not.toEqual(false);
-
-            config.page.pageId = 'social';
-            expect(Weather.init()).toEqual(false);
-        });
-    });
-
-    it('should get location from user prefs', () => {
-        const result = {
-            id: 'qux',
-            city: 'doo',
-        };
-        expect(typeof Weather.getUserLocation()).toEqual('undefined');
-
-        Weather.saveUserLocation(result);
-        expect(Weather.getUserLocation()).toEqual(result);
-    });
-
-    it('should get the default location', () => {
-        config.page = {
-            weatherapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        fetchJsonMock.mockImplementationOnce(() =>
-            Promise.resolve({
-                id: 'qux',
-            })
-        );
-
-        return Weather.getDefaultLocation().then(() => {
-            expect(fetchJsonMock.mock.calls[0][0]).toEqual('foo.json');
-            expect(fetchJsonMock.mock.calls[1][0]).toEqual(
-                'foo/qux.json?_edition=bar'
-            );
-        });
-    });
-
-    it('should set data in userprefs and fetchWeatherData if user searches', () => {
-        config.page = {
-            weatherapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        const cityPreference = {
-            store: 'set',
-            id: 'qux',
-            city: 'doo',
-        };
-
-        Weather.saveDeleteLocalStorage(cityPreference);
-
-        expect(userPrefs.get('weather-location')).toEqual({
-            id: 'qux',
-            city: 'doo',
-        });
-        expect(fetchJsonMock.mock.calls[0][0]).toEqual(
-            'foo/qux.json?_edition=bar'
-        );
-    });
-
-    it('should remove data from userprefs and getDefaultLocation if user removes data', () => {
-        config.page = {
-            weatherapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        const cityPreference = {
-            store: 'remove',
-            id: 'qux',
-            city: 'doo',
-        };
-
-        Weather.saveDeleteLocalStorage(cityPreference);
-
-        expect(userPrefs.get('weather-location')).toBeUndefined();
-        expect(fetchJsonMock.mock.calls[0][0]).toEqual('foo.json');
-    });
-
-    it('should fetch the data', () => {
-        config.page = {
-            weatherapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        Weather.fetchWeatherData({
-            id: 'qux',
-            city: 'doo',
-        });
-        expect(fetchJsonMock.mock.calls[0][0]).toEqual(
-            'foo/qux.json?_edition=bar'
-        );
-    });
-
-    it('should call render after fetching the weather data', () => {
-        config.page = {
-            weatherapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        fetchJsonMock.mockImplementationOnce(() =>
-            Promise.resolve({
-                html: `
-                    <div class="weather js-weather">
-                    <input class="js-search-tool-input" value="<%=city%>"/>
-                    <span class="js-weather-temp">4°C</span>
-                    <span class="js-weather-icon inline-weather-31"></span>`,
-            })
-        );
-
-        return Weather.fetchWeatherData({
-            id: 'qux',
-            city: 'doo',
-        }).then(() => {
-            if (document.body) {
-                expect(document.body.innerHTML).toContain('value="doo"');
-            }
-        });
-    });
-
-    it('should fetch the forecast data', () => {
-        config.page = {
-            forecastsapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        Weather.fetchForecastData({
-            id: 'qux',
-            city: 'doo',
-        });
-        expect(fetchJsonMock.mock.calls[0][0]).toEqual(
-            'foo/qux.json?_edition=bar'
-        );
-    });
-
-    it('should call render after fetching the forecast data', () => {
-        config.page = {
-            forecastsapiurl: 'foo',
-            edition: 'bar',
-        };
-
-        fetchJsonMock.mockImplementationOnce(() =>
-            Promise.resolve({
-                html: '<div class="forecast"></div>',
-            })
-        );
-
-        return Weather.fetchForecastData({
-            id: 'qux',
-            city: 'doo',
-        }).then(() => {
-            if (document.body) {
-                expect(document.body.innerHTML).toContain(
-                    '<div class="forecast"></div>'
-                );
-            }
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-show-more.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-show-more.js
deleted file mode 100644
index 781a13cfa07..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-show-more.js
+++ /dev/null
@@ -1,291 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/container-show-more.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import qwery from 'qwery';
-import $ from 'lib/$';
-import config from 'lib/config';
-import fetchJson from 'lib/fetch-json';
-import mediator from 'lib/mediator';
-import reportError from 'lib/report-error';
-import timeout from 'lib/timeout';
-import userPrefs from 'common/modules/user-prefs';
-import groupBy from 'lodash/groupBy';
-import { isAdFreeUser } from 'common/modules/commercial/user-features';
-
-const HIDDEN_CLASS_NAME = 'fc-show-more--hidden';
-const VISIBLE_CLASS_NAME = 'fc-show-more--visible';
-const TEXT_HOOK = 'js-button-text';
-const PREF_NAME = 'section-states';
-const BUTTON_SPINNER_CLASS = 'collection__show-more--loading';
-const ARTICLE_ID_ATTRIBUTE = 'data-id';
-const ITEM_SELECTOR = '.js-fc-item';
-const REQUEST_TIMEOUT = 5000;
-const DISPLAY_STATE = Object.freeze({
-    displayed: 'displayed',
-    loading: 'loading',
-    hidden: 'hidden',
-});
-
-type DisplayState = $Keys<typeof DISPLAY_STATE>;
-
-const readDisplayPrefForContainer = (containerId: string): DisplayState => {
-    const prefs = userPrefs.get(PREF_NAME, {
-        type: 'session',
-    });
-    return prefs && prefs[containerId]
-        ? DISPLAY_STATE.displayed
-        : DISPLAY_STATE.hidden;
-};
-
-const updateDisplayPrefForContainer = (
-    containerId: string,
-    state: DisplayState
-): void => {
-    const prefs =
-        userPrefs.get(PREF_NAME, {
-            type: 'session',
-        }) || {};
-    if (state !== DISPLAY_STATE.displayed) {
-        delete prefs[containerId];
-    } else {
-        prefs[containerId] = 'more';
-    }
-    userPrefs.set(PREF_NAME, prefs, {
-        type: 'session',
-    });
-};
-
-const loadShowMore = (pageId: string, containerId: string): Promise<any> => {
-    const url = `/${pageId}/show-more/${containerId}.json`;
-    return timeout(
-        REQUEST_TIMEOUT,
-        fetchJson(url, {
-            mode: 'cors',
-        })
-    );
-};
-
-const itemsByArticleId = ($el: bonzo): Object =>
-    groupBy(qwery(ITEM_SELECTOR, $el), el =>
-        bonzo(el).attr(ARTICLE_ID_ATTRIBUTE)
-    );
-
-const dedupShowMore = ($container: bonzo, html: string): bonzo => {
-    const seenArticles = itemsByArticleId($container);
-    const $html = bonzo.create(html);
-
-    $(ITEM_SELECTOR, $html).each(article => {
-        const $article = bonzo(article);
-        const articleClass = $article.attr('class');
-        if (
-            $article.attr(ARTICLE_ID_ATTRIBUTE) in seenArticles ||
-            (isAdFreeUser() &&
-                articleClass &&
-                articleClass.includes('paid-content'))
-        ) {
-            $article.remove();
-        }
-    });
-
-    return $html;
-};
-
-class Button {
-    id: string;
-    state: DisplayState;
-    isLoaded: boolean;
-    $el: bonzo;
-    $container: bonzo;
-    $iconEl: bonzo;
-    $placeholder: bonzo;
-    $textEl: bonzo;
-    $errorMessage: ?bonzo;
-    messages: Map<DisplayState, string>;
-
-    constructor(el: bonzo, container: bonzo) {
-        this.id = container.attr('data-id');
-        this.state = readDisplayPrefForContainer(this.id);
-        this.$el = el;
-        this.$container = container;
-        this.isLoaded = false;
-        this.$iconEl = $('.i', this.$el);
-        this.$placeholder = $('.js-show-more-placeholder', this.$container);
-        this.$textEl = $(`.${TEXT_HOOK}`, this.$el);
-
-        if (this.state === DISPLAY_STATE.displayed) {
-            this.loadShowMoreForContainer();
-        }
-
-        this.messages = new Map([
-            [DISPLAY_STATE.hidden, $('.js-button-text', this.$el).text()],
-            [DISPLAY_STATE.displayed, 'Less'],
-            [DISPLAY_STATE.loading, 'Loading&hellip;'],
-        ]);
-    }
-
-    setState(state: DisplayState): void {
-        this.$textEl.html(this.messages.get(state));
-        this.$el
-            .attr(
-                'data-link-name',
-                state === DISPLAY_STATE.displayed ? 'less' : 'more'
-            )
-            .toggleClass('button--primary', state !== DISPLAY_STATE.displayed)
-            .toggleClass('button--tertiary', state === DISPLAY_STATE.displayed)
-            .toggleClass(BUTTON_SPINNER_CLASS, state === DISPLAY_STATE.loading);
-        this.$container
-            .toggleClass(HIDDEN_CLASS_NAME, state !== DISPLAY_STATE.displayed)
-            .toggleClass(VISIBLE_CLASS_NAME, state === DISPLAY_STATE.displayed);
-        this.state = state;
-    }
-
-    loadShowMoreForContainer(): void {
-        fastdom.mutate(() => {
-            this.setState(DISPLAY_STATE.loading);
-        });
-
-        loadShowMore(config.get('page.pageId'), this.id)
-            .then(response => {
-                let dedupedShowMore;
-                const html = response.html.trim();
-
-                if (html) {
-                    dedupedShowMore = dedupShowMore(this.$container, html);
-                }
-
-                fastdom.mutate(() => {
-                    if (dedupedShowMore) {
-                        this.$placeholder.replaceWith(dedupedShowMore);
-                    }
-                    this.setState(DISPLAY_STATE.displayed);
-                    updateDisplayPrefForContainer(this.id, this.state);
-                    mediator.emit('modules:show-more:loaded');
-                });
-                this.isLoaded = true;
-            })
-            .catch(err => {
-                fastdom.mutate(() => {
-                    this.setState(DISPLAY_STATE.hidden);
-                });
-
-                this.showErrorMessage();
-                reportError(
-                    err,
-                    {
-                        feature: 'container-show-more',
-                    },
-                    false
-                );
-            });
-    }
-
-    hideErrorMessage(): void {
-        fastdom.mutate(() => {
-            if (this.$errorMessage != null) {
-                this.$errorMessage.addClass(
-                    'show-more__error-message--invisible'
-                );
-            }
-        });
-    }
-
-    showErrorMessage(): void {
-        if (this.$errorMessage) {
-            this.$errorMessage.remove();
-        }
-
-        this.$errorMessage = bonzo(
-            bonzo.create(
-                '<div class="show-more__error-message">' +
-                    'Sorry, failed to load more stories. Please try again.' +
-                    '</div>'
-            )
-        );
-
-        fastdom.mutate(() => {
-            if (this.$errorMessage != null) {
-                this.$errorMessage.insertAfter(this.$el);
-
-                setTimeout(() => {
-                    this.hideErrorMessage();
-                }, 5000);
-            }
-        });
-    }
-}
-
-const showMore = (button: Button): void => {
-    fastdom.mutate(() => {
-        /**
-         * Do not remove: it should retain context for the click stream module, which recurses upwards through
-         * DOM nodes.
-         */
-        button.setState(
-            button.state === DISPLAY_STATE.hidden
-                ? DISPLAY_STATE.displayed
-                : DISPLAY_STATE.hidden
-        );
-        updateDisplayPrefForContainer(button.id, button.state);
-    });
-};
-
-const renderToDom = (button: Button): void => {
-    fastdom.mutate(() => {
-        button.$container
-            .addClass(HIDDEN_CLASS_NAME)
-            .removeClass('js-container--fc-show-more')
-            .toggleClass(
-                HIDDEN_CLASS_NAME,
-                button.state === DISPLAY_STATE.hidden
-            );
-        // Initialise state, as it might be different from what was rendered server side based on localstorage prefs
-        button.setState(button.state);
-    });
-};
-
-export const init = (): void => {
-    fastdom.measure(() => {
-        const containers = qwery('.js-container--fc-show-more').map(bonzo);
-        const buttons = containers
-            .map(container => {
-                const el = $('.js-show-more-button', container);
-                return el ? new Button(el, container) : null;
-            })
-            .filter(button => button != null);
-
-        buttons.forEach(renderToDom);
-
-        mediator.on('module:clickstream:click', clickSpec => {
-            const clickedButton = buttons.find(
-                button => button.$el[0] === clickSpec.target
-            );
-            if (
-                clickedButton &&
-                clickedButton.state !== DISPLAY_STATE.loading
-            ) {
-                if (clickedButton.isLoaded) {
-                    showMore(clickedButton);
-                } else {
-                    if (clickedButton.$errorMessage) {
-                        clickedButton.$errorMessage.hide();
-                    }
-                    clickedButton.loadShowMoreForContainer();
-                }
-            }
-        });
-    });
-};
-
-export const _ = { itemsByArticleId, dedupShowMore };
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-show-more.spec.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-show-more.spec.js
deleted file mode 100644
index d75fd4836bb..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-show-more.spec.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/container-show-more.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bonzo from 'bonzo';
-import qwery from 'qwery';
-
-import { _ } from 'facia/modules/ui/container-show-more';
-
-jest.mock('lib/raven');
-
-const { itemsByArticleId, dedupShowMore } = _;
-
-describe('Container Show More', () => {
-    let $container;
-
-    const itemWithId = id => `<div class="js-fc-item" data-id="${id}"></div>`;
-
-    beforeEach(() => {
-        $container = bonzo(
-            bonzo.create(
-                `<div>${itemWithId('loldongs')}${itemWithId(
-                    'corgi'
-                )}${itemWithId('geekpie')}</div>`
-            )
-        );
-    });
-
-    afterEach(() => {
-        $container.remove();
-    });
-
-    it('should be able to group elements by id', () => {
-        const grouped = itemsByArticleId($container);
-        expect(
-            Object.keys(grouped).filter(i =>
-                new Set(['loldongs', 'corgi', 'geekpie']).has(i)
-            ).length === 3
-        ).toBeTruthy();
-    });
-
-    it('should de-duplicate items loaded in', () => {
-        const $after = dedupShowMore(
-            $container,
-            `<div>${itemWithId('corgi')}${itemWithId('daschund')}</div>`
-        );
-
-        expect(qwery('.js-fc-item', $after).length === 1).toBeTruthy();
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-toggle.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-toggle.js
deleted file mode 100644
index c9d00b6403f..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-toggle.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/container-toggle.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import mediator from 'lib/mediator';
-import userPrefs from 'common/modules/user-prefs';
-
-type ToggleState = 'hidden' | 'displayed';
-
-const prefName = 'container-states';
-const toggleText = {
-    hidden: 'Show',
-    displayed: 'Hide',
-};
-
-const btnTmpl = ({ text, dataLink }) => `
-    <button class="fc-container__toggle" data-link-name="${dataLink}">
-        <span class="fc-container__toggle__text">${text}</span>
-    </button>
-`;
-
-export class ContainerToggle {
-    $container: bonzo;
-    state: ToggleState;
-    $button: bonzo;
-    constructor(container: Element) {
-        this.$container = bonzo(container);
-        this.$button = bonzo(
-            bonzo.create(
-                btnTmpl({
-                    text: 'Hide',
-                    dataLink: 'Show',
-                })
-            )
-        );
-        this.state = 'displayed';
-    }
-
-    buttonText(): bonzo {
-        return $('.fc-container__toggle__text', this.$button);
-    }
-
-    updatePref(id: string): void {
-        // update user prefs
-        let prefs = userPrefs.get(prefName);
-        const prefValue = id;
-
-        if (this.state === 'displayed') {
-            delete prefs[prefValue];
-        } else {
-            if (!prefs) {
-                prefs = {};
-            }
-            prefs[prefValue] = 'closed';
-        }
-        userPrefs.set(prefName, prefs);
-    }
-
-    setState(newState: ToggleState): void {
-        this.state = newState;
-
-        fastdom.mutate(() => {
-            // add/remove rolled class
-            this.$container[
-                this.state === 'displayed' ? 'removeClass' : 'addClass'
-            ]('fc-container--rolled-up');
-            // data-link-name is inverted, as happens before clickstream
-            this.$button.attr(
-                'data-link-name',
-                toggleText[this.state === 'displayed' ? 'hidden' : 'displayed']
-            );
-            this.buttonText().text(toggleText[this.state]);
-        });
-    }
-
-    readPrefs(id: string): void {
-        // update user prefs
-        const prefs = userPrefs.get(prefName);
-        if (prefs && prefs[id]) {
-            this.setState('hidden');
-        }
-    }
-
-    addToggle(): void {
-        // append toggle button
-        const id = this.$container.attr('data-id');
-        const $containerHeader = $('.js-container__header', this.$container[0]);
-
-        fastdom.mutate(() => {
-            $containerHeader.append(this.$button);
-            this.$container
-                .removeClass('js-container--toggle')
-                .removeClass('fc-container--will-have-toggle')
-                .addClass('fc-container--has-toggle');
-
-            this.readPrefs(id);
-        });
-
-        mediator.on('module:clickstream:click', clickSpec => {
-            if (clickSpec.target === this.$button[0]) {
-                this.setState(
-                    this.state === 'displayed' ? 'hidden' : 'displayed'
-                );
-                this.updatePref(id);
-            }
-        });
-    }
-}
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-toggle.spec.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-toggle.spec.js
deleted file mode 100644
index c08c399b11d..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/container-toggle.spec.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/container-toggle.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-import $ from 'lib/$';
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import mediator from 'lib/mediator';
-import userPrefs from 'common/modules/user-prefs';
-import { ContainerToggle } from 'facia/modules/ui/container-toggle';
-
-describe('Container Toggle', () => {
-    let container;
-    let $container;
-    const containerId = 'uk/culture/regular-stories';
-    const storageId = 'container-states';
-    // helper assertion method
-    const assertState = ($cont, state) => {
-        const $button = $('button', $cont[0]);
-
-        expect($cont.hasClass('fc-container--rolled-up'))[
-            state === 'open' ? 'toBeFalsy' : 'toBeTruthy'
-        ]();
-        expect($button.text().trim()).toBe(state === 'open' ? 'Hide' : 'Show');
-        expect($button.attr('data-link-name')).toBe(
-            state === 'open' ? 'Show' : 'Hide'
-        );
-    };
-
-    const simulateClick = () => {
-        mediator.emit('module:clickstream:click', {
-            target: $('button', container)[0],
-        });
-    };
-
-    beforeEach(() => {
-        container = bonzo.create(
-            `<section class="fc-container js-container--toggle fc-container__will-have-toggle" data-id="${containerId}">` +
-                `<div class="fc-container__header js-container__header">` +
-                `<h2>A container</h2>` +
-                `</div>` +
-                `</section>`
-        );
-        $container = bonzo(container[0]);
-    });
-
-    afterEach(() => {
-        $container.remove();
-        userPrefs.remove('container-states');
-    });
-
-    it('should be able to initialise', () => {
-        const containerDisplayToggle = new ContainerToggle(container);
-        expect(containerDisplayToggle).toBeDefined();
-    });
-
-    it('should remove "js-container--toggle" class from container', done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            expect($container.hasClass('js-container--toggle')).toBeFalsy();
-            done();
-        });
-    });
-
-    it('should remove "fc-container--will-have-toggle" class from container', done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            expect(
-                $container.hasClass('fc-container--will-have-toggle')
-            ).toBeFalsy();
-            done();
-        });
-    });
-
-    it('should add "container--has-toggle" class to container', done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            expect(
-                $container.hasClass('fc-container--has-toggle')
-            ).toBeTruthy();
-            done();
-        });
-    });
-
-    it("should add button to the container's header", done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            expect(
-                $('.js-container__header .fc-container__toggle', container)
-                    .length
-            ).toBe(1);
-            done();
-        });
-    });
-
-    it('initial state should be open', done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            assertState($container, 'open');
-            done();
-        });
-    });
-
-    it('should be able to close container', done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            simulateClick();
-
-            fastdom.mutate(() => {
-                assertState($container, 'closed');
-                done();
-            });
-        });
-    });
-
-    it('should store state as user preference', done => {
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        // click button
-        fastdom.mutate(() => {
-            simulateClick();
-
-            const expectedValue = {};
-            expectedValue[containerId] = 'closed';
-
-            fastdom.mutate(() => {
-                expect(userPrefs.get(storageId)).toEqual(expectedValue);
-
-                // now close container
-                simulateClick();
-
-                fastdom.mutate(() => {
-                    expect(userPrefs.get(storageId)).toEqual({});
-
-                    done();
-                });
-            });
-        });
-    });
-
-    it('initial state should be based on user preference', done => {
-        const prefs = {};
-        prefs[containerId] = 'closed';
-        userPrefs.set(storageId, prefs);
-        const toggle = new ContainerToggle(container);
-        toggle.addToggle();
-
-        fastdom.mutate(() => {
-            assertState($container, 'closed');
-            done();
-        });
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/football-snaps.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/football-snaps.js
deleted file mode 100644
index 4ed61e1566f..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/football-snaps.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/football-snaps.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import { getBreakpoint } from 'lib/detect';
-
-/**
- * All the football snaps sitting in a "big" slice (if any) will take the height of their trail trails
- */
-export const resizeForFootballSnaps = (el: bonzo): void => {
-    if (el && getBreakpoint() !== 'mobile') {
-        const $el = bonzo(el);
-        $el.css('height', $el.parent().css('height'));
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/lazy-load-containers.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/lazy-load-containers.js
deleted file mode 100644
index 20be65df2aa..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/lazy-load-containers.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/lazy-load-containers.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'fastdom';
-import qwery from 'qwery';
-import { getViewport } from 'lib/detect';
-import mediator from 'lib/mediator';
-import throttle from 'lodash/throttle';
-
-const distanceBeforeLoad = getViewport().height;
-
-// Checks whether the element is within one screenful above or below the viewport
-const withinRange = (container: Element): boolean => {
-    const nextEl = container.nextElementSibling;
-    const top = nextEl ? nextEl.getBoundingClientRect().top : 0;
-    return -distanceBeforeLoad < top && top < 2 * distanceBeforeLoad;
-};
-
-// Removes the fc-container--lazy-load class
-const displayContainer = (container: Element): void => {
-    container.classList.remove('fc-container--lazy-load');
-};
-
-export const lazyLoadContainers = (): void => {
-    let containers = qwery('.js-container--lazy-load');
-    const lazyLoad = throttle(() => {
-        if (containers.length === 0) {
-            mediator.off('window:throttledScroll', lazyLoad);
-        } else {
-            fastdom.measure(() => {
-                const containersInRange = containers.reduce(
-                    (result, container) => {
-                        result[withinRange(container) ? 'in' : 'out'].push(
-                            container
-                        );
-                        return result;
-                    },
-                    {
-                        in: [],
-                        out: [],
-                    }
-                );
-
-                containers = containersInRange.out;
-
-                fastdom.mutate(() => {
-                    containersInRange.in.forEach(displayContainer);
-                });
-            });
-        }
-    }, 500);
-
-    mediator.on('window:throttledScroll', lazyLoad);
-    lazyLoad();
-};
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/live-blog-updates.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/live-blog-updates.js
deleted file mode 100644
index fcf5cab530f..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/live-blog-updates.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/live-blog-updates.js
- * to .ts, then delete it.
- */
-
-// @flow
-import bonzo from 'bonzo';
-import { makeRelativeDate } from 'common/modules/ui/relativedates';
-import $ from 'lib/$';
-import { getViewport } from 'lib/detect';
-import fastdomPromise from 'lib/fastdom-promise';
-import fetchJson from 'lib/fetch-json';
-import mediator from 'lib/mediator';
-import { storage } from '@guardian/libs';
-import template from 'lodash/template';
-import isUndefined from 'lodash/isUndefined';
-import debounce from 'lodash/debounce';
-import blockTemplate from 'raw-loader!facia/views/liveblog-block.html';
-
-const animateDelayMs = 2000;
-const animateAfterScrollDelayMs = 500;
-const newUpdateTransitionDelayMs = 150;
-let refreshSecs = 30;
-const refreshDecay = 1;
-let refreshMaxTimes = 5;
-const selector = '.js-liveblog-blocks';
-const dynamicClass = 'js-liveblog-blocks-dynamic';
-const articleIdAttribute = 'data-article-id';
-const sessionStorageKey = 'gu.liveblog.block-dates';
-const viewportHeightPx = getViewport().height;
-const maxBlockCount = 3;
-
-type Block = {
-    id: string,
-    title: string,
-    publishedDateTime: number,
-    lastUpdatedDateTime: number,
-    body: string,
-    isNew: boolean, // This is not pulled in from the response, but mutated in this module
-};
-
-const blockRelativeTime = (block: Block): string => {
-    const pubDate = (block || {}).publishedDateTime;
-    const relDate = pubDate ? makeRelativeDate(new Date(pubDate)) : false;
-    return relDate || '';
-};
-
-const renderBlock = (
-    articleId: string,
-    block: Block,
-    index: number
-): string => {
-    let relTime = blockRelativeTime(block);
-
-    if (relTime.match(/yesterday/i)) {
-        relTime = relTime.toLowerCase();
-    } else if (relTime) {
-        relTime = `<span class="block-time-prefix">Latest update </span>${relTime} ago`;
-    } else {
-        relTime = '<span class="block-time-prefix">Updated </span>just now';
-    }
-
-    return template(blockTemplate)({
-        ariaHidden: !block.isNew,
-        href: `/${articleId}#block-${block.id}`,
-        relativeTime: relTime,
-        text: [block.title, block.body.slice(0, 500)]
-            .filter(x => x != null)
-            .join('. '),
-        index: index + 1,
-    });
-};
-
-const timeoutPromise = (delay: number): Promise<void> =>
-    new Promise(resolve => setTimeout(resolve, delay));
-
-const maybeAnimateBlocks = (
-    el: Element,
-    container: Element,
-    immediate?: boolean
-): Promise<boolean> =>
-    fastdomPromise
-        .measure(() => el.getBoundingClientRect().top)
-        .then(vPosition => {
-            const isVisible = vPosition > 0 && vPosition < viewportHeightPx;
-
-            if (isVisible) {
-                timeoutPromise(immediate ? 0 : animateDelayMs).then(() =>
-                    fastdomPromise.mutate(() =>
-                        el.classList.remove(
-                            'fc-item__liveblog-blocks__inner--offset'
-                        )
-                    )
-                );
-
-                return true;
-            }
-            return false;
-        });
-
-const animateBlocks = (el: Element, container: Element): void => {
-    maybeAnimateBlocks(el, container).then(didAnimate => {
-        if (!didAnimate) {
-            const animateOnScroll = debounce(() => {
-                maybeAnimateBlocks(el, container, true).then(
-                    didAnimateOnScroll => {
-                        if (didAnimateOnScroll) {
-                            mediator.off(
-                                'window:throttledScroll',
-                                animateOnScroll
-                            );
-                        }
-                    }
-                );
-            }, animateAfterScrollDelayMs);
-
-            mediator.on('window:throttledScroll', animateOnScroll);
-        }
-    });
-
-    fastdomPromise.mutate(() => {
-        container.classList.remove('fc-item__liveblog-blocks--hidden');
-        container.classList.add('fc-item__liveblog-blocks--visible');
-    });
-};
-
-const applyUpdate = (
-    container: Element,
-    content: Array<Element>
-): Promise<void> =>
-    fastdomPromise.mutate(() => {
-        bonzo(container)
-            .empty()
-            .append(content);
-    });
-
-const startUpdate = (
-    container: Element,
-    content: Array<Element>,
-    shouldTransitionOut: boolean
-): Promise<void> => {
-    if (shouldTransitionOut) {
-        container.classList.remove('fc-item__liveblog-blocks--visible');
-        container.classList.add('fc-item__liveblog-blocks--hidden');
-
-        // Use a timeout here so we don't update the DOM until the transition
-        // has completed. There's a relationship here between
-        // newUpdateTransitionDelayMs and the transition timings in
-        // story-package-garnett.scss.
-        return timeoutPromise(newUpdateTransitionDelayMs).then(() =>
-            applyUpdate(container, content)
-        );
-    }
-
-    return applyUpdate(container, content);
-};
-
-const completeUpdate = (
-    container: Element,
-    content: Array<Element>,
-    shouldTransitionIn: boolean
-): void => {
-    if (shouldTransitionIn) {
-        animateBlocks(content[0], container);
-    }
-};
-
-const isDynamic = (element: Element): boolean =>
-    element.classList.contains(dynamicClass);
-
-const calculateBlockCount = (
-    hasNewBlock: boolean,
-    isInDynamicContainer: boolean
-): number => {
-    if (isInDynamicContainer) {
-        return maxBlockCount;
-    } else if (hasNewBlock) {
-        return 2;
-    }
-    return 1;
-};
-
-const showBlocks = (
-    articleId: string,
-    targets: Array<Element>,
-    blocks: Array<Block>,
-    oldBlockDate: number
-): void => {
-    const fakeUpdate = isUndefined(oldBlockDate);
-
-    targets.forEach(element => {
-        let hasNewBlock = false;
-
-        const wrapperClasses = [
-            'fc-item__liveblog-blocks__inner',
-            'u-faux-block-link__promote',
-        ];
-
-        const blocksHtml = blocks
-            .slice(0, maxBlockCount)
-            .map((block, index) => {
-                if (
-                    !hasNewBlock &&
-                    (block.publishedDateTime > oldBlockDate || fakeUpdate)
-                ) {
-                    block.isNew = true;
-                    hasNewBlock = true;
-                    wrapperClasses.push(
-                        'fc-item__liveblog-blocks__inner--offset'
-                    );
-                }
-
-                return renderBlock(articleId, block, index);
-            })
-            .slice(0, calculateBlockCount(hasNewBlock, isDynamic(element)));
-
-        const el = bonzo.create(
-            `<div class="${wrapperClasses.join(' ')}">${blocksHtml.join(
-                ''
-            )}</div>`
-        );
-
-        startUpdate(element, el, hasNewBlock).then(() =>
-            completeUpdate(element, el, hasNewBlock)
-        );
-    });
-};
-
-const sanitizeBlocks = (blocks: Array<Block>): Array<Block> =>
-    blocks.filter(
-        block =>
-            block.id &&
-            block.publishedDateTime &&
-            block.body &&
-            block.body.length >= 10
-    );
-
-const showUpdatesFromLiveBlog = (): Promise<void> =>
-    fastdomPromise
-        .measure(() => {
-            const elementsById: Map<string, Array<Element>> = new Map();
-
-            // For each liveblock block
-            $(selector).each(element => {
-                const articleId = element.getAttribute(articleIdAttribute);
-
-                if (articleId) {
-                    const elementsForArticle =
-                        elementsById.get(articleId) || [];
-                    elementsForArticle.push(element);
-                    elementsById.set(articleId, elementsForArticle);
-                }
-            });
-            return elementsById;
-        })
-        .then(elementsById => {
-            let oldBlockDates;
-
-            if (elementsById.size) {
-                oldBlockDates = storage.session.get(sessionStorageKey) || {};
-
-                elementsById.forEach((elements, articleId) => {
-                    fetchJson(`/${articleId}.json?rendered=false`, {
-                        mode: 'cors',
-                    })
-                        .then(response => {
-                            const blocks =
-                                response && sanitizeBlocks(response.blocks);
-
-                            if (blocks && blocks.length) {
-                                showBlocks(
-                                    articleId,
-                                    elements,
-                                    blocks,
-                                    oldBlockDates[articleId]
-                                );
-                                oldBlockDates[articleId] =
-                                    blocks[0].publishedDateTime;
-                                storage.session.set(sessionStorageKey, oldBlockDates);
-                            }
-                        })
-                        .catch(() => {});
-                });
-
-                if (refreshMaxTimes) {
-                    refreshMaxTimes -= 1;
-                    setTimeout(() => {
-                        showUpdatesFromLiveBlog();
-                    }, refreshSecs * 1000);
-                    refreshSecs *= refreshDecay;
-                }
-            }
-        });
-
-export { showUpdatesFromLiveBlog };
diff --git a/static/src/javascripts.flow.archive/projects/facia/modules/ui/snaps.js b/static/src/javascripts.flow.archive/projects/facia/modules/ui/snaps.js
deleted file mode 100644
index 4c6d788279a..00000000000
--- a/static/src/javascripts.flow.archive/projects/facia/modules/ui/snaps.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/facia/modules/ui/snaps.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import bean from 'bean';
-import bonzo from 'bonzo';
-import fastdom from 'fastdom';
-import $ from 'lib/$';
-import { isIOS } from 'lib/detect';
-import fetch from 'lib/fetch';
-import mediator from 'lib/mediator';
-import { addProximityLoader } from 'lib/proximity-loader';
-import reportError from 'lib/report-error';
-import { init as initRelativeDates } from 'common/modules/ui/relativedates';
-import { resizeForFootballSnaps } from 'facia/modules/ui/football-snaps';
-import once from 'lodash/once';
-
-const clientProcessedTypes = ['document', 'fragment', 'json.html'];
-const snapIframes = [];
-const bindIframeMsgReceiverOnce = once(() => {
-    bean.on(window, 'message', event => {
-        const iframe = snapIframes.find(
-            snapIframe => snapIframe.contentWindow === event.source
-        );
-
-        let message;
-        if (iframe) {
-            message = JSON.parse(event.data);
-
-            if (message.type === 'set-height') {
-                bonzo(iframe)
-                    .parent()
-                    .css('height', message.value);
-            }
-        }
-    });
-});
-
-const setSnapPoint = (el: HTMLElement, isResize: boolean): void => {
-    let width;
-    const $el = bonzo(el);
-    const prefix = 'facia-snap-point--';
-    const breakpoints: Array<{
-        width: number,
-        name: string,
-        action?: string | boolean,
-    }> = [
-        {
-            width: 0,
-            name: 'tiny',
-        },
-        {
-            width: 180,
-            name: 'mini',
-        },
-        {
-            width: 220,
-            name: 'small',
-        },
-        {
-            width: 300,
-            name: 'medium',
-        },
-        {
-            width: 700,
-            name: 'large',
-        },
-        {
-            width: 940,
-            name: 'huge',
-        },
-    ];
-
-    fastdom.measure(() => {
-        width = el.offsetWidth;
-    });
-
-    fastdom.mutate(() => {
-        breakpoints
-            .map((breakpoint, i, arr) => {
-                const isAdd =
-                    width >= breakpoint.width &&
-                    (arr[i + 1] ? width < arr[i + 1].width : true);
-
-                if (isAdd) {
-                    breakpoint.action = 'addClass';
-                } else if (isResize) {
-                    breakpoint.action = 'removeClass';
-                } else {
-                    breakpoint.action = false;
-                }
-
-                return breakpoint;
-            })
-            .filter(breakpoint => breakpoint.action)
-            .forEach(breakpoint => {
-                $el[breakpoint.action](prefix + breakpoint.name);
-            });
-    });
-};
-
-const addCss = (el: HTMLElement, isResize: boolean = false): void => {
-    setSnapPoint(el, isResize);
-    if ($(el).hasClass('facia-snap--football')) {
-        resizeForFootballSnaps(el);
-    }
-};
-
-const injectIframe = (el: HTMLElement): void => {
-    const spec = bonzo(el).offset();
-    const minIframeHeight = Math.ceil((spec.width || 0) / 2);
-    const maxIframeHeight = 400;
-    const src = el.getAttribute('data-snap-uri') || '';
-    const height = Math.min(
-        Math.max(spec.height || 0, minIframeHeight),
-        maxIframeHeight
-    );
-    const containerEl = bonzo.create(
-        `<div style="width: 100%; height: ${height}px; overflow: hidden; -webkit-overflow-scrolling:touch"></div>`
-    )[0];
-    const iframe = bonzo.create(
-        `<iframe src="${src}" style="width: 100%; height: 100%; border: none;"></iframe>`
-    )[0];
-
-    bonzo(containerEl).append(iframe);
-    snapIframes.push(iframe);
-    bindIframeMsgReceiverOnce();
-
-    fastdom.mutate(() => {
-        bonzo(el)
-            .empty()
-            .append(containerEl);
-    });
-};
-
-const fetchFragment = (el: HTMLElement, asJson: boolean = false): void => {
-    const url = el.getAttribute('data-snap-uri');
-
-    if (!url) {
-        return;
-    }
-
-    fetch(url, {
-        mode: 'cors',
-    })
-        .then(resp => {
-            if (resp.ok) {
-                return asJson
-                    ? resp.json().then(json => json.html)
-                    : resp.text();
-            }
-            return Promise.reject(new Error(`Fetch error: ${resp.statusText}`));
-        })
-        .then(resp => {
-            $.create(resp).each(html => {
-                fastdom.mutate(() => {
-                    bonzo(el).html(html);
-                });
-            });
-            initRelativeDates(el);
-        })
-        .catch(ex => {
-            reportError(ex, {
-                feature: 'snaps',
-            });
-        });
-};
-
-const initStandardSnap = (el: HTMLElement): void => {
-    addProximityLoader(el, 1500, () => {
-        fastdom.mutate(() => {
-            bonzo(el).addClass('facia-snap-embed');
-        });
-        addCss(el);
-
-        switch (el.getAttribute('data-snap-type')) {
-            case 'document':
-                injectIframe(el);
-                break;
-
-            case 'fragment':
-                fetchFragment(el);
-                break;
-
-            case 'json.html':
-                fetchFragment(el, true);
-                break;
-
-            default:
-                break;
-        }
-
-        if (!isIOS) {
-            mediator.on('window:throttledResize', () => {
-                addCss(el, true);
-            });
-        }
-    });
-};
-
-const initInlinedSnap = (el: HTMLElement): void => {
-    addCss(el);
-    if (!isIOS) {
-        mediator.on('window:throttledResize', () => {
-            addCss(el, true);
-        });
-    }
-};
-
-const init = (): void => {
-    // First, init any existing inlined embeds already on the page.
-    const inlinedSnaps = Array.from(
-        document.querySelectorAll('.facia-snap-embed')
-    );
-    inlinedSnaps.forEach(initInlinedSnap);
-
-    // Second, init non-inlined embeds.
-    const snaps = Array.from(document.querySelectorAll('.js-snappable.js-snap'))
-        .filter(el => {
-            const isInlinedSnap = $(el).hasClass('facia-snap-embed');
-            const snapType = el.getAttribute('data-snap-type');
-
-            return (
-                !isInlinedSnap &&
-                snapType &&
-                clientProcessedTypes.indexOf(snapType) > -1
-            );
-        })
-        .filter(el => el.getAttribute('data-snap-uri'));
-
-    snaps.forEach(initStandardSnap);
-};
-
-export { init };
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/audio-series-add-contributions.js b/static/src/javascripts.flow.archive/projects/journalism/modules/audio-series-add-contributions.js
deleted file mode 100644
index 3fa030662e9..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/audio-series-add-contributions.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/audio-series-add-contributions.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import fastdom from 'lib/fastdom-promise';
-import template from 'lodash/template';
-import audioContribBanner from 'raw-loader!journalism/views/audioSeriesContributions.html';
-import { supportContributeURL } from 'common/modules/commercial/support-utilities';
-
-const renderContributionsBanner = el => {
-    const banner = template(audioContribBanner)({
-        supportContributeURL: supportContributeURL(),
-    });
-
-    fastdom.mutate(() => {
-        el.insertAdjacentHTML('afterend', banner);
-    });
-};
-
-export const addContributionsBanner = () => {
-    const allEpisodes = document.querySelectorAll('section.fc-container--tag');
-
-    if (allEpisodes.length >= 5) {
-        renderContributionsBanner(allEpisodes[4]);
-    }
-};
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/get-campaign.js b/static/src/javascripts.flow.archive/projects/journalism/modules/get-campaign.js
deleted file mode 100644
index 65ee6aac6c8..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/get-campaign.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/get-campaign.js
- * to .ts, then delete it.
- */
-
-// @flow
-import config from 'lib/config';
-
-export const getCampaigns = () => {
-    // eslint-disable-next-line
-    const isCallout = campaign => campaign.fields._type === 'callout';
-    const allCampaigns = config.get('page.campaigns');
-    const allCallouts = allCampaigns.filter(isCallout);
-
-    return allCallouts.reduce((acc, curr) => {
-        acc[curr.fields.tagName] = {
-            name: curr.name,
-            title: curr.fields.callout,
-            description: curr.fields.description || '',
-            formFields: curr.fields.formFields,
-            formId: curr.fields.formId,
-            tagName: curr.fields.tagName,
-        };
-        return acc;
-    }, {});
-};
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/get-campaign.spec.js b/static/src/javascripts.flow.archive/projects/journalism/modules/get-campaign.spec.js
deleted file mode 100644
index 4a331d8f926..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/get-campaign.spec.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/get-campaign.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { getCampaigns } from 'journalism/modules/get-campaign';
-import config from 'lib/config';
-
-jest.mock('lib/config');
-
-const twoCampaigns = [
-    {
-        id: '3021acc9-97d9-40e0-869c-e23a2a8c530d',
-        name: 'Callout 1',
-        rules: [],
-        priority: 0,
-        activeFrom: 1520985600000,
-        displayOnSensitive: false,
-        fields: {
-            callout: 'Has this happened to you?',
-            formId: 2994970,
-            description: 'Tell us your story and upload a file',
-            formFields: [],
-            _type: 'callout',
-            tagName: 'callout-1',
-        },
-    },
-    {
-        id: '6affc37c-e532-4ffe-a2d7-044a79f518ee',
-        name: 'Epic Always Ask strategy',
-        rules: [],
-        priority: 0,
-        activeFrom: 1481068800000,
-        displayOnSensitive: false,
-        fields: {
-            campaignId: 'epic_always_ask_strategy',
-            _type: 'epic',
-        },
-    },
-    {
-        id: '31b0ff60-04a5-4d45-ad76-bc9791cb78ab',
-        name: 'Exciting callout number 3',
-        rules: [],
-        priority: 0,
-        displayOnSensitive: false,
-        fields: {
-            callout: 'Do you have a supermarket near you?',
-            formId: 3028078,
-            description: 'How far away is it?',
-            formFields: [],
-            _type: 'callout',
-            tagName: 'exciting-callout-tagname',
-        },
-    },
-];
-
-const oneCampaign = [
-    {
-        id: '6affc37c-e532-4ffe-a2d7-044a79f518ee',
-        name: 'Epic Always Ask strategy',
-        rules: [],
-        priority: 0,
-        activeFrom: 1481068800000,
-        displayOnSensitive: false,
-        fields: {
-            campaignId: 'epic_always_ask_strategy',
-            _type: 'epic',
-        },
-    },
-    {
-        id: '31b0ff60-04a5-4d45-ad76-bc9791cb78ab',
-        name: 'Exciting callout number 3',
-        rules: [],
-        priority: 0,
-        displayOnSensitive: false,
-        fields: {
-            callout: 'Do you have a supermarket near you?',
-            formId: 3028078,
-            description: 'How far away is it?',
-            formFields: [],
-            _type: 'callout',
-            tagName: 'exciting-callout-tagname',
-        },
-    },
-];
-
-describe('Finding the callouts to display ', () => {
-    beforeEach(() => {
-        config.page = {
-            campaigns: oneCampaign,
-        };
-    });
-
-    afterEach(() => {
-        delete config.page;
-    });
-
-    it('it shows a callout campaign if there is one present', () => {
-        const callout1 = {
-            'exciting-callout-tagname': {
-                name: 'Exciting callout number 3',
-                title: 'Do you have a supermarket near you?',
-                description: 'How far away is it?',
-                formFields: [],
-                formId: 3028078,
-                tagName: 'exciting-callout-tagname',
-            },
-        };
-
-        expect(getCampaigns()).toEqual(callout1);
-    });
-
-    // change this when new targeting rules come in
-    it('if there are two or more callouts, all of them are returned', () => {
-        config.page.campaigns = twoCampaigns;
-        const callout2 = {
-            'callout-1': {
-                description: 'Tell us your story and upload a file',
-                formFields: [],
-                formId: 2994970,
-                name: 'Callout 1',
-                tagName: 'callout-1',
-                title: 'Has this happened to you?',
-            },
-            'exciting-callout-tagname': {
-                name: 'Exciting callout number 3',
-                title: 'Do you have a supermarket near you?',
-                description: 'How far away is it?',
-                formFields: [],
-                formId: 3028078,
-                tagName: 'exciting-callout-tagname',
-            },
-        };
-        expect(getCampaigns()).toEqual(callout2);
-    });
-
-    it('if there are no callout campaigns, nothing is shown', () => {
-        config.page.campaigns = [];
-        expect(getCampaigns()).toEqual({});
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/render-campaign.js b/static/src/javascripts.flow.archive/projects/journalism/modules/render-campaign.js
deleted file mode 100644
index 7013758c3ef..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/render-campaign.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/render-campaign.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import template from 'lodash/template';
-import campaignForm from 'raw-loader!journalism/views/campaignForm.html';
-import { getCampaigns } from 'journalism/modules/get-campaign';
-import { submitForm } from 'journalism/modules/submit-form';
-
-const renderCampaign = (calloutNode: HTMLElement, calloutData): void => {
-    const campaign = template(campaignForm)({ data: calloutData });
-    const campaignDiv = `<figure class="element element-campaign">${campaign}</figure>`;
-
-    fastdom
-        .mutate(() => {
-            calloutNode.innerHTML = campaignDiv;
-        })
-        .then(() => {
-            const cForm = calloutNode.querySelector(
-                '.element-campaign .campaign .campaign--snippet__body'
-            );
-            if (cForm) {
-                cForm.addEventListener('submit', submitForm);
-            }
-        });
-};
-
-const getCalloutContainers = () => {
-    // callout container is a figure with data-alt property in the format: 'Callout callout-tag-name' eg. 'Callout new-campaign-with-a-callout'
-    const allEmbeds = document.querySelectorAll('figure[data-alt]');
-
-    return Array.from(allEmbeds).filter(el => {
-        const dataAlt = el.getAttribute('data-alt');
-        if (!dataAlt) return false;
-        return dataAlt.toLowerCase().startsWith('callout');
-    });
-};
-
-const clearEmptyCallout = calloutContainer => {
-    calloutContainer.innerHTML = '';
-};
-
-export const initCampaign = () => {
-    const calloutData = getCampaigns();
-    const calloutContainers = getCalloutContainers();
-
-    // put the data into the correct container by matching up tagName on the data with the tagName on the container
-    calloutContainers.forEach(container => {
-        const dataAlt = container.getAttribute('data-alt');
-        if (!dataAlt) return;
-        const tagName = dataAlt.toLowerCase().split(' ')[1];
-
-        if (tagName in calloutData) {
-            renderCampaign(container, calloutData[tagName]);
-        } else {
-            clearEmptyCallout(container);
-        }
-    });
-};
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/render-campaign.spec.js b/static/src/javascripts.flow.archive/projects/journalism/modules/render-campaign.spec.js
deleted file mode 100644
index 65b620ee115..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/render-campaign.spec.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/render-campaign.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { initCampaign } from 'journalism/modules/render-campaign';
-import { getCampaigns } from 'journalism/modules/get-campaign';
-
-// hack to stop flow complaining about 'mockImplementation'
-const mock = (mockFn: any) => mockFn;
-jest.mock('journalism/modules/get-campaign');
-mock(getCampaigns).mockImplementation(() => ({
-    'callout-hij': {
-        description: '<p>formatted <b>description</b></p>',
-        formFields: [],
-        formId: 2994970,
-        name: 'callout hij',
-        title: 'Callout HIJ',
-        tagName: 'callout-hij',
-    },
-    'callout-klm': {
-        description: '<p>new test<b>&nbsp;</b></p>',
-        formFields: [],
-        formId: 2994970,
-        name: 'callout klm',
-        title: 'Callout klm',
-        tagName: 'callout-klm',
-    },
-}));
-
-const articleBodyWithCalloutBoxes =
-    '<div class="content__article-body"><h1>title</h1><p>one</p><p>two</p><figure data-alt="Callout callout-hij"></figure><p>three</p><p>four</p><figure data-alt="Callout callout-klm"></figure></div>';
-const articleBody =
-    '<div className="content__article-body"><h1>title</h1><p>one</p><p>two</p><p>three</p><p>four</p></div>';
-const renderedCallout =
-    '<figure class="element element-campaign"><div></div></figure>';
-
-const setUpArticle = articleType => {
-    if (document.body) {
-        document.body.innerHTML = articleType;
-    }
-};
-
-const clearUpArticle = () => {
-    if (document.body) {
-        document.body.innerHTML = '';
-    }
-};
-
-describe('If a callout container and callout data are both present', () => {
-    beforeEach(() => setUpArticle(articleBodyWithCalloutBoxes));
-    afterEach(() => clearUpArticle());
-
-    // unfortunately the lodash template used in rendering can't be easily mocked so this basic comparision is all I can do
-    it('puts the callout in the right container', () => {
-        initCampaign();
-        expect(document.querySelectorAll('figure')[0].innerHTML).toEqual(
-            renderedCallout
-        );
-    });
-});
-
-describe('If there are no container boxes, no callout is added', () => {
-    beforeEach(() => setUpArticle(articleBody));
-    afterEach(() => clearUpArticle());
-
-    it('doesnt render a callout, even if the data is present', () => {
-        initCampaign();
-        expect(document.querySelectorAll('figure').length).toBe(0);
-    });
-});
-
-describe('If there is no data, no callout is added', () => {
-    beforeEach(() => {
-        setUpArticle(articleBodyWithCalloutBoxes);
-        mock(getCampaigns).mockImplementation(() => []);
-    });
-    afterEach(() => clearUpArticle());
-
-    it('doesnt render a callout, even if the container is present', () => {
-        initCampaign();
-        expect(document.querySelectorAll('figure')[0].innerHTML).toBe('');
-    });
-});
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/submit-form.js b/static/src/javascripts.flow.archive/projects/journalism/modules/submit-form.js
deleted file mode 100644
index 422907f10a4..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/submit-form.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/submit-form.js
- * to .ts, then delete it.
- */
-
-// @flow
-import fastdom from 'lib/fastdom-promise';
-import fetch from 'lib/fetch';
-import config from 'lib/config';
-
-const targetUrl = config.get('page.calloutsUrl');
-const isNamed = element => element.name > '';
-const isCheckbox = (element: HTMLInputElement) => element.type === 'checkbox';
-const isFile = (element: HTMLInputElement) => element.type === 'file';
-
-/* --------- DOM MANIPULATION ---------*/
-
-const enableButton = cForm => {
-    const button: HTMLButtonElement = cForm.getElementsByTagName('button')[0];
-    button.disabled = false;
-    button.textContent = 'Share with the Guardian';
-};
-
-const showConfirmation = cForm => {
-    const calloutWrapper = cForm.closest('.element-campaign');
-    fastdom.mutate(() => {
-        calloutWrapper.classList.add('success');
-    });
-};
-
-const showWaiting = cForm => {
-    const button = cForm.querySelector('button');
-    const errorField = cForm.querySelector('.error_box');
-    fastdom.mutate(() => {
-        button.textContent = 'Sending...';
-        button.disabled = true;
-        errorField.innerHTML = '';
-    });
-};
-
-const showError = (cForm: HTMLElement, msg: string) => {
-    const errorField = cForm.querySelector('.error_box');
-    if (errorField) {
-        fastdom.mutate(() => {
-            errorField.innerHTML = `<p class="error">${msg}</p>`;
-        });
-    }
-    enableButton(cForm);
-};
-
-/* ---------- DATA PARSING ------------*/
-
-const readFile = (file, cForm) =>
-    new Promise(res => {
-        const reader = new FileReader();
-        reader.addEventListener(
-            'load',
-            () => {
-                const fileAsBase64 = reader.result
-                    .toString()
-                    .split(';base64,')[1];
-                // remove data:*/*;base64, from the start of the base64 string
-                res(fileAsBase64);
-            },
-            false
-        );
-        reader.addEventListener('error', () => {
-            showError(
-                cForm,
-                'Sorry there was a problem with the file you uploaded above. Check the size and type. We only accept images, pdfs and .doc or .docx files'
-            );
-        });
-        reader.readAsDataURL(file);
-    });
-
-const getValueFromInput = (element, data) => {
-    if (isCheckbox(element)) {
-        return (data[element.name] || '').concat(`\n${element.value}`);
-    } else if (isFile(element) && element.files[0]) {
-        const cForm = element.closest('form');
-        return readFile(element.files[0], cForm);
-    }
-    return element.value;
-};
-
-export const formatData = (elements: any): Promise<any> =>
-    [].reduce.call(
-        elements,
-        async (promise, element) => {
-            const data = await promise;
-            if (isNamed(element)) {
-                const elementValue = await getValueFromInput(element, data);
-                data[element.name] = elementValue;
-                return data;
-            }
-            return data;
-        },
-        Promise.resolve({})
-    );
-
-export const submitForm = async (e: any) => {
-    e.preventDefault();
-    const cForm = e.target;
-    const data = await formatData(cForm.elements);
-
-    if (data['twitter-handle'].length > 0) {
-        showError(cForm, 'Sorry we think you are a robot.');
-        return false;
-    }
-
-    showWaiting(cForm);
-
-    return fetch(targetUrl, {
-        method: 'post',
-        body: JSON.stringify(data),
-        headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-        },
-    })
-        .then(res => {
-            if (res.ok) {
-                showConfirmation(cForm);
-            } else {
-                showError(
-                    cForm,
-                    'Sorry, there was a problem submitting your form. Please try again later.'
-                );
-            }
-        })
-        .catch(() => {
-            console.error(`Request to ${targetUrl} failed`);
-            showError(
-                cForm,
-                'Sorry, there was a problem submitting your form. Please try again later.'
-            );
-        });
-};
diff --git a/static/src/javascripts.flow.archive/projects/journalism/modules/submit-form.spec.js b/static/src/javascripts.flow.archive/projects/journalism/modules/submit-form.spec.js
deleted file mode 100644
index 9798cc09436..00000000000
--- a/static/src/javascripts.flow.archive/projects/journalism/modules/submit-form.spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * DO NOT EDIT THIS FILE
- *
- * It is not used to to build anything.
- *
- * It's just a record of the old flow types.
- *
- * Use it as a guide when converting
- * - static/src/javascripts/projects/journalism/modules/submit-form.spec.js
- * to .ts, then delete it.
- */
-
-// @flow
-
-import { formatData } from 'journalism/modules/submit-form';
-
-let mockFormEls: NodeList<*>;
-
-describe('Submitting a callout response to formstack', () => {
-    beforeEach(() => {
-        if (document.body) {
-            document.body.innerHTML =
-                '<form method="post" id="testform"> <input name="field1" type="text" value="hi"> <input name="field2" type="textarea" value="hello"> <input type="checkbox" value="Option1" name="field3" checked><input type="checkbox" value="Option2" name="field3" checked> <button type="submit">submit this</button> </form>';
-            mockFormEls = document.querySelectorAll('input');
-        }
-    });
-
-    afterEach(() => {
-        if (document.body) {
-            document.body.innerHTML = '';
-        }
-    });
-
-    it('takes the form data and turns it into a javascript object', () => {
-        const mockData = {
-            field1: 'hi',
-            field2: 'hello',
-            field3: '\nOption1\nOption2',
-        };
-        formatData(mockFormEls).then(res => {
-            expect(res).toEqual(mockData);
-        });
-    });
-});