From 4938c7fe46dc75a56f083044d2fc3733a6af9914 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 25 Apr 2023 14:07:59 +0800
Subject: [PATCH 01/11] chore: remove react migration vars

---
 .../admin-form/common/AdminFormLayout.tsx     |   3 -
 .../admin-form/preview/PreviewFormPage.tsx    |   3 -
 .../admin-form/template/TemplateFormPage.tsx  |   3 -
 .../src/features/env/AdminFeedbackIcon.tsx    |  36 --
 .../src/features/env/AdminFeedbackModal.tsx   | 180 ---------
 frontend/src/features/env/EnvService.ts       | 133 +------
 .../src/features/env/PublicFeedbackModal.tsx  | 284 --------------
 .../env/SwitchEnvFeedbackModal.stories.tsx    |  77 ----
 frontend/src/features/env/mutations.ts        |  49 ---
 frontend/src/features/env/queries.ts          |  30 +-
 frontend/src/features/env/utils.ts            |  12 -
 .../FormFields/FormFieldsContainer.tsx        |  10 -
 .../components/PublicSwitchEnvMessage.tsx     | 118 ------
 .../src/features/workspace/WorkspacePage.tsx  |   3 -
 .../components/AdminSwitchEnvMessage.tsx      |  72 ----
 .../EmptyWorkspace/EmptyWorkspace.tsx         |   8 +-
 .../components/WorkspacePageContent.tsx       |   5 -
 frontend/src/services/EnvService.ts           |  21 -
 shared/types/core.ts                          |   6 -
 src/app/config/schema.ts                      |  74 ----
 src/app/loaders/express/index.ts              |   2 -
 src/app/loaders/express/locals.ts             |  18 -
 src/app/loaders/express/logging.ts            |  28 +-
 .../modules/feedback/feedback.controller.ts   |  18 +-
 .../public-form/public-form.controller.ts     |   9 -
 .../public-form/public-form.middlewares.ts    |  15 -
 src/app/modules/frontend/frontend.service.ts  |   8 -
 .../react-migration.controller.ts             | 365 ------------------
 .../react-migration/react-migration.routes.ts |  23 --
 src/app/routes/api/v3/admin/admin.routes.ts   |   9 -
 .../api/v3/forms/public-forms.form.routes.ts  |  24 --
 .../forms/public-forms.submissions.routes.ts  |  11 -
 src/public/main.css                           |   1 -
 src/public/main.js                            |   4 -
 .../react-switch-banner.client.view.html      |  12 -
 .../react-switch-banner.client.component.js   |  29 --
 .../forms/admin/css/react-switch-banner.css   |  46 ---
 .../admin/views/list-forms.client.view.html   |   3 -
 src/public/services/AdminService.ts           |  17 -
 src/public/services/PublicFormService.ts      |  47 ---
 .../services/__tests__/AdminService.test.ts   |  28 --
 src/types/config.ts                           |  26 --
 42 files changed, 10 insertions(+), 1860 deletions(-)
 delete mode 100644 frontend/src/features/env/AdminFeedbackIcon.tsx
 delete mode 100644 frontend/src/features/env/AdminFeedbackModal.tsx
 delete mode 100644 frontend/src/features/env/PublicFeedbackModal.tsx
 delete mode 100644 frontend/src/features/env/SwitchEnvFeedbackModal.stories.tsx
 delete mode 100644 frontend/src/features/env/mutations.ts
 delete mode 100644 frontend/src/features/env/utils.ts
 delete mode 100644 frontend/src/features/public-form/components/PublicSwitchEnvMessage.tsx
 delete mode 100644 frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx
 delete mode 100644 frontend/src/services/EnvService.ts
 delete mode 100644 src/app/modules/form/public-form/public-form.middlewares.ts
 delete mode 100644 src/app/modules/react-migration/react-migration.controller.ts
 delete mode 100644 src/app/modules/react-migration/react-migration.routes.ts
 delete mode 100644 src/public/modules/forms/admin/componentViews/react-switch-banner.client.view.html
 delete mode 100644 src/public/modules/forms/admin/components/react-switch-banner.client.component.js
 delete mode 100644 src/public/modules/forms/admin/css/react-switch-banner.css
 delete mode 100644 src/public/services/AdminService.ts
 delete mode 100644 src/public/services/__tests__/AdminService.test.ts

diff --git a/frontend/src/features/admin-form/common/AdminFormLayout.tsx b/frontend/src/features/admin-form/common/AdminFormLayout.tsx
index 074d3e3865..36bf0a3efa 100644
--- a/frontend/src/features/admin-form/common/AdminFormLayout.tsx
+++ b/frontend/src/features/admin-form/common/AdminFormLayout.tsx
@@ -9,8 +9,6 @@ import { Banner } from '~components/Banner'
 
 import AdminForbiddenErrorPage from '~pages/AdminForbiddenError'
 import NotFoundErrorPage from '~pages/NotFoundError'
-// TODO #4279: Remove after React rollout is complete
-import { AdminFeedbackIcon } from '~features/env/AdminFeedbackIcon'
 import { useEnv } from '~features/env/queries'
 
 import { StorageResponsesProvider } from '../responses/ResponsesPage/storage/StorageResponsesProvider'
@@ -68,7 +66,6 @@ export const AdminFormLayout = (): JSX.Element => {
         </Banner>
       ) : null}
       <AdminFormNavbar />
-      <AdminFeedbackIcon />
       <StorageResponsesProvider>
         <Outlet />
       </StorageResponsesProvider>
diff --git a/frontend/src/features/admin-form/preview/PreviewFormPage.tsx b/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
index 7eacef38e4..eb312f6421 100644
--- a/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
+++ b/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
@@ -4,8 +4,6 @@ import { Flex } from '@chakra-ui/react'
 import { fillHeightCss } from '~utils/fillHeightCss'
 import GovtMasthead from '~components/GovtMasthead'
 
-// TODO #4279: Remove after React rollout is complete
-import { AdminFeedbackIcon } from '~features/env/AdminFeedbackIcon'
 import FormEndPage from '~features/public-form/components/FormEndPage'
 import FormFields from '~features/public-form/components/FormFields'
 import { FormSectionsProvider } from '~features/public-form/components/FormFields/FormSectionsContext'
@@ -28,7 +26,6 @@ export const PreviewFormPage = (): JSX.Element => {
       <PreviewFormProvider formId={formId}>
         <GovtMasthead />
         <PreviewFormBannerContainer />
-        <AdminFeedbackIcon />
         <FormSectionsProvider>
           <PublicFormLogo />
           <FormStartPage />
diff --git a/frontend/src/features/admin-form/template/TemplateFormPage.tsx b/frontend/src/features/admin-form/template/TemplateFormPage.tsx
index 569e3d5325..082b9b1d5d 100644
--- a/frontend/src/features/admin-form/template/TemplateFormPage.tsx
+++ b/frontend/src/features/admin-form/template/TemplateFormPage.tsx
@@ -4,8 +4,6 @@ import { Flex } from '@chakra-ui/react'
 import { fillHeightCss } from '~utils/fillHeightCss'
 import GovtMasthead from '~components/GovtMasthead'
 
-// TODO #4279: Remove after React rollout is complete
-import { AdminFeedbackIcon } from '~features/env/AdminFeedbackIcon'
 import FormEndPage from '~features/public-form/components/FormEndPage'
 import FormFields from '~features/public-form/components/FormFields'
 import { FormSectionsProvider } from '~features/public-form/components/FormFields/FormSectionsContext'
@@ -28,7 +26,6 @@ export const TemplateFormPage = (): JSX.Element => {
       <TemplateFormProvider formId={formId}>
         <GovtMasthead />
         <PreviewFormBannerContainer isTemplate />
-        <AdminFeedbackIcon />
         <FormSectionsProvider>
           <PublicFormLogo />
           <FormStartPage isTemplate />
diff --git a/frontend/src/features/env/AdminFeedbackIcon.tsx b/frontend/src/features/env/AdminFeedbackIcon.tsx
deleted file mode 100644
index 8187c5f5a4..0000000000
--- a/frontend/src/features/env/AdminFeedbackIcon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { BiMessage } from 'react-icons/bi'
-import { Flex, Portal, useDisclosure } from '@chakra-ui/react'
-
-import { noPrintCss } from '~utils/noPrintCss'
-import IconButton from '~components/IconButton'
-import Tooltip from '~components/Tooltip'
-
-import { AdminFeedbackModal } from './AdminFeedbackModal'
-
-export const AdminFeedbackIcon = (): JSX.Element => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-
-  return (
-    <Portal>
-      <Flex
-        position="fixed"
-        bottom="2.75rem"
-        right="2.75rem"
-        cursor="pointer"
-        sx={noPrintCss}
-      >
-        <Tooltip placement="left" label="Have feedback?">
-          <IconButton
-            variant="outline"
-            as="a"
-            aria-label="switch environments"
-            icon={<BiMessage color="primary.500" />}
-            onClick={onOpen}
-          />
-        </Tooltip>
-        <AdminFeedbackModal isOpen={isOpen} onClose={onClose} />
-      </Flex>
-    </Portal>
-  )
-}
diff --git a/frontend/src/features/env/AdminFeedbackModal.tsx b/frontend/src/features/env/AdminFeedbackModal.tsx
deleted file mode 100644
index e404d96787..0000000000
--- a/frontend/src/features/env/AdminFeedbackModal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { useCallback, useRef } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import {
-  chakra,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Skeleton,
-  Stack,
-  useBreakpointValue,
-} from '@chakra-ui/react'
-import { datadogRum } from '@datadog/browser-rum'
-import { isEmpty } from 'lodash'
-
-import { AdminFeedbackFormDto } from '~shared/types'
-
-import { REQUIRED_ERROR } from '~constants/validation'
-import { useIsMobile } from '~hooks/useIsMobile'
-import { useToast } from '~hooks/useToast'
-import Button from '~components/Button'
-import Rating from '~components/Field/Rating'
-import FormErrorMessage from '~components/FormControl/FormErrorMessage'
-import FormLabel from '~components/FormControl/FormLabel'
-import { ModalCloseButton } from '~components/Modal'
-import Textarea from '~components/Textarea'
-
-import { useUser } from '~features/user/queries'
-
-import { useFeedbackMutation } from './mutations'
-import { useAdminFeedbackFormView } from './queries'
-import { isUsableFeedback } from './utils'
-
-export const AdminFeedbackModal = ({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean
-  onClose: () => void
-}): JSX.Element => {
-  const modalSize = useBreakpointValue({
-    base: 'mobile',
-    xs: 'mobile',
-    md: 'md',
-  })
-  const isMobile = useIsMobile()
-  const toast = useToast({ status: 'success', isClosable: true })
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<AdminFeedbackFormDto>()
-
-  const initialRef = useRef(null)
-
-  const { user } = useUser()
-  const url = window.location.href
-  const rumSessionId = datadogRum.getInternalContext()?.session_id
-
-  const { data: feedbackForm, isLoading } = useAdminFeedbackFormView()
-  const feedbackMutation = useFeedbackMutation()
-
-  const handleSubmitForm = handleSubmit((formInputs: AdminFeedbackFormDto) => {
-    if (!feedbackForm) return
-    if (isUsableFeedback(formInputs.feedback)) {
-      feedbackMutation.mutate({
-        formInputs,
-        feedbackForm,
-      })
-    }
-    toast({ description: 'Your feedback has been submitted.' })
-    onClose()
-  })
-
-  const handleClose = useCallback(() => {
-    onClose()
-  }, [onClose])
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={handleClose}
-      size={modalSize}
-      initialFocusRef={initialRef}
-    >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalCloseButton />
-        <chakra.form noValidate onSubmit={handleSubmitForm}>
-          <ModalHeader pr="3rem">Share your feedback</ModalHeader>
-          <ModalBody mt="0" pt="0">
-            <Skeleton isLoaded={!isLoading}>
-              <Stack spacing="1rem">
-                <Input type="hidden" {...register('url')} value={url} />
-
-                <FormControl isRequired isInvalid={!isEmpty(errors)}>
-                  <FormLabel>How was your experience using FormSG?</FormLabel>
-                  <Controller
-                    rules={{ required: REQUIRED_ERROR }}
-                    control={control}
-                    name="rating"
-                    render={({ field: { value, onChange, ...rest } }) => (
-                      <Rating
-                        numberOfRatings={5}
-                        variant="star"
-                        helperText={'1: Poor, 5: Excellent'}
-                        value={Number(value)}
-                        onChange={(val) => onChange(val?.toString())}
-                        {...rest}
-                      />
-                    )}
-                  />
-                  <FormErrorMessage>
-                    {errors['rating']?.message}
-                  </FormErrorMessage>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>Do you have any other feedback for us?</FormLabel>
-                  <Textarea {...register('feedback')} />
-                  <FormErrorMessage>
-                    {errors['feedback']?.message}
-                  </FormErrorMessage>
-                </FormControl>
-
-                {user ? (
-                  <Input
-                    type="hidden"
-                    {...register('email')}
-                    value={user.email}
-                  />
-                ) : null}
-
-                {rumSessionId ? (
-                  <Input
-                    type="hidden"
-                    {...register('rumSessionId')}
-                    value={`https://app.datadoghq.com/rum/replay/sessions/${rumSessionId}`}
-                  />
-                ) : null}
-              </Stack>
-            </Skeleton>
-          </ModalBody>
-          <ModalFooter mt={{ base: '2.5rem', md: '0' }}>
-            <Stack
-              w="100%"
-              spacing="1rem"
-              justify="right"
-              direction={{ base: 'column-reverse', md: 'row' }}
-            >
-              <Button
-                isFullWidth={isMobile}
-                variant="clear"
-                onClick={onClose}
-                isDisabled={feedbackMutation.isLoading}
-              >
-                Cancel
-              </Button>
-              <Button
-                isFullWidth={isMobile}
-                type="submit"
-                isDisabled={isLoading}
-                isLoading={feedbackMutation.isLoading}
-              >
-                Submit feedback
-              </Button>
-            </Stack>
-          </ModalFooter>
-        </chakra.form>
-      </ModalContent>
-    </Modal>
-  )
-}
diff --git a/frontend/src/features/env/EnvService.ts b/frontend/src/features/env/EnvService.ts
index 573a53f8a5..47561465e8 100644
--- a/frontend/src/features/env/EnvService.ts
+++ b/frontend/src/features/env/EnvService.ts
@@ -1,138 +1,7 @@
-import {
-  AdminFeedbackFormDto,
-  BasicField,
-  ErrorDto,
-  PublicFeedbackFormDto,
-  PublicFormViewDto,
-} from '~shared/types'
-import { ClientEnvVars, SuccessMessageDto } from '~shared/types/core'
+import { ClientEnvVars } from '~shared/types/core'
 
-import { transformAllIsoStringsToDate } from '~utils/date'
 import { ApiService } from '~services/ApiService'
 
-import { PUBLIC_FORMS_ENDPOINT } from '~features/public-form/PublicFormService'
-
-import { othersInputName } from './PublicFeedbackModal'
-
 export const getClientEnvVars = async (): Promise<ClientEnvVars> => {
   return ApiService.get<ClientEnvVars>('/client/env').then(({ data }) => data)
 }
-
-// TODO #4279: Remove after React rollout is complete
-const createFeedbackResponsesArray = (
-  feedbackFormFieldsStructure: string[],
-  formInputs: AdminFeedbackFormDto | PublicFeedbackFormDto,
-  feedbackForm: PublicFormViewDto,
-) => {
-  return feedbackFormFieldsStructure.map((question, i) => {
-    const { _id, fieldType } = feedbackForm.form.form_fields[i]
-    // Checkbox answers have to be in an answerArray
-    if (fieldType === BasicField.Checkbox) {
-      // if no checkbox is selected, return an empty array
-      const answerArray: string[] = formInputs[question] || []
-
-      // Note: This code assumes that there is only 1 checkbox field with 'Others'
-      // and might break if we have multiple checkboxes with 'Others'
-      // if Others is selected, remove '!!FORMSG_INTERNAL_CHECKBOX_OTHERS_VALUE!!'
-      // which is the last value in the array when 'Others' is selected,
-      // and replace it with the value entered in the Others Input field
-      if (formInputs[othersInputName]) {
-        answerArray.pop() // remove '!!FORMSG_INTERNAL_CHECKBOX_OTHERS_VALUE!!' from array
-        answerArray.push(`Others: ${formInputs[othersInputName]}`)
-      }
-      return {
-        _id,
-        question,
-        answerArray,
-        fieldType,
-      }
-    }
-    const answer: string = formInputs[question] ?? ''
-    return {
-      _id,
-      question,
-      answer,
-      fieldType,
-    }
-  })
-}
-
-const createSwitchFeedbackSubmissionFormData = (
-  feedbackFormFieldsStructure: string[],
-  formInputs: AdminFeedbackFormDto | PublicFeedbackFormDto,
-  feedbackForm: PublicFormViewDto,
-) => {
-  const responses = createFeedbackResponsesArray(
-    feedbackFormFieldsStructure,
-    formInputs,
-    feedbackForm,
-  )
-  // convert content to FormData object
-  const formData = new FormData()
-  formData.append('body', JSON.stringify({ responses }))
-
-  return formData
-}
-
-/**
- * Post feedback for the switch environment feedback form
- * @param formInputs object containing the feedback
- * @returns success message
- */
-export const submitSwitchEnvFormFeedback = async ({
-  formInputs,
-  feedbackForm,
-}: {
-  formInputs: AdminFeedbackFormDto | PublicFeedbackFormDto
-  feedbackForm: PublicFormViewDto
-}): Promise<SuccessMessageDto | ErrorDto> => {
-  const isAdmin = Object.keys(formInputs).includes('rating')
-
-  const formFields = ['url', 'feedback', 'email', 'rumSessionId']
-  const adminFormFields = ['rating']
-  const publicFormFields = [
-    'attachmentType',
-    'userAgent',
-    'responseMode',
-    'authType',
-  ]
-  if (isAdmin) formFields.push(...adminFormFields)
-  else formFields.push(...publicFormFields)
-
-  const formData = createSwitchFeedbackSubmissionFormData(
-    formFields,
-    formInputs,
-    feedbackForm,
-  )
-
-  return ApiService.post<SuccessMessageDto>(
-    `${PUBLIC_FORMS_ENDPOINT}/submissions/email/switchenvfeedback`,
-    formData,
-    {
-      params: {
-        captchaResponse: 'null',
-        view: isAdmin ? 'admin' : undefined,
-      },
-    },
-  ).then(({ data }) => data)
-}
-
-/**
- * Gets public view of the public switch environment feedback form, along with any
- * identify information obtained from Singpass/Corppass/MyInfo.
- * @returns Public view of form, with additional identify information
- */
-export const getFeedbackFormView = async (
-  isAdmin?: boolean,
-): Promise<PublicFormViewDto> => {
-  return ApiService.get<PublicFormViewDto>(
-    `${PUBLIC_FORMS_ENDPOINT}/switchenvfeedback`,
-    {
-      params: {
-        view: isAdmin ? 'admin' : undefined,
-      },
-    },
-  )
-    .then(({ data }) => data)
-    .then(transformAllIsoStringsToDate)
-}
diff --git a/frontend/src/features/env/PublicFeedbackModal.tsx b/frontend/src/features/env/PublicFeedbackModal.tsx
deleted file mode 100644
index 4f26e70e8a..0000000000
--- a/frontend/src/features/env/PublicFeedbackModal.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { get, useForm } from 'react-hook-form'
-import {
-  chakra,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Skeleton,
-  Stack,
-  useBreakpointValue,
-} from '@chakra-ui/react'
-import { datadogRum } from '@datadog/browser-rum'
-import validator from 'validator'
-
-import {
-  FormAuthType,
-  FormResponseMode,
-  PublicFeedbackFormDto,
-} from '~shared/types'
-
-import { INVALID_EMAIL_ERROR, REQUIRED_ERROR } from '~constants/validation'
-import { useIsMobile } from '~hooks/useIsMobile'
-import Button from '~components/Button'
-import Checkbox from '~components/Checkbox'
-import FormErrorMessage from '~components/FormControl/FormErrorMessage'
-import FormLabel from '~components/FormControl/FormLabel'
-import { ModalCloseButton } from '~components/Modal'
-import Textarea from '~components/Textarea'
-
-import { useEnvMutations, useFeedbackMutation } from '~features/env/mutations'
-
-import { usePublicFeedbackFormView } from './queries'
-import { isUsableFeedback } from './utils'
-
-export const othersInputName = 'othersInput'
-export const PublicFeedbackModal = ({
-  isOpen,
-  onClose,
-  responseMode,
-  authType,
-}: {
-  isOpen: boolean
-  onClose: () => void
-  responseMode?: FormResponseMode
-  authType?: FormAuthType
-}): JSX.Element => {
-  const modalSize = useBreakpointValue({
-    base: 'mobile',
-    xs: 'mobile',
-    md: 'md',
-  })
-  const isMobile = useIsMobile()
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    getValues,
-  } = useForm<PublicFeedbackFormDto>()
-
-  const initialRef = useRef(null)
-
-  const url = window.location.href
-  const rumSessionId = datadogRum.getInternalContext()?.session_id
-  const [showThanksPage, setShowThanksPage] = useState<boolean>(false)
-
-  const { publicSwitchEnvMutation } = useEnvMutations()
-  const { data: feedbackForm, isLoading } = usePublicFeedbackFormView()
-  const feedbackMutation = useFeedbackMutation()
-
-  const handleSubmitForm = handleSubmit((formInputs: PublicFeedbackFormDto) => {
-    if (!feedbackForm) return
-    if (isUsableFeedback(formInputs.feedback)) {
-      feedbackMutation.mutate({ formInputs, feedbackForm })
-    }
-    setShowThanksPage(true)
-  })
-
-  const handleClose = useCallback(() => {
-    onClose()
-    setShowThanksPage(false)
-  }, [onClose])
-
-  const handleChangeEnv = useCallback(() => {
-    publicSwitchEnvMutation.mutate()
-  }, [publicSwitchEnvMutation])
-
-  const checkboxInputName = 'attachmentType'
-
-  const CHECKBOX_OTHERS_INPUT_VALUE =
-    '!!FORMSG_INTERNAL_CHECKBOX_OTHERS_VALUE!!'
-  const ATTACHMENT_TYPE_OPTIONS = ['PDF', 'JPEG', 'PNG', 'ZIP']
-
-  const othersValidationRules = useMemo(
-    () => ({
-      validate: (value?: string) => {
-        const currCheckedVals = getValues(checkboxInputName)
-        return (
-          !(
-            Array.isArray(currCheckedVals) &&
-            currCheckedVals.includes(CHECKBOX_OTHERS_INPUT_VALUE)
-          ) ||
-          !!value?.trim() ||
-          'Please specify a value for the "others" option'
-        )
-      },
-    }),
-    [checkboxInputName, getValues],
-  )
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={handleClose}
-      size={modalSize}
-      initialFocusRef={initialRef}
-    >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalCloseButton />
-        {showThanksPage ? (
-          <>
-            <ModalHeader>Thank you for your feedback!</ModalHeader>
-            <ModalBody>
-              Would you like to switch back to the original FormSG?
-            </ModalBody>
-            <ModalFooter mt={{ base: '2.5rem', md: '0' }}>
-              <Stack
-                w="100%"
-                spacing="1rem"
-                justify="right"
-                direction={{ base: 'column-reverse', md: 'row' }}
-              >
-                <Button
-                  isFullWidth={isMobile}
-                  variant="clear"
-                  onClick={handleClose}
-                >
-                  No, don't switch
-                </Button>
-                <Button isFullWidth={isMobile} onClick={handleChangeEnv}>
-                  Yes, please
-                </Button>
-              </Stack>
-            </ModalFooter>
-          </>
-        ) : (
-          <chakra.form noValidate onSubmit={handleSubmitForm}>
-            <ModalHeader pr="3rem">Can't submit this form?</ModalHeader>
-            <ModalBody mt="0" pt="0">
-              <Skeleton isLoaded={!isLoading}>
-                <Stack spacing="1rem">
-                  <Input type="hidden" {...register('url')} value={url} />
-
-                  <FormControl isRequired isInvalid={!!errors['feedback']}>
-                    <FormLabel description="Any fields you've filled in your form so far will be cleared">
-                      Please tell us about the issue(s) you're facing. It'll
-                      help us improve FormSG.
-                    </FormLabel>
-                    <Textarea
-                      {...register('feedback', {
-                        required: {
-                          value: true,
-                          message: REQUIRED_ERROR,
-                        },
-                      })}
-                    />
-                    <FormErrorMessage>
-                      {errors['feedback']?.message}
-                    </FormErrorMessage>
-                  </FormControl>
-                  <FormControl>
-                    <FormLabel>
-                      File type(s) of attachment(s) uploaded, if any
-                    </FormLabel>
-                    {ATTACHMENT_TYPE_OPTIONS.map((option) => (
-                      <Checkbox
-                        key={option}
-                        value={option}
-                        defaultValue=""
-                        {...register(checkboxInputName)}
-                      >
-                        {option}
-                      </Checkbox>
-                    ))}
-                    <Checkbox.OthersWrapper>
-                      <FormControl isInvalid={!!get(errors, othersInputName)}>
-                        <Checkbox.OthersCheckbox
-                          value={CHECKBOX_OTHERS_INPUT_VALUE}
-                          isInvalid={!!get(errors, checkboxInputName)}
-                          {...register(checkboxInputName)}
-                        />
-                        <Checkbox.OthersInput
-                          {...register(othersInputName, othersValidationRules)}
-                        />
-                        <FormErrorMessage>
-                          {get(errors, `${othersInputName}.message`)}
-                        </FormErrorMessage>
-                      </FormControl>
-                    </Checkbox.OthersWrapper>
-                  </FormControl>
-                  <FormControl isInvalid={!!errors['email']}>
-                    <FormLabel>
-                      Email, if we need to contact you for details
-                    </FormLabel>
-                    <Input
-                      {...register('email', {
-                        validate: (value) => {
-                          if (!value) {
-                            return true
-                          }
-                          // Valid email check
-                          if (!validator.isEmail(value)) {
-                            return INVALID_EMAIL_ERROR
-                          }
-                        },
-                      })}
-                    />
-                    <FormErrorMessage>
-                      {errors['email']?.message}
-                    </FormErrorMessage>
-                  </FormControl>
-
-                  {rumSessionId ? (
-                    <Input
-                      type="hidden"
-                      {...register('rumSessionId')}
-                      value={`https://app.datadoghq.com/rum/replay/sessions/${rumSessionId}`}
-                    />
-                  ) : null}
-                  <Input
-                    type="hidden"
-                    {...register('userAgent')}
-                    value={`${window.navigator.userAgent}`}
-                  />
-                  <Input
-                    type="hidden"
-                    {...register('responseMode')}
-                    value={responseMode}
-                  />
-                  <Input
-                    type="hidden"
-                    {...register('authType')}
-                    value={authType}
-                  />
-                </Stack>
-              </Skeleton>
-            </ModalBody>
-            <ModalFooter mt={{ base: '2.5rem', md: '0' }}>
-              <Stack
-                w="100%"
-                spacing="1rem"
-                justify="right"
-                direction={{ base: 'column-reverse', md: 'row' }}
-              >
-                <Button
-                  isFullWidth={isMobile}
-                  variant="clear"
-                  onClick={onClose}
-                  isDisabled={feedbackMutation.isLoading}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  isFullWidth={isMobile}
-                  type="submit"
-                  isDisabled={isLoading}
-                  isLoading={feedbackMutation.isLoading}
-                >
-                  Next
-                </Button>
-              </Stack>
-            </ModalFooter>
-          </chakra.form>
-        )}
-      </ModalContent>
-    </Modal>
-  )
-}
diff --git a/frontend/src/features/env/SwitchEnvFeedbackModal.stories.tsx b/frontend/src/features/env/SwitchEnvFeedbackModal.stories.tsx
deleted file mode 100644
index fffc70718a..0000000000
--- a/frontend/src/features/env/SwitchEnvFeedbackModal.stories.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { Meta, Story } from '@storybook/react'
-
-import { getUnauthedUser, getUser, MOCK_USER } from '~/mocks/msw/handlers/user'
-
-import {
-  fullScreenDecorator,
-  getMobileViewParameters,
-  LoggedInDecorator,
-  LoggedOutDecorator,
-} from '~utils/storybook'
-
-import { AdminFeedbackModal } from './AdminFeedbackModal'
-import { PublicFeedbackModal } from './PublicFeedbackModal'
-
-export default {
-  title: 'Pages/SwitchEnvFeedbackModal',
-  decorators: [fullScreenDecorator],
-  parameters: {
-    layout: 'fullscreen',
-    // Prevent flaky tests due to modal animating in.
-    chromatic: { delay: 200 },
-    msw: [getUser({ delay: 0 })],
-  },
-} as Meta
-
-const onClose = () => {
-  return
-}
-
-const AdminTemplate: Story = () => {
-  return <AdminFeedbackModal onClose={onClose} isOpen />
-}
-
-const PublicRespondentTemplate: Story = () => {
-  return <PublicFeedbackModal onClose={onClose} isOpen />
-}
-
-export const PublicRespondent = PublicRespondentTemplate.bind({})
-PublicRespondent.decorators = [LoggedOutDecorator]
-PublicRespondent.parameters = {
-  msw: [getUnauthedUser()],
-}
-
-export const MobilePublicRespondent = PublicRespondentTemplate.bind({})
-MobilePublicRespondent.parameters = {
-  ...getMobileViewParameters(),
-  msw: [getUnauthedUser()],
-}
-MobilePublicRespondent.decorators = [LoggedOutDecorator]
-
-export const Admin = AdminTemplate.bind({})
-Admin.decorators = [LoggedInDecorator]
-Admin.parameters = {
-  msw: [
-    getUser({
-      delay: 0,
-      mockUser: {
-        ...MOCK_USER,
-      },
-    }),
-  ],
-}
-
-export const MobileAdmin = AdminTemplate.bind({})
-MobileAdmin.parameters = {
-  ...getMobileViewParameters(),
-  msw: [
-    getUser({
-      delay: 0,
-      mockUser: {
-        ...MOCK_USER,
-      },
-    }),
-  ],
-}
-MobileAdmin.decorators = [LoggedInDecorator]
diff --git a/frontend/src/features/env/mutations.ts b/frontend/src/features/env/mutations.ts
deleted file mode 100644
index 0fb1be2a30..0000000000
--- a/frontend/src/features/env/mutations.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { useMutation } from 'react-query'
-import { useParams } from 'react-router-dom'
-
-import {
-  adminChooseEnvironment,
-  publicChooseEnvironment,
-} from '~services/EnvService'
-
-import { submitSwitchEnvFormFeedback } from './EnvService'
-
-export const useEnvMutations = () => {
-  const { formId } = useParams()
-
-  const publicSwitchEnvMutation = useMutation(() => publicChooseEnvironment(), {
-    onSuccess: () => window.location.reload(),
-  })
-
-  const adminSwitchEnvMutation = useMutation(() => adminChooseEnvironment(), {
-    onSuccess: () => {
-      const previewFormReactPath = new RegExp(`^/admin/form/${formId}/preview`)
-      const adminWorkspaceReactPath = new RegExp('^/dashboard')
-      const formBuilderReactPath = new RegExp('^/admin/form/')
-
-      // If on admin preview form page
-      if (window.location.pathname.match(previewFormReactPath)) {
-        window.location.assign(`/#!/${formId}/preview`)
-        // If on admin workspace page
-      } else if (window.location.pathname.match(adminWorkspaceReactPath)) {
-        window.location.assign('/#!/forms')
-        // If on form builder page
-      } else if (window.location.pathname.match(formBuilderReactPath)) {
-        window.location.assign(`/#!/${formId}/admin`)
-      } else {
-        // if on public form page
-        window.location.reload()
-      }
-    },
-  })
-
-  return {
-    publicSwitchEnvMutation,
-    adminSwitchEnvMutation,
-  }
-}
-
-export const useFeedbackMutation = () => {
-  return useMutation(submitSwitchEnvFormFeedback)
-}
diff --git a/frontend/src/features/env/queries.ts b/frontend/src/features/env/queries.ts
index abc13f1335..f7a8b94dfb 100644
--- a/frontend/src/features/env/queries.ts
+++ b/frontend/src/features/env/queries.ts
@@ -1,16 +1,11 @@
 import { useQuery, UseQueryResult } from 'react-query'
 
-import { PublicFormViewDto } from '~shared/types'
 import { ClientEnvVars } from '~shared/types/core'
 
-import { ApiError } from '~typings/core'
-
-import { getClientEnvVars, getFeedbackFormView } from './EnvService'
+import { getClientEnvVars } from './EnvService'
 
 const envKeys = {
   base: ['env'],
-  adminFeedbackForm: ['adminFeedbackForm'] as const,
-  publicFeedbackForm: ['publicFeedbackForm'] as const,
 }
 
 export const useEnv = (
@@ -20,26 +15,3 @@ export const useEnv = (
     enabled,
   })
 }
-
-// TODO #4279: Remove after React rollout is complete
-export const useAdminFeedbackFormView = (
-  /** Extra override to determine whether query is enabled */
-  enabled = true,
-): UseQueryResult<PublicFormViewDto, ApiError> => {
-  return useQuery<PublicFormViewDto, ApiError>(
-    envKeys.adminFeedbackForm,
-    () => getFeedbackFormView(/* admin = */ true),
-    { enabled },
-  )
-}
-
-export const usePublicFeedbackFormView = (
-  /** Extra override to determine whether query is enabled */
-  enabled = true,
-): UseQueryResult<PublicFormViewDto, ApiError> => {
-  return useQuery<PublicFormViewDto, ApiError>(
-    envKeys.publicFeedbackForm,
-    () => getFeedbackFormView(/* admin = */ false),
-    { enabled },
-  )
-}
diff --git a/frontend/src/features/env/utils.ts b/frontend/src/features/env/utils.ts
deleted file mode 100644
index d5da33f9c5..0000000000
--- a/frontend/src/features/env/utils.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * TODO(#4279): Remove this function
- * Filter to prevent empty or non-actionable feedback
- * from being sent.
- */
-export const isUsableFeedback = (feedback: string): boolean => {
-  const trimmed = feedback.trim()
-  return (
-    trimmed.length > 5 &&
-    !['na', 'nil', 'nothing', 'none'].includes(trimmed.toLowerCase())
-  )
-}
diff --git a/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx b/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx
index b79e373d6f..c662e4e368 100644
--- a/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx
+++ b/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx
@@ -6,8 +6,6 @@ import { FormAuthType } from '~shared/types/form/form'
 import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
 import { FormAuth } from '../FormAuth'
-// TODO #4279: Remove after React rollout is complete
-import { PublicSwitchEnvMessage } from '../PublicSwitchEnvMessage'
 
 import { FormFields } from './FormFields'
 import { FormFieldsSkeleton } from './FormFieldsSkeleton'
@@ -53,14 +51,6 @@ export const FormFieldsContainer = ({
   return (
     <Box w="100%" minW={0} h="fit-content" maxW="57rem">
       {renderFields}
-      {/* TODO(#4279): Remove switch env message on full rollout */}
-      {!isPreview && (
-        <PublicSwitchEnvMessage
-          responseMode={form?.responseMode}
-          isAuthRequired={isAuthRequired}
-          authType={form?.authType}
-        />
-      )}
     </Box>
   )
 }
diff --git a/frontend/src/features/public-form/components/PublicSwitchEnvMessage.tsx b/frontend/src/features/public-form/components/PublicSwitchEnvMessage.tsx
deleted file mode 100644
index 7749e9e87e..0000000000
--- a/frontend/src/features/public-form/components/PublicSwitchEnvMessage.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { KeyboardEventHandler, useCallback, useMemo } from 'react'
-import {
-  Box,
-  Flex,
-  Text,
-  useDisclosure,
-  VisuallyHidden,
-} from '@chakra-ui/react'
-
-import { FormAuthType, FormResponseMode } from '~shared/types'
-
-import { noPrintCss } from '~utils/noPrintCss'
-import Button from '~components/Button'
-import InlineMessage from '~components/InlineMessage'
-
-import { PublicFeedbackModal } from '~features/env/PublicFeedbackModal'
-import { useEnv } from '~features/env/queries'
-
-type PublicSwitchEnvMessageProps = {
-  responseMode?: FormResponseMode
-  isAuthRequired: boolean
-  authType?: FormAuthType
-}
-
-export const PublicSwitchEnvMessage = ({
-  responseMode,
-  isAuthRequired,
-  authType,
-}: PublicSwitchEnvMessageProps): JSX.Element | null => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-
-  const {
-    data: {
-      respondentRolloutEmail,
-      respondentRolloutStorage,
-      removeRespondentsInfoboxThreshold,
-    } = {},
-  } = useEnv()
-
-  const switchEnvRolloutPercentage = useMemo(
-    () =>
-      responseMode === FormResponseMode.Email
-        ? respondentRolloutEmail
-        : respondentRolloutStorage,
-    [responseMode, respondentRolloutEmail, respondentRolloutStorage],
-  )
-
-  // Remove the switch env message if the React rollout for public form respondents is => threshold
-  const showSwitchEnvMessage = useMemo(
-    () =>
-      !!(
-        switchEnvRolloutPercentage &&
-        removeRespondentsInfoboxThreshold &&
-        switchEnvRolloutPercentage < removeRespondentsInfoboxThreshold
-      ),
-    [switchEnvRolloutPercentage, removeRespondentsInfoboxThreshold],
-  )
-
-  const handleKeydown: KeyboardEventHandler<HTMLButtonElement> = useCallback(
-    (event) => {
-      if (event.key === 'Enter') {
-        onOpen()
-        event.preventDefault()
-      }
-    },
-    [onOpen],
-  )
-
-  if (!showSwitchEnvMessage) return null
-
-  return (
-    <Flex
-      mt={isAuthRequired ? undefined : '-2.5rem'}
-      justify="center"
-      sx={noPrintCss}
-    >
-      <Box w="100%" minW={0} h="fit-content" maxW="57rem">
-        <InlineMessage
-          variant="warning"
-          mb="1.5rem"
-          mt={{ base: '2rem', md: '0' }}
-          id="switch-env-msg"
-        >
-          <Text>
-            You’re using the new FormSG design. If you have trouble submitting,{' '}
-            <Button
-              tabIndex={0}
-              p={0}
-              as="u"
-              variant="link"
-              display="inline"
-              my="-0.25rem"
-              onClick={onOpen}
-              onKeyDown={handleKeydown}
-              aria-labelledby="switch-env-msg"
-              cursor="pointer"
-            >
-              <VisuallyHidden>
-                Click to switch to the original FormSG
-              </VisuallyHidden>
-              <Text as="span" display="inline" aria-hidden>
-                switch to the original one here
-              </Text>
-            </Button>
-            .
-          </Text>
-        </InlineMessage>
-      </Box>
-      <PublicFeedbackModal
-        isOpen={isOpen}
-        onClose={onClose}
-        responseMode={responseMode}
-        authType={authType}
-      />
-    </Flex>
-  )
-}
diff --git a/frontend/src/features/workspace/WorkspacePage.tsx b/frontend/src/features/workspace/WorkspacePage.tsx
index c489008cd5..9c85de4a51 100644
--- a/frontend/src/features/workspace/WorkspacePage.tsx
+++ b/frontend/src/features/workspace/WorkspacePage.tsx
@@ -7,8 +7,6 @@ import { fillHeightCss } from '~utils/fillHeightCss'
 import { getBannerProps } from '~utils/getBannerProps'
 import { Banner } from '~components/Banner'
 
-// TODO #4279: Remove after React rollout is complete
-import { AdminFeedbackIcon } from '~features/env/AdminFeedbackIcon'
 import { useEnv } from '~features/env/queries'
 
 // TODO #4279: Remove after React rollout is complete
@@ -49,7 +47,6 @@ export const WorkspacePage = (): JSX.Element => {
           </Banner>
         ) : null}
         <AdminNavBar />
-        <AdminFeedbackIcon />
         <WorkspaceProvider>
           <WorkspacePageContent
             handleCreateFormModalOpen={createFormModalDisclosure.onOpen}
diff --git a/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx b/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx
deleted file mode 100644
index ce43e70177..0000000000
--- a/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { KeyboardEventHandler, useCallback, useMemo } from 'react'
-import { Text, VisuallyHidden } from '@chakra-ui/react'
-
-import Button from '~components/Button'
-import InlineMessage from '~components/InlineMessage'
-
-import { useEnvMutations } from '~features/env/mutations'
-import { useEnv } from '~features/env/queries'
-
-export const AdminSwitchEnvMessage = (): JSX.Element | null => {
-  const {
-    data: {
-      angularPhaseOutDate,
-      adminRollout,
-      removeAdminInfoboxThreshold,
-    } = {},
-  } = useEnv()
-  // Remove the switch env message if the React rollout for admins is => threshold
-  const showSwitchEnvMessage = useMemo(
-    () =>
-      adminRollout &&
-      removeAdminInfoboxThreshold &&
-      adminRollout < removeAdminInfoboxThreshold,
-    [adminRollout, removeAdminInfoboxThreshold],
-  )
-
-  const handleKeydown: KeyboardEventHandler<HTMLButtonElement> = useCallback(
-    (event) => {
-      if (event.key === 'Enter') {
-        event.preventDefault()
-      }
-    },
-    [],
-  )
-
-  const { adminSwitchEnvMutation } = useEnvMutations()
-
-  const handleClick = useCallback(
-    () => adminSwitchEnvMutation.mutate(),
-    [adminSwitchEnvMutation],
-  )
-
-  return showSwitchEnvMessage ? (
-    <>
-      <InlineMessage id="admin-switch-msg">
-        <Text>
-          Welcome to the new FormSG! You can still{' '}
-          <Button
-            tabIndex={0}
-            p={0}
-            as="u"
-            variant="link"
-            display="inline"
-            onClick={handleClick}
-            onKeyDown={handleKeydown}
-            aria-labelledby="admin-switch-msg"
-            cursor="pointer"
-          >
-            <VisuallyHidden>
-              Click to switch to the original FormSG
-            </VisuallyHidden>
-            <Text as="span" display="inline" aria-hidden>
-              switch to the original one
-            </Text>
-          </Button>
-          , which is available until {angularPhaseOutDate}.
-        </Text>
-      </InlineMessage>
-    </>
-  ) : null
-}
diff --git a/frontend/src/features/workspace/components/EmptyWorkspace/EmptyWorkspace.tsx b/frontend/src/features/workspace/components/EmptyWorkspace/EmptyWorkspace.tsx
index b1fda47f71..5639a54d7e 100644
--- a/frontend/src/features/workspace/components/EmptyWorkspace/EmptyWorkspace.tsx
+++ b/frontend/src/features/workspace/components/EmptyWorkspace/EmptyWorkspace.tsx
@@ -1,13 +1,10 @@
 import { BiPlus } from 'react-icons/bi'
-import { Box, Flex, Text } from '@chakra-ui/react'
+import { Flex, Text } from '@chakra-ui/react'
 
 import { useIsMobile } from '~hooks/useIsMobile'
 import { fillHeightCss } from '~utils/fillHeightCss'
 import Button from '~components/Button'
 
-// TODO #4279: Remove after React rollout is complete
-import { AdminSwitchEnvMessage } from '../AdminSwitchEnvMessage'
-
 import { EmptyWorkspaceSvgr } from './EmptyWorkspaceSvgr'
 
 export interface EmptyWorkspacePage {
@@ -31,9 +28,6 @@ export const EmptyWorkspace = ({
       bg="neutral.100"
       css={fillHeightCss}
     >
-      <Box pb="1.5rem">
-        <AdminSwitchEnvMessage />
-      </Box>
       <Text as="h2" textStyle="h2" color="primary.500" mb="1rem">
         You don't have any forms yet
       </Text>
diff --git a/frontend/src/features/workspace/components/WorkspacePageContent.tsx b/frontend/src/features/workspace/components/WorkspacePageContent.tsx
index 05ba166c49..1687468497 100644
--- a/frontend/src/features/workspace/components/WorkspacePageContent.tsx
+++ b/frontend/src/features/workspace/components/WorkspacePageContent.tsx
@@ -11,8 +11,6 @@ import { useUser } from '~features/user/queries'
 import { useWorkspaceContext } from '../WorkspaceContext'
 import { CONTAINER_MAXW } from '../WorkspacePage'
 
-// TODO #4279: Remove after React rollout is complete
-import { AdminSwitchEnvMessage } from './AdminSwitchEnvMessage'
 import { EmptyWorkspace } from './EmptyWorkspace'
 import { WorkspaceFormRows } from './WorkspaceFormRow'
 import { WorkspaceHeader } from './WorkspaceHeader'
@@ -55,9 +53,6 @@ export const WorkspacePageContent = ({
       templateAreas="'banner' 'header' 'main'"
       py="1.5rem"
     >
-      <Container gridArea="banner" maxW={CONTAINER_MAXW}>
-        <AdminSwitchEnvMessage />
-      </Container>
       <Container
         gridArea="header"
         maxW={CONTAINER_MAXW}
diff --git a/frontend/src/services/EnvService.ts b/frontend/src/services/EnvService.ts
deleted file mode 100644
index ed68e5b18d..0000000000
--- a/frontend/src/services/EnvService.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { UiCookieValues } from '~shared/types'
-
-import { PUBLIC_FORMS_ENDPOINT } from '~features/public-form/PublicFormService'
-
-import { ApiService } from './ApiService'
-
-const ENV_ENDPOINT = 'environment'
-const ADMIN_ENDPOINT = '/admin'
-
-export const publicChooseEnvironment = async (): Promise<UiCookieValues> => {
-  return ApiService.get(
-    `${PUBLIC_FORMS_ENDPOINT}/${ENV_ENDPOINT}/${UiCookieValues.Angular}`,
-  ).then(({ data }) => data)
-}
-
-export const adminChooseEnvironment = async (): Promise<UiCookieValues> => {
-  return ApiService.get(
-    `${ADMIN_ENDPOINT}/${ENV_ENDPOINT}/${UiCookieValues.Angular}`,
-  ).then(({ data }) => data)
-}
diff --git a/shared/types/core.ts b/shared/types/core.ts
index dacdc21d19..27c8b5c224 100644
--- a/shared/types/core.ts
+++ b/shared/types/core.ts
@@ -32,12 +32,6 @@ export type ClientEnvVars = {
   adminBannerContentReact: string
 
   spcpCookieDomain: string // Cookie domain used for removing spcp cookies
-  respondentRolloutEmail: number
-  respondentRolloutStorage: number
-  adminRollout: number
-  angularPhaseOutDate: string | null
-  removeAdminInfoboxThreshold: number
-  removeRespondentsInfoboxThreshold: number
   stripePublishableKey: string
   maxPaymentAmountCents: number
   minPaymentAmountCents: number
diff --git a/src/app/config/schema.ts b/src/app/config/schema.ts
index bfaea64121..2c8ee6a8d2 100644
--- a/src/app/config/schema.ts
+++ b/src/app/config/schema.ts
@@ -115,20 +115,6 @@ export const compulsoryVarsSchema: Schema<ICompulsoryVarsSchema> = {
       env: 'SSM_ENV_SITE_NAME',
     },
   },
-  reactMigration: {
-    adminSwitchEnvFeedbackFormId: {
-      doc: 'Form ID of the React to Angular bug report feedback form for admins',
-      format: String,
-      default: null,
-      env: 'REACT_SWITCH_ENV_FEEDBACK_FORM_ID_ADMIN',
-    },
-    respondentSwitchEnvFeedbackFormId: {
-      doc: 'Form ID of the React to Angular bug report feedback form for respondents',
-      format: String,
-      default: null,
-      env: 'REACT_SWITCH_ENV_FEEDBACK_FORM_ID_RESPONDENT',
-    },
-  },
 }
 
 // If the following environment variables are not specified, we will fall back to the defaults provided
@@ -354,66 +340,6 @@ export const optionalVarsSchema: Schema<IOptionalVarsSchema> = {
     },
   },
   reactMigration: {
-    respondentRolloutEmail: {
-      doc: 'Percentage threshold to serve React for respondents for Phase 1 (email mode forms)',
-      format: 'int',
-      default: 0,
-      env: 'REACT_MIGRATION_RESP_ROLLOUT_EMAIL',
-    },
-    respondentRolloutStorage: {
-      doc: 'Percentage threshold to serve React for respondents for Phase 2 (storage mode forms)',
-      format: 'int',
-      default: 0,
-      env: 'REACT_MIGRATION_RESP_ROLLOUT_STORAGE',
-    },
-    adminRollout: {
-      doc: 'Percentage threshold to serve React for admins',
-      format: 'int',
-      default: 0,
-      env: 'REACT_MIGRATION_ADMIN_ROLLOUT',
-    },
-    respondentCookieName: {
-      doc: "Name of the cookie that will store respondents' assigned environment.",
-      format: String,
-      default: 'v2-respondent-ui',
-      env: 'REACT_MIGRATION_RESP_COOKIE_NAME',
-    },
-    adminCookieNameOld: {
-      doc: "Name of the old cookie that will store admins' choice of environment.",
-      format: String,
-      default: 'v2-admin-ui',
-      env: 'REACT_MIGRATION_ADMIN_COOKIE_NAME_OLD',
-    },
-    adminCookieName: {
-      doc: "Name of the cookie that will store admins' choice of environment.",
-      format: String,
-      default: 'v2-admin-ui-Jan-2023',
-      env: 'REACT_MIGRATION_ADMIN_COOKIE_NAME',
-    },
-    qaCookieName: {
-      doc: 'Priority cookie to select react/angular during QA.',
-      format: String,
-      default: 'v2-qa-ui',
-      env: 'REACT_MIGRATION_QA_COOKIE_NAME',
-    },
-    angularPhaseOutDate: {
-      doc: 'Last date that AngularJS app is available',
-      format: String,
-      default: '15 September 2022',
-      env: 'REACT_MIGRATION_ANGULAR_END_DATE',
-    },
-    removeAdminInfoboxThreshold: {
-      doc: 'Percentage threshold where switch-to-angular infobox for Admins will no longer be visible',
-      format: 'int',
-      default: 100,
-      env: 'REACT_MIGRATION_REMOVE_INFOBOX_THRESHOLD_ADMIN',
-    },
-    removeRespondentsInfoboxThreshold: {
-      doc: 'Percentage threshold where switch-to-angular infobox for Respondents will no longer be visible',
-      format: 'int',
-      default: 10,
-      env: 'REACT_MIGRATION_REMOVE_INFOBOX_THRESHOLD_RESPONDENT',
-    },
     useFetchForSubmissions: {
       // TODO (#5826): Toggle to use fetch for submissions instead of axios. Remove once network error is resolved
       doc: 'Toggle to use fetch for submissions instead of axios',
diff --git a/src/app/loaders/express/index.ts b/src/app/loaders/express/index.ts
index 7b8357aaf9..81ff4588bb 100644
--- a/src/app/loaders/express/index.ts
+++ b/src/app/loaders/express/index.ts
@@ -15,7 +15,6 @@ import { FrontendRouter } from '../../modules/frontend/frontend.routes'
 import * as HomeController from '../../modules/home/home.controller'
 import { MYINFO_ROUTER_PREFIX } from '../../modules/myinfo/myinfo.constants'
 import { MyInfoRouter } from '../../modules/myinfo/myinfo.routes'
-import { ReactMigrationRouter } from '../../modules/react-migration/react-migration.routes'
 import { SgidRouter } from '../../modules/sgid/sgid.routes'
 import { SubmissionRouter } from '../../modules/submission/submission.routes'
 import { VfnRouter } from '../../modules/verification/verification.routes'
@@ -148,7 +147,6 @@ const loadExpressApp = async (connection: Connection) => {
   app.get(/^\/[^/]+\.[a-z]+$/, catchNonExistentStaticRoutesMiddleware)
 
   app.get('/old/', HomeController.home)
-  app.use('/', ReactMigrationRouter)
 
   app.use(sentryMiddlewares())
   app.use(errorHandlerMiddlewares())
diff --git a/src/app/loaders/express/locals.ts b/src/app/loaders/express/locals.ts
index 98d616e9b0..1cdb35016b 100644
--- a/src/app/loaders/express/locals.ts
+++ b/src/app/loaders/express/locals.ts
@@ -23,17 +23,6 @@ const frontendVars = {
   // TODO: remove after React rollout #4786
   GATrackingID: googleAnalyticsConfig.GATrackingID,
   spcpCookieDomain: spcpMyInfoConfig.spcpCookieDomain, // Cookie domain used for removing spcp cookies
-  // react migration variables
-  reactMigrationRespondentCookieName:
-    config.reactMigration.respondentCookieName,
-  reactMigrationAdminCookieNameOld: config.reactMigration.adminCookieNameOld,
-  reactMigrationAdminCookieName: config.reactMigration.adminCookieName,
-  reactMigrationRespondentRolloutEmail:
-    config.reactMigration.respondentRolloutEmail,
-  reactMigrationRespondentRolloutStorage:
-    config.reactMigration.respondentRolloutStorage,
-  reactMigrationAdminRollout: config.reactMigration.adminRollout,
-  reactMigrationAngularPhaseOutDate: config.reactMigration.angularPhaseOutDate,
   // payment variables
   reactMigrationUseFetchForSubmissions:
     config.reactMigration.useFetchForSubmissions,
@@ -63,13 +52,6 @@ const environment = ejs.render(
     // SPCP Cookie
     var spcpCookieDomain = "<%= spcpCookieDomain%>"
     // React Migration
-    var reactMigrationRespondentCookieName = "<%= reactMigrationRespondentCookieName%>"
-    var reactMigrationAdminCookieNameOld = "<%= reactMigrationAdminCookieNameOld%>"
-    var reactMigrationAdminCookieName = "<%= reactMigrationAdminCookieName%>"
-    var reactMigrationRespondentRolloutEmail = "<%= reactMigrationRespondentRolloutEmail%>"
-    var reactMigrationRespondentRolloutStorage = "<%= reactMigrationRespondentRolloutStorage%>"
-    var reactMigrationAdminRollout = "<%= reactMigrationAdminRollout%>"
-    var reactMigrationAngularPhaseOutDate = "<%= reactMigrationAngularPhaseOutDate%>"
     var reactMigrationUseFetchForSubmissions = <%= reactMigrationUseFetchForSubmissions%>
     // Payment
     var maxPaymentAmountCents = <%= maxPaymentAmountCents%>
diff --git a/src/app/loaders/express/logging.ts b/src/app/loaders/express/logging.ts
index 737a38bb1b..abf358317d 100644
--- a/src/app/loaders/express/logging.ts
+++ b/src/app/loaders/express/logging.ts
@@ -15,13 +15,6 @@ type LogMeta = {
   transactionId?: string
   trace?: string
   reactMigration?: {
-    respRolloutEmail: number
-    respRolloutStorage: number
-    adminRollout: number
-    qaCookie: string | undefined
-    adminCookieOld: string | undefined
-    adminCookie: string | undefined
-    respCookie: string | undefined
     // TODO (#5826): Toggle to use fetch for submissions instead of axios. Remove once network error is resolved
     useFetchForSubmissions?: boolean
   }
@@ -74,24 +67,9 @@ const loggingMiddleware = () => {
       }
 
       // Temporary: cookies are blacklisted, but we to track the state of the rollout for this particular request
-      if (
-        req.cookies?.[config.reactMigration.adminCookieNameOld] ||
-        req.cookies?.[config.reactMigration.adminCookieName] ||
-        req.cookies?.[config.reactMigration.respondentCookieName] ||
-        req.cookies?.[config.reactMigration.qaCookieName]
-      ) {
-        meta.reactMigration = {
-          respRolloutEmail: config.reactMigration.respondentRolloutEmail,
-          respRolloutStorage: config.reactMigration.respondentRolloutStorage,
-          adminRollout: config.reactMigration.adminRollout,
-          qaCookie: req.cookies?.[config.reactMigration.qaCookieName],
-          adminCookieOld:
-            req.cookies?.[config.reactMigration.adminCookieNameOld],
-          adminCookie: req.cookies?.[config.reactMigration.adminCookieName],
-          respCookie: req.cookies?.[config.reactMigration.respondentCookieName],
-          // TODO (#5826): Toggle to use fetch for submissions instead of axios. Remove once network error is resolved
-          useFetchForSubmissions: config.reactMigration.useFetchForSubmissions,
-        }
+      meta.reactMigration = {
+        // TODO (#5826): Toggle to use fetch for submissions instead of axios. Remove once network error is resolved
+        useFetchForSubmissions: config.reactMigration.useFetchForSubmissions,
       }
 
       return meta
diff --git a/src/app/modules/feedback/feedback.controller.ts b/src/app/modules/feedback/feedback.controller.ts
index 21429c3877..bd89032080 100644
--- a/src/app/modules/feedback/feedback.controller.ts
+++ b/src/app/modules/feedback/feedback.controller.ts
@@ -2,8 +2,6 @@ import { celebrate, Joi, Segments } from 'celebrate'
 import { StatusCodes } from 'http-status-codes'
 import { ErrorDto, PrivateFormErrorDto } from 'shared/types'
 
-import config from '../../config/config'
-import { statsdClient } from '../../config/datadog-statsd-client'
 import { createLoggerWithLabel } from '../../config/logger'
 import { createReqMeta } from '../../utils/request'
 import { ControllerHandler } from '../core/core.types'
@@ -56,16 +54,8 @@ const submitFormFeedback: ControllerHandler<
     .andThen(() => FeedbackService.hasNoPreviousFeedback(submissionId))
     .andThen(() => FormService.retrieveFullFormById(formId))
     .andThen((form) => FormService.isFormPublic(form).map(() => form))
-    .andThen((form) => {
-      statsdClient.distribution('formsg.feedback.rating', rating, 1, {
-        rating: `${rating}`,
-        ui:
-          req.cookies?.[config.reactMigration.respondentCookieName] === 'react'
-            ? 'react'
-            : 'angular',
-      })
-
-      return PublicFormService.insertFormFeedback({
+    .andThen((form) =>
+      PublicFormService.insertFormFeedback({
         formId: form._id,
         submissionId: submissionId,
         rating,
@@ -74,8 +64,8 @@ const submitFormFeedback: ControllerHandler<
         res
           .status(StatusCodes.OK)
           .json({ message: 'Successfully submitted feedback' }),
-      )
-    })
+      ),
+    )
     .mapErr((error) => {
       const { errorMessage, statusCode } = mapRouteError(error)
       logger.error({
diff --git a/src/app/modules/form/public-form/public-form.controller.ts b/src/app/modules/form/public-form/public-form.controller.ts
index 3c69c27eef..a75f5a78ae 100644
--- a/src/app/modules/form/public-form/public-form.controller.ts
+++ b/src/app/modules/form/public-form/public-form.controller.ts
@@ -14,7 +14,6 @@ import {
   PublicFormDto,
   PublicFormViewDto,
 } from '../../../../../shared/types'
-import config from '../../../config/config'
 import { createLoggerWithLabel } from '../../../config/logger'
 import { isMongoError } from '../../../utils/handle-mongo-error'
 import { createReqMeta, getRequestIp } from '../../../utils/request'
@@ -44,7 +43,6 @@ import {
 } from '../../spcp/spcp.util'
 import { AuthTypeMismatchError, PrivateFormError } from '../form.errors'
 import * as FormService from '../form.service'
-import { isFormEncryptMode } from '../form.utils'
 
 import * as PublicFormService from './public-form.service'
 import { RedirectParams } from './public-form.types'
@@ -162,13 +160,6 @@ export const handleGetPublicForm: ControllerHandler<
   const form = formResult.value
   const publicForm = form.getPublicView() as PublicFormDto
 
-  // If payments is enabled on the form, clear the angular cookie
-  // TODO(#4279): Remove once react rollout complete
-  if (isFormEncryptMode(form) && form.payments_field?.enabled) {
-    const angularCookie = config.reactMigration.respondentCookieName
-    res.clearCookie(angularCookie)
-  }
-
   const { authType } = form
   const isIntranetUser = FormService.checkIsIntranetFormAccess(
     getRequestIp(req),
diff --git a/src/app/modules/form/public-form/public-form.middlewares.ts b/src/app/modules/form/public-form/public-form.middlewares.ts
deleted file mode 100644
index 6f0569d876..0000000000
--- a/src/app/modules/form/public-form/public-form.middlewares.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { get, omit } from 'lodash'
-
-import { reactMigration } from '../../../config/config'
-import { ControllerHandler } from '../../core/core.types'
-
-export const injectFeedbackFormUrl: ControllerHandler = (req, res, next) => {
-  const formId =
-    get(req.query, 'view') === 'admin'
-      ? reactMigration.adminSwitchEnvFeedbackFormId
-      : reactMigration.respondentSwitchEnvFeedbackFormId
-  req.params = { formId: formId }
-  req.query = omit(req.query as object, 'view')
-  return next()
-}
diff --git a/src/app/modules/frontend/frontend.service.ts b/src/app/modules/frontend/frontend.service.ts
index d4cc4c6ec7..8c7fd196ab 100644
--- a/src/app/modules/frontend/frontend.service.ts
+++ b/src/app/modules/frontend/frontend.service.ts
@@ -27,14 +27,6 @@ export const getClientEnvVars = (): ClientEnvVars => {
     adminBannerContentReact: config.adminBannerContentReact,
 
     spcpCookieDomain: spcpMyInfoConfig.spcpCookieDomain, // Cookie domain used for removing spcp cookies
-    respondentRolloutEmail: config.reactMigration.respondentRolloutEmail,
-    respondentRolloutStorage: config.reactMigration.respondentRolloutStorage,
-    adminRollout: config.reactMigration.adminRollout,
-    angularPhaseOutDate: config.reactMigration.angularPhaseOutDate,
-    removeAdminInfoboxThreshold:
-      config.reactMigration.removeAdminInfoboxThreshold,
-    removeRespondentsInfoboxThreshold:
-      config.reactMigration.removeRespondentsInfoboxThreshold,
     stripePublishableKey: paymentConfig.stripePublishableKey,
     maxPaymentAmountCents: paymentConfig.maxPaymentAmountCents,
     minPaymentAmountCents: paymentConfig.minPaymentAmountCents,
diff --git a/src/app/modules/react-migration/react-migration.controller.ts b/src/app/modules/react-migration/react-migration.controller.ts
deleted file mode 100644
index cc5df6c72b..0000000000
--- a/src/app/modules/react-migration/react-migration.controller.ts
+++ /dev/null
@@ -1,365 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { readFileSync } from 'fs'
-import { escape } from 'html-escaper'
-import { get } from 'lodash'
-import path from 'path'
-
-import {
-  FormResponseMode,
-  FormStatus,
-  UiCookieValues,
-} from '../../../../shared/types'
-import config from '../../config/config'
-import { createLoggerWithLabel } from '../../config/logger'
-import { ControllerHandler } from '../core/core.types'
-import * as FormService from '../form/form.service'
-import * as PublicFormController from '../form/public-form/public-form.controller'
-import { createMetatags } from '../form/public-form/public-form.service'
-import { RedirectParams } from '../form/public-form/public-form.types'
-import * as HomeController from '../home/home.controller'
-
-export type SetEnvironmentParams = {
-  ui: UiCookieValues
-}
-
-export const RESPONDENT_COOKIE_OPTIONS = {
-  httpOnly: false,
-  sameSite: 'lax' as const, // Setting to 'strict' resets the cookie after redirecting from myInfo
-  secure: !config.isDev,
-}
-
-export const RESPONDENT_COOKIE_OPTIONS_WITH_EXPIRY = {
-  ...RESPONDENT_COOKIE_OPTIONS,
-  maxAge: 31 * 12 * 24 * 60 * 60, // 12 months
-}
-
-export const ADMIN_COOKIE_OPTIONS = {
-  httpOnly: false,
-  sameSite: 'lax' as const,
-  secure: !config.isDev,
-}
-
-export const ADMIN_COOKIE_OPTIONS_WITH_EXPIRY = {
-  ...ADMIN_COOKIE_OPTIONS,
-  maxAge: 31 * 12 * 24 * 60 * 60, // 12 months
-}
-
-const logger = createLoggerWithLabel(module)
-
-const reactFrontendPath = path.resolve('dist/frontend')
-const reactHtml = readFileSync(path.join(reactFrontendPath, 'index.html'), {
-  encoding: 'utf8',
-})
-
-type MetaTags = {
-  title: string
-  description: string
-  image: string
-}
-const replaceWithMetaTags = ({
-  title,
-  description,
-  image,
-}: MetaTags): string => {
-  return reactHtml
-    .replace(/(__OG_TITLE__)/g, escape(title))
-    .replace(/(__OG_DESCRIPTION__)/g, escape(description))
-    .replace(/(__OG_IMAGE__)/g, escape(image))
-}
-
-const serveFormReact =
-  (isPublicForm: boolean): ControllerHandler =>
-  async (req, res) => {
-    const reactFrontendPath = path.resolve('dist/frontend')
-    logger.info({
-      message: 'serveFormReact',
-      meta: {
-        action: 'routeReact.serveFormReact',
-        __dirname,
-        cwd: process.cwd(),
-        reactFrontendPath,
-      },
-    })
-
-    let tags: MetaTags = {
-      title: 'FormSG',
-      description: 'Trusted form manager of the Singapore Government',
-      image: 'og-img-metatag-nonpublicform.png',
-    }
-
-    if (isPublicForm && get(req.params, 'formId')) {
-      tags = await getPublicFormMetaTags(get(req.params, 'formId') ?? '')
-    }
-
-    const reactHtmlWithMetaTags = replaceWithMetaTags(tags)
-
-    return (
-      res
-        // Prevent index.html from being cached by browsers.
-        .setHeader('Cache-Control', 'no-cache')
-        .send(reactHtmlWithMetaTags)
-    )
-  }
-
-const serveFormAngular: ControllerHandler<
-  RedirectParams,
-  unknown,
-  unknown,
-  Record<string, string>
-> = (req, res, next) => {
-  return PublicFormController.handleRedirect(req, res, next)
-}
-
-const getPublicFormMetaTags = async (formId: string): Promise<MetaTags> => {
-  const createMetatagsResult = await createMetatags({
-    formId,
-  })
-
-  if (createMetatagsResult.isErr()) {
-    logger.error({
-      message: 'Error fetching metatags',
-      meta: {
-        action: 'getPublicFormMetaTags',
-        formId,
-      },
-      error: createMetatagsResult.error,
-    })
-    return {
-      title: 'FormSG',
-      description: '',
-      image: 'og-img-metatag-publicform.png',
-    }
-  } else {
-    const { title, description } = createMetatagsResult.value
-    return {
-      title: title,
-      description: description ?? '',
-      image: 'og-img-metatag-publicform.png',
-    }
-  }
-}
-
-export const servePublicForm: ControllerHandler<
-  RedirectParams,
-  unknown,
-  unknown,
-  Record<string, string>
-> = async (req, res, next) => {
-  const formResult = await FormService.retrieveFormKeysById(req.params.formId, [
-    'responseMode',
-    'status',
-  ])
-  let showReact: boolean | undefined = undefined
-  let isEmail = false
-
-  if (!formResult.isErr()) {
-    // This conditional router is not the one to do error handling
-    // If there's any error, isEmail will retain its value of false, and
-    // the handling route will handle the error later in the usual fashion
-    isEmail = formResult.value.responseMode === FormResponseMode.Email
-  }
-
-  const respThreshold = isEmail
-    ? config.reactMigration.respondentRolloutEmail
-    : config.reactMigration.respondentRolloutStorage
-
-  if (config.reactMigration.qaCookieName in req.cookies) {
-    showReact =
-      req.cookies[config.reactMigration.qaCookieName] === UiCookieValues.React
-  } else if (respThreshold <= 0) {
-    // Check the rollout value first, if it's 0, react is DISABLED
-    // And we ignore cookies entirely!
-    showReact = false
-    // Delete existing cookies to prevent infinite redirection
-    if (req.cookies) {
-      res.clearCookie(config.reactMigration.respondentCookieName)
-    }
-  } else if (config.reactMigration.respondentCookieName in req.cookies) {
-    // Note: the respondent cookie is for the whole session, not for a specific form.
-    // That means that within a session, a respondent will see the same environment
-    // for all the forms he/she fills.
-    showReact =
-      req.cookies[config.reactMigration.respondentCookieName] ===
-      UiCookieValues.React
-  }
-
-  if (showReact === undefined) {
-    const rand = Math.random() * 100
-    showReact = rand <= respThreshold
-
-    logger.info({
-      message: 'Randomly assigned UI environment for respondent',
-      meta: {
-        action: 'routeReact.random',
-        isEmail,
-        rand,
-        respThreshold,
-        showReact,
-      },
-    })
-
-    res.cookie(
-      config.reactMigration.respondentCookieName,
-      showReact ? UiCookieValues.React : UiCookieValues.Angular,
-      RESPONDENT_COOKIE_OPTIONS,
-    )
-  }
-
-  logger.info({
-    message: 'Routing evaluation done for respondent',
-    meta: {
-      action: 'routeReact',
-      isEmail,
-      respThreshold,
-      showReact,
-      cwd: process.cwd(),
-    },
-  })
-
-  if (showReact) {
-    const isPublicForm =
-      !formResult.isErr() && formResult.value.status === FormStatus.Public
-
-    return serveFormReact(isPublicForm)(req, res, next)
-  } else {
-    return serveFormAngular(req, res, next)
-  }
-}
-
-export const serveDefault: ControllerHandler = (req, res, next) => {
-  // Delete the deprecated cookie.
-  if (req.cookies[config.reactMigration.adminCookieNameOld]) {
-    res.clearCookie(config.reactMigration.adminCookieNameOld)
-  }
-
-  // Admins assigned react, or who choose react will stay on react until they opt out
-  // Admins assigned angular will stay on it for that session
-  let showReact: boolean | undefined = undefined
-
-  const adminThreshold = config.reactMigration.adminRollout
-
-  if (config.reactMigration.qaCookieName in req.cookies) {
-    showReact =
-      req.cookies[config.reactMigration.qaCookieName] === UiCookieValues.React
-  } else if (adminThreshold <= 0) {
-    // Check the rollout value first, if it's 0, react is DISABLED
-    // And we ignore cookies entirely!
-    showReact = false
-    // Delete existing cookie to prevent infinite redirection
-    if (req.cookies) {
-      res.clearCookie(config.reactMigration.adminCookieName)
-    }
-  } else if (req.cookies) {
-    if (config.reactMigration.adminCookieName in req.cookies) {
-      // Check if admin had already chosen react previously
-      showReact =
-        req.cookies[config.reactMigration.adminCookieName] ===
-        UiCookieValues.React
-    }
-  }
-
-  if (showReact === undefined) {
-    const rand = Math.random() * 100
-    showReact = rand <= adminThreshold
-
-    logger.info({
-      message: 'Randomly assigned UI environment for admin',
-      meta: {
-        action: 'routeReact.random',
-        rand,
-        adminThreshold,
-        showReact,
-      },
-    })
-
-    res.cookie(
-      config.reactMigration.adminCookieName,
-      showReact ? UiCookieValues.React : UiCookieValues.Angular,
-      // If assigned react, admins will stay on it unless they opt out.
-      // If assigned angular, the admin cookie is for a single session
-      showReact ? ADMIN_COOKIE_OPTIONS_WITH_EXPIRY : ADMIN_COOKIE_OPTIONS,
-    )
-  }
-
-  logger.info({
-    message: 'Routing evaluation done for admin',
-    meta: {
-      action: 'routeReact',
-      adminThreshold,
-      showReact,
-      cwd: process.cwd(),
-    },
-  })
-
-  if (showReact) {
-    // react
-    return serveFormReact(/* isPublic= */ false)(req, res, next)
-  } else {
-    // angular
-    return HomeController.home(req, res, next)
-  }
-}
-
-// Note: frontend is expected to refresh after executing this
-export const adminChooseEnvironment: ControllerHandler<
-  SetEnvironmentParams,
-  unknown,
-  unknown,
-  Record<string, string>
-> = (req, res) => {
-  const ui =
-    req.params.ui === UiCookieValues.React
-      ? UiCookieValues.React
-      : UiCookieValues.Angular
-  res.cookie(
-    config.reactMigration.adminCookieName,
-    ui,
-    // When admin chooses to switch environments, we want them to stay on their
-    // chosen environment until the alternative is stable.
-    ADMIN_COOKIE_OPTIONS_WITH_EXPIRY,
-  )
-
-  return res.json({ ui })
-}
-
-// Note: frontend is expected to refresh after executing this
-export const publicChooseEnvironment: ControllerHandler<
-  SetEnvironmentParams,
-  unknown,
-  unknown,
-  Record<string, string>
-> = (req, res) => {
-  const ui =
-    req.params.ui === UiCookieValues.React
-      ? UiCookieValues.React
-      : UiCookieValues.Angular
-  res.cookie(
-    config.reactMigration.respondentCookieName,
-    ui,
-    // When public responded chooses to switch environments, we want them to stay on
-    // their chosen environment until the alternative is stable.
-    RESPONDENT_COOKIE_OPTIONS_WITH_EXPIRY,
-  )
-  return res.json({ ui })
-}
-
-// Redirect to landing after setting the admin cookie
-export const redirectAdminEnvironment: ControllerHandler<
-  SetEnvironmentParams,
-  unknown,
-  unknown,
-  Record<string, string>
-> = (req, res) => {
-  const ui =
-    req.params.ui === UiCookieValues.React
-      ? UiCookieValues.React
-      : UiCookieValues.Angular
-  res.cookie(
-    config.reactMigration.adminCookieName,
-    ui,
-    // When admin chooses to switch environments, we want them to stay on their
-    // chosen environment until the alternative is stable.
-    ADMIN_COOKIE_OPTIONS_WITH_EXPIRY,
-  )
-  return res.redirect('/')
-}
diff --git a/src/app/modules/react-migration/react-migration.routes.ts b/src/app/modules/react-migration/react-migration.routes.ts
deleted file mode 100644
index d6b6fc9349..0000000000
--- a/src/app/modules/react-migration/react-migration.routes.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// TODO #4279: Remove after React rollout is complete
-import { Router } from 'express'
-
-import * as ReactMigrationController from './react-migration.controller'
-
-export const ReactMigrationRouter = Router()
-
-ReactMigrationRouter.get(
-  '/:formId([a-fA-F0-9]{24})',
-  ReactMigrationController.servePublicForm,
-)
-
-ReactMigrationRouter.get('/#!/:formId([a-fA-F0-9]{24})', (req, res) => {
-  res.redirect(`/${req.params.formId}`)
-})
-
-// Redirect to the landing page after setting the admin cookie
-ReactMigrationRouter.get(
-  '/environment/:ui(react|angular)',
-  ReactMigrationController.redirectAdminEnvironment,
-)
-
-ReactMigrationRouter.get('*', ReactMigrationController.serveDefault)
diff --git a/src/app/routes/api/v3/admin/admin.routes.ts b/src/app/routes/api/v3/admin/admin.routes.ts
index bb4e1cdce9..352e965683 100644
--- a/src/app/routes/api/v3/admin/admin.routes.ts
+++ b/src/app/routes/api/v3/admin/admin.routes.ts
@@ -1,16 +1,7 @@
 import { Router } from 'express'
 
-import * as ReactMigrationController from '../../../../modules/react-migration/react-migration.controller'
-
 import { AdminFormsRouter } from './forms'
 
 export const AdminRouter = Router()
 
 AdminRouter.use('/forms', AdminFormsRouter)
-
-// TODO #4279: Remove after React rollout is complete
-// This endpoint doesn't reaaaallly need to be a verified admin to be used
-AdminRouter.get(
-  '/environment/:ui(react|angular)',
-  ReactMigrationController.adminChooseEnvironment,
-)
diff --git a/src/app/routes/api/v3/forms/public-forms.form.routes.ts b/src/app/routes/api/v3/forms/public-forms.form.routes.ts
index b838984b35..e87cf9e443 100644
--- a/src/app/routes/api/v3/forms/public-forms.form.routes.ts
+++ b/src/app/routes/api/v3/forms/public-forms.form.routes.ts
@@ -1,8 +1,6 @@
 import { Router } from 'express'
 
 import * as PublicFormController from '../../../../modules/form/public-form/public-form.controller'
-import { injectFeedbackFormUrl } from '../../../../modules/form/public-form/public-form.middlewares'
-import * as ReactMigrationController from '../../../../modules/react-migration/react-migration.controller'
 
 export const PublicFormsFormRouter = Router()
 
@@ -23,25 +21,3 @@ export const PublicFormsFormRouter = Router()
 PublicFormsFormRouter.route('/:formId([a-fA-F0-9]{24})').get(
   PublicFormController.handleGetPublicForm,
 )
-
-// TODO #4279: Remove after React rollout is complete
-/**
- * Returns the React to Angular switch feedback form to the user
- * @route GET /switchenvfeedback
- * @returns 200 with form when form exists and is public
- * @returns 404 when form is private or form with given ID does not exist
- * @returns 410 when form is archived
- * @returns 500 when database error occurs
- */
-PublicFormsFormRouter.route(`/switchenvfeedback`).get(
-  injectFeedbackFormUrl,
-  PublicFormController.handleGetPublicForm,
-)
-
-/**
- * Switches the environment cookie for a public form
- * @route GET /environment/:ui
- */
-PublicFormsFormRouter.route('/environment/:ui(react|angular)').get(
-  ReactMigrationController.publicChooseEnvironment,
-)
diff --git a/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts b/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts
index af813a291b..8988ad49b4 100644
--- a/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts
+++ b/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts
@@ -1,7 +1,6 @@
 import { Router } from 'express'
 
 import { rateLimitConfig } from '../../../../config/config'
-import { injectFeedbackFormUrl } from '../../../../modules/form/public-form/public-form.middlewares'
 import * as EmailSubmissionController from '../../../../modules/submission/email-submission/email-submission.controller'
 import * as EncryptSubmissionController from '../../../../modules/submission/encrypt-submission/encrypt-submission.controller'
 import { limitRate } from '../../../../utils/limit-rate'
@@ -49,13 +48,3 @@ PublicFormsSubmissionsRouter.route(
   limitRate({ max: rateLimitConfig.submissions }),
   EncryptSubmissionController.handleEncryptedSubmission,
 )
-
-// TODO #4279: Remove after React rollout is complete
-/**
- * Submit the bug report feedback form for React to Angular switch (public)
- */
-PublicFormsSubmissionsRouter.route('/submissions/email/switchenvfeedback').post(
-  limitRate({ max: rateLimitConfig.submissions }),
-  injectFeedbackFormUrl,
-  EmailSubmissionController.handleEmailSubmission,
-)
diff --git a/src/public/main.css b/src/public/main.css
index 093a11d936..9846d5e881 100644
--- a/src/public/main.css
+++ b/src/public/main.css
@@ -23,7 +23,6 @@
 @import './modules/core/css/banner.css';
 @import './modules/core/css/how-it-works.css';
 @import './modules/forms/admin/css/pop-up-modal.css';
-@import './modules/forms/admin/css/react-switch-banner.css';
 @import './modules/forms/admin/css/edit-form.css';
 @import './modules/forms/admin/css/export-button.css';
 @import './modules/forms/admin/css/form-title-input.css';
diff --git a/src/public/main.js b/src/public/main.js
index 63d3daf33c..621daef6fd 100644
--- a/src/public/main.js
+++ b/src/public/main.js
@@ -367,10 +367,6 @@ app.run([
       'modules/forms/admin/componentViews/form-emails-input.client.view.html',
       require('./modules/forms/admin/componentViews/form-emails-input.client.view.html'),
     )
-    $templateCache.put(
-      'modules/forms/admin/componentViews/react-switch-banner.client.view.html',
-      require('./modules/forms/admin/componentViews/react-switch-banner.client.view.html'),
-    )
 
     // Response component views
     $templateCache.put(
diff --git a/src/public/modules/forms/admin/componentViews/react-switch-banner.client.view.html b/src/public/modules/forms/admin/componentViews/react-switch-banner.client.view.html
deleted file mode 100644
index 85ea5079a6..0000000000
--- a/src/public/modules/forms/admin/componentViews/react-switch-banner.client.view.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!-- Switch from AngularJS to React message -->
-<div id="react-switch-banner" class="react-switch-banner-container">
-  <img class="info-icon" src="/public/modules/core/img/info-icon.svg" />
-  <span class="is-text">A new FormSG is now available.&nbsp</span>
-  <div
-    ng-click="vm.adminChooseEnvironment(vm.ui)"
-    class="react-switch-banner-container--link"
-    id="react-switch-banner-link"
-  >
-    Try it here!
-  </div>
-</div>
diff --git a/src/public/modules/forms/admin/components/react-switch-banner.client.component.js b/src/public/modules/forms/admin/components/react-switch-banner.client.component.js
deleted file mode 100644
index b89944e4c7..0000000000
--- a/src/public/modules/forms/admin/components/react-switch-banner.client.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-'use strict'
-
-const AdminService = require('../../../../services/AdminService')
-const { UiCookieValues } = require('../../../../../../shared/types')
-angular.module('core').component('reactSwitchBannerComponent', {
-  templateUrl:
-    'modules/forms/admin/componentViews/react-switch-banner.client.view.html',
-  controller: ['$q', '$window', reactSwitchBannerController],
-  controllerAs: 'vm',
-})
-
-function reactSwitchBannerController($q, $window) {
-  const vm = this
-  vm.ui = UiCookieValues.React
-
-  vm.adminChooseEnvironment = (ui) => {
-    return (
-      $q
-        .when(AdminService.adminChooseEnvironment(ui))
-        // Navigate to the React dashboard page after changing the environment cookie
-        .then(() => {
-          $window.location.assign('/dashboard')
-        })
-        .catch((error) => {
-          console.error('switch to react failed:', error)
-        })
-    )
-  }
-}
diff --git a/src/public/modules/forms/admin/css/react-switch-banner.css b/src/public/modules/forms/admin/css/react-switch-banner.css
deleted file mode 100644
index 5ae36859c5..0000000000
--- a/src/public/modules/forms/admin/css/react-switch-banner.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.react-switch-banner-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-top: 20px;
-  padding: 14px 20px;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: left;
-  line-height: 24px;
-  font-weight: normal;
-  overflow: hidden;
-  font-size: 18px;
-  z-index: 999;
-  width: 100%;
-  background-color: #e9ecf5;
-}
-
-.react-switch-banner-container .info-icon {
-  padding-right: 17px;
-}
-
-.react-switch-banner-container .is-text {
-  color: #23489b;
-}
-
-.react-switch-banner-container .react-switch-banner-container--link {
-  color: #23489b;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.react-switch-banner-container
-  .is-text
-  .react-switch-banner-container--link:focus,
-.react-switch-banner-container
-  .is-text
-  .react-switch-banner-container--link:active,
-.react-switch-banner-container
-  .is-text
-  .react-switch-banner-container--link:hover {
-  color: #3b4e9a;
-}
diff --git a/src/public/modules/forms/admin/views/list-forms.client.view.html b/src/public/modules/forms/admin/views/list-forms.client.view.html
index c0fa4e6a8b..0bf7be60b9 100644
--- a/src/public/modules/forms/admin/views/list-forms.client.view.html
+++ b/src/public/modules/forms/admin/views/list-forms.client.view.html
@@ -5,9 +5,6 @@
   <div id="list-tab">
     <section data-ng-init="vm.listForms()">
       <div id="list-form" class="container" ng-if="vm.user">
-        <react-switch-banner-component
-          ng-if="vm.reactAdminRollout > 0"
-        ></react-switch-banner-component>
         <!-- When forms have already been created -->
         <div id="list-form-exist" ng-if="vm.myforms.length > 0">
           <div
diff --git a/src/public/services/AdminService.ts b/src/public/services/AdminService.ts
deleted file mode 100644
index 03f6ee14eb..0000000000
--- a/src/public/services/AdminService.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import axios from 'axios'
-import { UiCookieValues } from 'shared/types'
-
-// endpoint exported for testing
-export const ADMIN_ENDPOINT = '/api/v3/admin'
-
-/**
- * Switch environments by changing the adminCookieName cookie
- * @returns the chosen environment: 'react' or 'angular'.
- */
-export const adminChooseEnvironment = async (
-  ui: UiCookieValues,
-): Promise<UiCookieValues> => {
-  return axios
-    .get<UiCookieValues>(`${ADMIN_ENDPOINT}/environment/${ui}`)
-    .then(({ data }) => data)
-}
diff --git a/src/public/services/PublicFormService.ts b/src/public/services/PublicFormService.ts
index 69e63214c2..3c7eae8bef 100644
--- a/src/public/services/PublicFormService.ts
+++ b/src/public/services/PublicFormService.ts
@@ -91,50 +91,3 @@ export const getPublicFormView = async (
     .get<PublicFormViewDto>(`${PUBLIC_FORMS_ENDPOINT}/${formId}`)
     .then(({ data }) => data)
 }
-
-// TODO #4279: Remove after React rollout is complete
-/**
- * Gets public view of the react to angular bug report feedback form
- * @returns Public view of form, with additional identify information
- */
-export const getReactToAngularFeedbackFormView =
-  async (): Promise<PublicFormViewDto> => {
-    return axios
-      .get<PublicFormViewDto>(`${PUBLIC_FORMS_ENDPOINT}/switchenvfeedback`)
-      .then(({ data }) => data)
-  }
-
-/**
- * Submits the bug report feedback form for React to Angular switch
- * @param content content of submission
- * @param attachments any attachments included in submission
- * @param captchaResponse string if captcha to be included, defaults to null
- *
- * @returns SubmissionResponseDto if successful, else SubmissionErrorDto on error
- */
-export const submitSwitchEnvFeedbackForm = async ({
-  content,
-  attachments,
-  captchaResponse = null,
-}: {
-  content: EmailModeSubmissionContentDto
-  attachments?: Record<string, File>
-  captchaResponse?: string | null
-}): Promise<SubmissionResponseDto> => {
-  const formData = createEmailSubmissionFormData({
-    content,
-    attachments,
-  })
-
-  return axios
-    .post<SubmissionResponseDto>(
-      `${PUBLIC_FORMS_ENDPOINT}/submissions/email/switchenvfeedback`,
-      formData,
-      {
-        params: {
-          captchaResponse: String(captchaResponse),
-        },
-      },
-    )
-    .then(({ data }) => data)
-}
diff --git a/src/public/services/__tests__/AdminService.test.ts b/src/public/services/__tests__/AdminService.test.ts
deleted file mode 100644
index cd2feac8d2..0000000000
--- a/src/public/services/__tests__/AdminService.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import MockAxios from 'jest-mock-axios'
-import { UiCookieValues } from 'shared/types'
-
-import { ADMIN_ENDPOINT, adminChooseEnvironment } from '../AdminService'
-
-jest.mock('axios', () => MockAxios)
-
-describe('AdminService', () => {
-  describe('adminChooseEnvironment', () => {
-    const MOCK_UI = UiCookieValues.React
-    const MOCK_RESPONSE = UiCookieValues.React
-
-    it('should call the api correctly', async () => {
-      //Arrange
-      MockAxios.get.mockResolvedValueOnce({ data: MOCK_RESPONSE })
-
-      // Act
-      const actual = await adminChooseEnvironment(MOCK_UI)
-
-      // Assert
-      expect(MockAxios.get).toHaveBeenCalledWith(
-        `${ADMIN_ENDPOINT}/environment/${MOCK_UI}`,
-      )
-      expect(actual).toEqual(MOCK_RESPONSE)
-    })
-  })
-})
diff --git a/src/types/config.ts b/src/types/config.ts
index 79cd943ba9..c814f2e346 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -55,18 +55,6 @@ export type RateLimitConfig = {
 }
 
 export type ReactMigrationConfig = {
-  respondentRolloutEmail: number
-  respondentRolloutStorage: number
-  adminRollout: number
-  respondentCookieName: string
-  adminCookieNameOld: string
-  adminCookieName: string
-  qaCookieName: string
-  adminSwitchEnvFeedbackFormId: string
-  respondentSwitchEnvFeedbackFormId: string
-  angularPhaseOutDate: string
-  removeAdminInfoboxThreshold: number
-  removeRespondentsInfoboxThreshold: number
   // TODO (#5826): Toggle to use fetch for submissions instead of axios. Remove once network error is resolved
   useFetchForSubmissions: boolean
 }
@@ -130,10 +118,6 @@ export interface ICompulsoryVarsSchema {
     logoS3Bucket: string
     attachmentS3Bucket: string
   }
-  reactMigration: {
-    adminSwitchEnvFeedbackFormId: string
-    respondentSwitchEnvFeedbackFormId: string
-  }
 }
 
 export interface ISgidVarsSchema {
@@ -190,16 +174,6 @@ export interface IOptionalVarsSchema {
     downloadPaymentReceipt: number
   }
   reactMigration: {
-    respondentRolloutEmail: number
-    respondentRolloutStorage: number
-    adminRollout: number
-    respondentCookieName: string
-    adminCookieNameOld: string
-    adminCookieName: string
-    qaCookieName: string
-    angularPhaseOutDate: string
-    removeAdminInfoboxThreshold: number
-    removeRespondentsInfoboxThreshold: number
     // TODO (#5826): Toggle to use fetch for submissions instead of axios. Remove once network error is resolved
     useFetchForSubmissions: boolean
   }

From f204a69d9ef91925cabbb1b911b352417f4a61c3 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 25 Apr 2023 14:22:15 +0800
Subject: [PATCH 02/11] chore: remove more conditional code in angular, backend
 types

---
 shared/types/env.ts                           | 29 -------------------
 shared/types/index.ts                         |  1 -
 src/public/main.js                            |  1 -
 .../list-forms.client.controller.js           |  2 --
 .../submit-form.client.controller.js          | 12 --------
 5 files changed, 45 deletions(-)
 delete mode 100644 shared/types/env.ts

diff --git a/shared/types/env.ts b/shared/types/env.ts
deleted file mode 100644
index b20cbf252f..0000000000
--- a/shared/types/env.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FormResponseMode, FormAuthType } from './form'
-
-export enum UiCookieValues {
-  React = 'react',
-  Angular = 'angular',
-}
-
-// TODO #4279: Remove after React rollout is complete
-export interface PublicFeedbackFormDto {
-  [key: string]: any
-  url: string
-  feedback: string
-  email: string
-  rumSessionId: string
-  userAgent: string
-  attachmentType: string[]
-  othersInput: string
-  responseMode: FormResponseMode
-  authType: FormAuthType
-}
-
-export interface AdminFeedbackFormDto {
-  [key: string]: string
-  url: string
-  feedback: string
-  email: string
-  rumSessionId: string
-  rating: string
-}
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 7441146342..882ea8e96a 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -4,7 +4,6 @@ export * from './agency'
 export * from './analytics'
 export * from './billing'
 export * from './core'
-export * from './env'
 export * from './generic'
 export * from './response'
 export * from './submission'
diff --git a/src/public/main.js b/src/public/main.js
index 621daef6fd..8b8341b9fc 100644
--- a/src/public/main.js
+++ b/src/public/main.js
@@ -193,7 +193,6 @@ require('./modules/forms/admin/components/edit-logic.client.component.js')
 require('./modules/forms/admin/components/export-button.client.component.js')
 require('./modules/forms/admin/components/form-title-input.client.component.js')
 require('./modules/forms/admin/components/form-emails-input.client.component.js')
-require('./modules/forms/admin/components/react-switch-banner.client.component.js')
 
 // response components
 require('./modules/forms/admin/components/response-components/response.client.component.js')
diff --git a/src/public/modules/forms/admin/controllers/list-forms.client.controller.js b/src/public/modules/forms/admin/controllers/list-forms.client.controller.js
index db8655fe7d..0ae05f1867 100644
--- a/src/public/modules/forms/admin/controllers/list-forms.client.controller.js
+++ b/src/public/modules/forms/admin/controllers/list-forms.client.controller.js
@@ -36,8 +36,6 @@ function ListFormsController(
 
   vm.bannerContent = $window.siteBannerContent || $window.adminBannerContent
 
-  // Admin React rollout percentage
-  vm.reactAdminRollout = $window.reactMigrationAdminRollout
   // Hidden buttons on forms that appear after clicking more
   vm.showFormBtns = []
   // Duplicated form outline on newly dup forms
diff --git a/src/public/modules/forms/base/controllers/submit-form.client.controller.js b/src/public/modules/forms/base/controllers/submit-form.client.controller.js
index aec87583af..d78b8c394a 100644
--- a/src/public/modules/forms/base/controllers/submit-form.client.controller.js
+++ b/src/public/modules/forms/base/controllers/submit-form.client.controller.js
@@ -31,18 +31,6 @@ function SubmitFormController(
   const vm = this
   const form = FormData.form
 
-  // React migration checker - ONLY for plain form URLs (no suffixes like /template or /preview)
-  if (/^\/[0-9a-fA-F]{24}\/?$/.test($location.path())) {
-    const respondentCookie = $cookies.get(
-      $window.reactMigrationRespondentCookieName,
-    )
-
-    if (respondentCookie === 'react') {
-      $window.location.assign(`/${form._id}`)
-      return
-    }
-  }
-
   // The form attribute of the FormData object contains the form fields, logic etc
   vm.myform = form
 

From 0961c4dd3c7948c7f1892e1e2b517e15e9364bbd Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 25 Apr 2023 14:53:20 +0800
Subject: [PATCH 03/11] chore: remove angular from express routing rules!

---
 src/app/loaders/express/index.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app/loaders/express/index.ts b/src/app/loaders/express/index.ts
index 81ff4588bb..e6c358d2e0 100644
--- a/src/app/loaders/express/index.ts
+++ b/src/app/loaders/express/index.ts
@@ -12,7 +12,6 @@ import { ExamplesRouter } from '../../modules/examples/examples.routes'
 import { AdminFormsRouter } from '../../modules/form/admin-form/admin-form.routes'
 import { PublicFormRouter } from '../../modules/form/public-form/public-form.routes'
 import { FrontendRouter } from '../../modules/frontend/frontend.routes'
-import * as HomeController from '../../modules/home/home.controller'
 import { MYINFO_ROUTER_PREFIX } from '../../modules/myinfo/myinfo.constants'
 import { MyInfoRouter } from '../../modules/myinfo/myinfo.routes'
 import { SgidRouter } from '../../modules/sgid/sgid.routes'
@@ -136,18 +135,15 @@ const loadExpressApp = async (connection: Connection) => {
   // serve static assets. `dist/frontend` contains the root files as well as a `/static` folder
   // express.static calls next() if the file is not found
   app.use(express.static(path.resolve('dist/frontend'), { index: false }))
-  app.use('/public', express.static(path.resolve('dist/angularjs')))
 
   // If requests for known static asset patterns were not served by
   // the static handlers above, middleware should try to fetch from s3 static bucket or else return 404s
-  app.get(/^\/(public|static)\//, catchNonExistentStaticRoutesMiddleware)
+  app.get(/^\/static\//, catchNonExistentStaticRoutesMiddleware)
 
   // Requests for root files (e.g. /robots.txt or /favicon.ico) that were
   // not served statically above will also return 404
   app.get(/^\/[^/]+\.[a-z]+$/, catchNonExistentStaticRoutesMiddleware)
 
-  app.get('/old/', HomeController.home)
-
   app.use(sentryMiddlewares())
   app.use(errorHandlerMiddlewares())
 

From 323fb9793da3969191416c4b3c38234e832ae420 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 25 Apr 2023 16:02:45 +0800
Subject: [PATCH 04/11] chore: add back public route

---
 src/app/loaders/express/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/loaders/express/index.ts b/src/app/loaders/express/index.ts
index e6c358d2e0..b0d78ac4dc 100644
--- a/src/app/loaders/express/index.ts
+++ b/src/app/loaders/express/index.ts
@@ -135,10 +135,11 @@ const loadExpressApp = async (connection: Connection) => {
   // serve static assets. `dist/frontend` contains the root files as well as a `/static` folder
   // express.static calls next() if the file is not found
   app.use(express.static(path.resolve('dist/frontend'), { index: false }))
+  app.use('/public', express.static(path.resolve('dist/angularjs')))
 
   // If requests for known static asset patterns were not served by
   // the static handlers above, middleware should try to fetch from s3 static bucket or else return 404s
-  app.get(/^\/static\//, catchNonExistentStaticRoutesMiddleware)
+  app.get(/^\/(public|static)\//, catchNonExistentStaticRoutesMiddleware)
 
   // Requests for root files (e.g. /robots.txt or /favicon.ico) that were
   // not served statically above will also return 404

From f654833ce9ce672d6d4b427ceb9e64845000dcd4 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 25 Apr 2023 16:11:06 +0800
Subject: [PATCH 05/11] chore: remove angular public route

---
 src/app/loaders/express/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/loaders/express/index.ts b/src/app/loaders/express/index.ts
index b0d78ac4dc..92db45b309 100644
--- a/src/app/loaders/express/index.ts
+++ b/src/app/loaders/express/index.ts
@@ -135,7 +135,6 @@ const loadExpressApp = async (connection: Connection) => {
   // serve static assets. `dist/frontend` contains the root files as well as a `/static` folder
   // express.static calls next() if the file is not found
   app.use(express.static(path.resolve('dist/frontend'), { index: false }))
-  app.use('/public', express.static(path.resolve('dist/angularjs')))
 
   // If requests for known static asset patterns were not served by
   // the static handlers above, middleware should try to fetch from s3 static bucket or else return 404s

From a7f2b2d662fb92703a6d024b871df1c4be1b7f88 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Wed, 26 Apr 2023 22:21:21 +0800
Subject: [PATCH 06/11] chore: add react router

---
 src/app/loaders/express/index.ts              |   7 +-
 .../frontend-new/frontend.controller.ts       | 107 ++++++++++++++++++
 .../modules/frontend-new/frontend.routes.ts   |  12 ++
 3 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 src/app/modules/frontend-new/frontend.controller.ts
 create mode 100644 src/app/modules/frontend-new/frontend.routes.ts

diff --git a/src/app/loaders/express/index.ts b/src/app/loaders/express/index.ts
index 92db45b309..8562fb1dca 100644
--- a/src/app/loaders/express/index.ts
+++ b/src/app/loaders/express/index.ts
@@ -11,7 +11,8 @@ import { AuthRouter } from '../../modules/auth/auth.routes'
 import { ExamplesRouter } from '../../modules/examples/examples.routes'
 import { AdminFormsRouter } from '../../modules/form/admin-form/admin-form.routes'
 import { PublicFormRouter } from '../../modules/form/public-form/public-form.routes'
-import { FrontendRouter } from '../../modules/frontend/frontend.routes'
+import { FrontendRouter as OldFrontendRouter } from '../../modules/frontend/frontend.routes'
+import { FrontendRouter } from '../../modules/frontend-new/frontend.routes'
 import { MYINFO_ROUTER_PREFIX } from '../../modules/myinfo/myinfo.constants'
 import { MyInfoRouter } from '../../modules/myinfo/myinfo.routes'
 import { SgidRouter } from '../../modules/sgid/sgid.routes'
@@ -112,7 +113,7 @@ const loadExpressApp = async (connection: Connection) => {
   app.use(IntranetMiddleware.logIntranetUsage)
 
   // Deprecated routes
-  app.use('/frontend', FrontendRouter)
+  app.use('/frontend', OldFrontendRouter)
   app.use('/auth', AuthRouter)
   app.use('/transaction', VfnRouter)
   app.use('/examples', ExamplesRouter)
@@ -144,6 +145,8 @@ const loadExpressApp = async (connection: Connection) => {
   // not served statically above will also return 404
   app.get(/^\/[^/]+\.[a-z]+$/, catchNonExistentStaticRoutesMiddleware)
 
+  app.use('/', FrontendRouter)
+
   app.use(sentryMiddlewares())
   app.use(errorHandlerMiddlewares())
 
diff --git a/src/app/modules/frontend-new/frontend.controller.ts b/src/app/modules/frontend-new/frontend.controller.ts
new file mode 100644
index 0000000000..7fd4e8427a
--- /dev/null
+++ b/src/app/modules/frontend-new/frontend.controller.ts
@@ -0,0 +1,107 @@
+import { readFileSync } from 'fs'
+import { escape } from 'html-escaper'
+import { get } from 'lodash'
+import path from 'path'
+
+import { FormStatus } from '../../../../shared/types'
+import { createLoggerWithLabel } from '../../config/logger'
+import { ControllerHandler } from '../core/core.types'
+import * as FormService from '../form/form.service'
+import { createMetatags } from '../form/public-form/public-form.service'
+import { RedirectParams } from '../form/public-form/public-form.types'
+
+const logger = createLoggerWithLabel(module)
+
+const reactFrontendPath = path.resolve('dist/frontend')
+const reactHtml = readFileSync(path.join(reactFrontendPath, 'index.html'), {
+  encoding: 'utf8',
+})
+
+type MetaTags = {
+  title: string
+  description: string
+  image: string
+}
+const replaceWithMetaTags = ({
+  title,
+  description,
+  image,
+}: MetaTags): string => {
+  return reactHtml
+    .replace(/(__OG_TITLE__)/g, escape(title))
+    .replace(/(__OG_DESCRIPTION__)/g, escape(description))
+    .replace(/(__OG_IMAGE__)/g, escape(image))
+}
+
+const serveFormReact =
+  (isPublicForm: boolean): ControllerHandler =>
+  async (req, res) => {
+    let tags: MetaTags = {
+      title: 'FormSG',
+      description: 'Trusted form manager of the Singapore Government',
+      image: 'og-img-metatag-nonpublicform.png',
+    }
+
+    if (isPublicForm && get(req.params, 'formId')) {
+      tags = await getPublicFormMetaTags(get(req.params, 'formId') ?? '')
+    }
+
+    const reactHtmlWithMetaTags = replaceWithMetaTags(tags)
+
+    return (
+      res
+        // Prevent index.html from being cached by browsers.
+        .setHeader('Cache-Control', 'no-cache')
+        .send(reactHtmlWithMetaTags)
+    )
+  }
+
+const getPublicFormMetaTags = async (formId: string): Promise<MetaTags> => {
+  const createMetatagsResult = await createMetatags({
+    formId,
+  })
+
+  if (createMetatagsResult.isErr()) {
+    logger.error({
+      message: 'Error fetching metatags',
+      meta: {
+        action: 'getPublicFormMetaTags',
+        formId,
+      },
+      error: createMetatagsResult.error,
+    })
+    return {
+      title: 'FormSG',
+      description: '',
+      image: 'og-img-metatag-publicform.png',
+    }
+  } else {
+    const { title, description } = createMetatagsResult.value
+    return {
+      title: title,
+      description: description ?? '',
+      image: 'og-img-metatag-publicform.png',
+    }
+  }
+}
+
+export const servePublicForm: ControllerHandler<
+  RedirectParams,
+  unknown,
+  unknown,
+  Record<string, string>
+> = async (req, res, next) => {
+  const formResult = await FormService.retrieveFormKeysById(req.params.formId, [
+    'responseMode',
+    'status',
+  ])
+
+  const isPublicForm =
+    !formResult.isErr() && formResult.value.status === FormStatus.Public
+
+  return serveFormReact(isPublicForm)(req, res, next)
+}
+
+export const serveDefault: ControllerHandler = (req, res, next) => {
+  return serveFormReact(/* isPublic= */ false)(req, res, next)
+}
diff --git a/src/app/modules/frontend-new/frontend.routes.ts b/src/app/modules/frontend-new/frontend.routes.ts
new file mode 100644
index 0000000000..743b6973ec
--- /dev/null
+++ b/src/app/modules/frontend-new/frontend.routes.ts
@@ -0,0 +1,12 @@
+import { Router } from 'express'
+
+import * as FrontendController from './frontend.controller'
+
+export const FrontendRouter = Router()
+
+FrontendRouter.get(
+  '/:formId([a-fA-F0-9]{24})',
+  FrontendController.servePublicForm,
+)
+
+FrontendRouter.get('*', FrontendController.serveDefault)

From fc4b7c5a2449d385b78d327ec6e9f231563760bc Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Mon, 15 May 2023 17:14:01 +0800
Subject: [PATCH 07/11] chore: delete home folder, rename frontend to
 frontend-old and frontend-new to frontend

---
 src/app/loaders/express/index.ts              |   4 +-
 .../frontend-new/frontend.controller.ts       | 107 --------
 .../modules/frontend-new/frontend.routes.ts   |  12 -
 .../__tests__/frontend.controller.spec.ts     |   0
 .../frontend-old/frontend.controller.ts       | 172 +++++++++++++
 .../frontend.middlewares.ts                   |   0
 .../modules/frontend-old/frontend.routes.ts   |  47 ++++
 .../frontend.service.ts                       |   0
 .../modules/frontend/frontend.controller.ts   | 235 +++++++-----------
 src/app/modules/frontend/frontend.routes.ts   |  43 +---
 .../home/__tests__/home.controller.spec.ts    |  19 --
 src/app/modules/home/home.controller.ts       |  10 -
 src/app/modules/home/home.routes.ts           |   7 -
 src/app/routes/api/v3/client/client.routes.ts |   2 +-
 14 files changed, 311 insertions(+), 347 deletions(-)
 delete mode 100644 src/app/modules/frontend-new/frontend.controller.ts
 delete mode 100644 src/app/modules/frontend-new/frontend.routes.ts
 rename src/app/modules/{frontend => frontend-old}/__tests__/frontend.controller.spec.ts (100%)
 create mode 100644 src/app/modules/frontend-old/frontend.controller.ts
 rename src/app/modules/{frontend => frontend-old}/frontend.middlewares.ts (100%)
 create mode 100644 src/app/modules/frontend-old/frontend.routes.ts
 rename src/app/modules/{frontend => frontend-old}/frontend.service.ts (100%)
 delete mode 100644 src/app/modules/home/__tests__/home.controller.spec.ts
 delete mode 100644 src/app/modules/home/home.controller.ts
 delete mode 100644 src/app/modules/home/home.routes.ts

diff --git a/src/app/loaders/express/index.ts b/src/app/loaders/express/index.ts
index 8562fb1dca..ab8b8bbfe9 100644
--- a/src/app/loaders/express/index.ts
+++ b/src/app/loaders/express/index.ts
@@ -11,8 +11,8 @@ import { AuthRouter } from '../../modules/auth/auth.routes'
 import { ExamplesRouter } from '../../modules/examples/examples.routes'
 import { AdminFormsRouter } from '../../modules/form/admin-form/admin-form.routes'
 import { PublicFormRouter } from '../../modules/form/public-form/public-form.routes'
-import { FrontendRouter as OldFrontendRouter } from '../../modules/frontend/frontend.routes'
-import { FrontendRouter } from '../../modules/frontend-new/frontend.routes'
+import { FrontendRouter } from '../../modules/frontend/frontend.routes'
+import { FrontendRouter as OldFrontendRouter } from '../../modules/frontend-old/frontend.routes'
 import { MYINFO_ROUTER_PREFIX } from '../../modules/myinfo/myinfo.constants'
 import { MyInfoRouter } from '../../modules/myinfo/myinfo.routes'
 import { SgidRouter } from '../../modules/sgid/sgid.routes'
diff --git a/src/app/modules/frontend-new/frontend.controller.ts b/src/app/modules/frontend-new/frontend.controller.ts
deleted file mode 100644
index 7fd4e8427a..0000000000
--- a/src/app/modules/frontend-new/frontend.controller.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { readFileSync } from 'fs'
-import { escape } from 'html-escaper'
-import { get } from 'lodash'
-import path from 'path'
-
-import { FormStatus } from '../../../../shared/types'
-import { createLoggerWithLabel } from '../../config/logger'
-import { ControllerHandler } from '../core/core.types'
-import * as FormService from '../form/form.service'
-import { createMetatags } from '../form/public-form/public-form.service'
-import { RedirectParams } from '../form/public-form/public-form.types'
-
-const logger = createLoggerWithLabel(module)
-
-const reactFrontendPath = path.resolve('dist/frontend')
-const reactHtml = readFileSync(path.join(reactFrontendPath, 'index.html'), {
-  encoding: 'utf8',
-})
-
-type MetaTags = {
-  title: string
-  description: string
-  image: string
-}
-const replaceWithMetaTags = ({
-  title,
-  description,
-  image,
-}: MetaTags): string => {
-  return reactHtml
-    .replace(/(__OG_TITLE__)/g, escape(title))
-    .replace(/(__OG_DESCRIPTION__)/g, escape(description))
-    .replace(/(__OG_IMAGE__)/g, escape(image))
-}
-
-const serveFormReact =
-  (isPublicForm: boolean): ControllerHandler =>
-  async (req, res) => {
-    let tags: MetaTags = {
-      title: 'FormSG',
-      description: 'Trusted form manager of the Singapore Government',
-      image: 'og-img-metatag-nonpublicform.png',
-    }
-
-    if (isPublicForm && get(req.params, 'formId')) {
-      tags = await getPublicFormMetaTags(get(req.params, 'formId') ?? '')
-    }
-
-    const reactHtmlWithMetaTags = replaceWithMetaTags(tags)
-
-    return (
-      res
-        // Prevent index.html from being cached by browsers.
-        .setHeader('Cache-Control', 'no-cache')
-        .send(reactHtmlWithMetaTags)
-    )
-  }
-
-const getPublicFormMetaTags = async (formId: string): Promise<MetaTags> => {
-  const createMetatagsResult = await createMetatags({
-    formId,
-  })
-
-  if (createMetatagsResult.isErr()) {
-    logger.error({
-      message: 'Error fetching metatags',
-      meta: {
-        action: 'getPublicFormMetaTags',
-        formId,
-      },
-      error: createMetatagsResult.error,
-    })
-    return {
-      title: 'FormSG',
-      description: '',
-      image: 'og-img-metatag-publicform.png',
-    }
-  } else {
-    const { title, description } = createMetatagsResult.value
-    return {
-      title: title,
-      description: description ?? '',
-      image: 'og-img-metatag-publicform.png',
-    }
-  }
-}
-
-export const servePublicForm: ControllerHandler<
-  RedirectParams,
-  unknown,
-  unknown,
-  Record<string, string>
-> = async (req, res, next) => {
-  const formResult = await FormService.retrieveFormKeysById(req.params.formId, [
-    'responseMode',
-    'status',
-  ])
-
-  const isPublicForm =
-    !formResult.isErr() && formResult.value.status === FormStatus.Public
-
-  return serveFormReact(isPublicForm)(req, res, next)
-}
-
-export const serveDefault: ControllerHandler = (req, res, next) => {
-  return serveFormReact(/* isPublic= */ false)(req, res, next)
-}
diff --git a/src/app/modules/frontend-new/frontend.routes.ts b/src/app/modules/frontend-new/frontend.routes.ts
deleted file mode 100644
index 743b6973ec..0000000000
--- a/src/app/modules/frontend-new/frontend.routes.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Router } from 'express'
-
-import * as FrontendController from './frontend.controller'
-
-export const FrontendRouter = Router()
-
-FrontendRouter.get(
-  '/:formId([a-fA-F0-9]{24})',
-  FrontendController.servePublicForm,
-)
-
-FrontendRouter.get('*', FrontendController.serveDefault)
diff --git a/src/app/modules/frontend/__tests__/frontend.controller.spec.ts b/src/app/modules/frontend-old/__tests__/frontend.controller.spec.ts
similarity index 100%
rename from src/app/modules/frontend/__tests__/frontend.controller.spec.ts
rename to src/app/modules/frontend-old/__tests__/frontend.controller.spec.ts
diff --git a/src/app/modules/frontend-old/frontend.controller.ts b/src/app/modules/frontend-old/frontend.controller.ts
new file mode 100644
index 0000000000..cb2165cdbe
--- /dev/null
+++ b/src/app/modules/frontend-old/frontend.controller.ts
@@ -0,0 +1,172 @@
+import ejs from 'ejs'
+import { StatusCodes } from 'http-status-codes'
+
+import { ClientEnvVars } from '../../../../shared/types/core'
+import { createLoggerWithLabel } from '../../config/logger'
+import { createReqMeta } from '../../utils/request'
+import { ControllerHandler } from '../core/core.types'
+
+import { validateGenerateRedirectParams } from './frontend.middlewares'
+import { getClientEnvVars } from './frontend.service'
+
+const logger = createLoggerWithLabel(module)
+
+/**
+ * Handler for GET /frontend/datalayer endpoint.
+ * @param req - Express request object
+ * @param res - Express response object
+ * @returns Templated Javascript code for the frontend to initialise Google Tag Manager
+ */
+export const addGoogleAnalyticsData: ControllerHandler<
+  unknown,
+  string | { message: string }
+> = (req, res) => {
+  const js = `
+    window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '<%= GATrackingID%>', {
+        'send_page_view': false,
+        'app_name': '<%= appName%>',
+        'cookie_flags': 'samesite=none;secure',
+      });
+    `
+  try {
+    const ejsRendered = ejs.render(js, req.app.locals)
+    return res.type('text/javascript').status(StatusCodes.OK).send(ejsRendered)
+  } catch (err) {
+    logger.error({
+      message: 'Error returning datalayer',
+      meta: {
+        action: 'datalayer',
+        ...createReqMeta(req),
+      },
+      error: err,
+    })
+    return res.status(StatusCodes.BAD_REQUEST).json({
+      message: 'There was an unexpected error. Please refresh and try again.',
+    })
+  }
+}
+
+/**
+ * Handler for GET /frontend/environment endpoint.
+ * @param req - Express request object
+ * @param res - Express response object
+ * @returns Templated Javascript code with environment variables for the frontend
+ */
+export const addEnvVarData: ControllerHandler<unknown, { message: string }> = (
+  req,
+  res,
+) => {
+  try {
+    return res
+      .type('text/javascript')
+      .status(StatusCodes.OK)
+      .send(req.app.locals.environment)
+  } catch (err) {
+    logger.error({
+      message: 'Error returning environment',
+      meta: {
+        action: 'environment',
+        ...createReqMeta(req),
+      },
+      error: err,
+    })
+    return res.status(StatusCodes.BAD_REQUEST).json({
+      message: 'There was an unexpected error. Please refresh and try again.',
+    })
+  }
+}
+
+/**
+ * Handler for GET /frontend/env endpoint.
+ * @returns the environment variables needed to hydrate the frontend.
+ */
+export const handleGetEnvironment: ControllerHandler<never, ClientEnvVars> = (
+  _req,
+  res,
+) => {
+  return res.json(getClientEnvVars())
+}
+
+/**
+ * Handler for GET /frontend/redirect endpoint.
+ * @param req - Express request object
+ * @param res - Express response object
+ * @returns Templated Javascript code for the frontend that redirects to specific form url
+ */
+export const _generateRedirectUrl: ControllerHandler<
+  unknown,
+  string | { message: string },
+  unknown,
+  { redirectPath: string }
+> = (req, res) => {
+  const js = `
+    // Update hash to match form id
+    window.location.hash = "#!/<%= redirectPath%>"
+    // Change url from form.gov.sg/123#!123 to form.gov.sg/#!/123
+    window.history.replaceState("","", "/#!/<%= redirectPath%>")
+  `
+  // If there are multiple query params, '&' is html-encoded as '&amp;', which is not valid URI
+  // Prefer to replace just '&' instead of using <%- to output unescaped values into the template
+  // As this could potentially introduce security vulnerability
+  // See https://ejs.co/#docs for tags
+  try {
+    const ejsRendered = ejs.render(js, req.query).replace(/&amp;/g, '&')
+    return res.type('text/javascript').status(StatusCodes.OK).send(ejsRendered)
+  } catch (err) {
+    logger.error({
+      message: 'Error returning redirectLayer',
+      meta: {
+        action: 'redirectlayer',
+        ...createReqMeta(req),
+      },
+      error: err,
+    })
+    return res.status(StatusCodes.BAD_REQUEST).json({
+      message: 'There was an unexpected error. Please refresh and try again.',
+    })
+  }
+}
+
+export const generateRedirectUrl = [
+  validateGenerateRedirectParams,
+  _generateRedirectUrl,
+] as ControllerHandler[]
+
+// Duplicated here since the feature manager is being deprecated.
+// TODO (#2147): delete this.
+enum FeatureNames {
+  Captcha = 'captcha',
+  GoogleAnalytics = 'google-analytics',
+  Sentry = 'sentry',
+  Sms = 'sms',
+  SpcpMyInfo = 'spcp-myinfo',
+  VerifiedFields = 'verified-fields',
+  WebhookVerifiedContent = 'webhook-verified-content',
+}
+
+/**
+ * Handler for GET /frontend/features endpoint.
+ * @param _req - Express request object
+ * @param res - Express response object
+ * @returns Current featureManager states
+ * @deprecated as the feature manager has been deprecated. This endpoint
+ * now hardcodes the feature states to support old clients.
+ * TODO (#2147): delete this
+ */
+export const showFeaturesStates: ControllerHandler<
+  unknown,
+  Record<FeatureNames, boolean>
+> = (_req, res) => {
+  return res.json({
+    [FeatureNames.Captcha]: true,
+    [FeatureNames.Sms]: true,
+    [FeatureNames.SpcpMyInfo]: true,
+    [FeatureNames.VerifiedFields]: true,
+    [FeatureNames.GoogleAnalytics]: true,
+    [FeatureNames.WebhookVerifiedContent]: true,
+    [FeatureNames.Sentry]: true,
+  })
+}
diff --git a/src/app/modules/frontend/frontend.middlewares.ts b/src/app/modules/frontend-old/frontend.middlewares.ts
similarity index 100%
rename from src/app/modules/frontend/frontend.middlewares.ts
rename to src/app/modules/frontend-old/frontend.middlewares.ts
diff --git a/src/app/modules/frontend-old/frontend.routes.ts b/src/app/modules/frontend-old/frontend.routes.ts
new file mode 100644
index 0000000000..7f97568823
--- /dev/null
+++ b/src/app/modules/frontend-old/frontend.routes.ts
@@ -0,0 +1,47 @@
+import { Router } from 'express'
+
+import * as FrontendServerController from './frontend.controller'
+
+/** @deprecated use client router in src/app/routes/api/v3/client/client.routes.ts instead.  */
+export const FrontendRouter = Router()
+
+/**
+ * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
+ * Generate the templated Javascript code for the frontend to initialise Google Tag Manager
+ * Code depends on whether googleAnalyticsFeature.isEnabled
+ * @route GET /frontend/datalayer
+ * @return 200 when code generation is successful
+ * @return 400 when code generation fails
+ */
+FrontendRouter.get(
+  '/datalayer',
+  FrontendServerController.addGoogleAnalyticsData,
+)
+
+/**
+ * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
+ * Generate the templated Javascript code with environment variables for the frontend
+ * @route GET /frontend/environment
+ * @return 200 when code generation is successful
+ * @return 400 when code generation fails
+ */
+FrontendRouter.get('/environment', FrontendServerController.addEnvVarData)
+
+/**
+ * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
+ * Generate a json of current activated features
+ * @route GET /frontend/features
+ * @return json with featureManager.states
+ * @deprecated
+ * TODO (#2147): delete this
+ */
+FrontendRouter.get('/features', FrontendServerController.showFeaturesStates)
+
+/**
+ * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
+ * Generate the javascript code to redirect to the correct url
+ * @route GET /frontend/redirect
+ * @return 200 when redirect code is  successful
+ * @return 400 when redirect code fails
+ */
+FrontendRouter.get('/redirect', FrontendServerController.generateRedirectUrl)
diff --git a/src/app/modules/frontend/frontend.service.ts b/src/app/modules/frontend-old/frontend.service.ts
similarity index 100%
rename from src/app/modules/frontend/frontend.service.ts
rename to src/app/modules/frontend-old/frontend.service.ts
diff --git a/src/app/modules/frontend/frontend.controller.ts b/src/app/modules/frontend/frontend.controller.ts
index 13165884b3..7fd4e8427a 100644
--- a/src/app/modules/frontend/frontend.controller.ts
+++ b/src/app/modules/frontend/frontend.controller.ts
@@ -1,172 +1,107 @@
-import ejs from 'ejs'
-import { StatusCodes } from 'http-status-codes'
+import { readFileSync } from 'fs'
+import { escape } from 'html-escaper'
+import { get } from 'lodash'
+import path from 'path'
 
-import { ClientEnvVars } from '../../../../shared/types/core'
+import { FormStatus } from '../../../../shared/types'
 import { createLoggerWithLabel } from '../../config/logger'
-import { createReqMeta } from '../../utils/request'
 import { ControllerHandler } from '../core/core.types'
-
-import { validateGenerateRedirectParams } from './frontend.middlewares'
-import { getClientEnvVars } from './frontend.service'
+import * as FormService from '../form/form.service'
+import { createMetatags } from '../form/public-form/public-form.service'
+import { RedirectParams } from '../form/public-form/public-form.types'
 
 const logger = createLoggerWithLabel(module)
 
-/**
- * Handler for GET /frontend/datalayer endpoint.
- * @param req - Express request object
- * @param res - Express response object
- * @returns Templated Javascript code for the frontend to initialise Google Tag Manager
- */
-export const addGoogleAnalyticsData: ControllerHandler<
-  unknown,
-  string | { message: string }
-> = (req, res) => {
-  const js = `
-    window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', '<%= GATrackingID%>', {
-        'send_page_view': false,
-        'app_name': '<%= appName%>',
-        'cookie_flags': 'samesite=none;secure',
-      });
-    `
-  try {
-    const ejsRendered = ejs.render(js, req.app.locals)
-    return res.type('text/javascript').status(StatusCodes.OK).send(ejsRendered)
-  } catch (err) {
-    logger.error({
-      message: 'Error returning datalayer',
-      meta: {
-        action: 'datalayer',
-        ...createReqMeta(req),
-      },
-      error: err,
-    })
-    return res.status(StatusCodes.BAD_REQUEST).json({
-      message: 'There was an unexpected error. Please refresh and try again.',
-    })
-  }
+const reactFrontendPath = path.resolve('dist/frontend')
+const reactHtml = readFileSync(path.join(reactFrontendPath, 'index.html'), {
+  encoding: 'utf8',
+})
+
+type MetaTags = {
+  title: string
+  description: string
+  image: string
+}
+const replaceWithMetaTags = ({
+  title,
+  description,
+  image,
+}: MetaTags): string => {
+  return reactHtml
+    .replace(/(__OG_TITLE__)/g, escape(title))
+    .replace(/(__OG_DESCRIPTION__)/g, escape(description))
+    .replace(/(__OG_IMAGE__)/g, escape(image))
 }
 
-/**
- * Handler for GET /frontend/environment endpoint.
- * @param req - Express request object
- * @param res - Express response object
- * @returns Templated Javascript code with environment variables for the frontend
- */
-export const addEnvVarData: ControllerHandler<unknown, { message: string }> = (
-  req,
-  res,
-) => {
-  try {
-    return res
-      .type('text/javascript')
-      .status(StatusCodes.OK)
-      .send(req.app.locals.environment)
-  } catch (err) {
-    logger.error({
-      message: 'Error returning environment',
-      meta: {
-        action: 'environment',
-        ...createReqMeta(req),
-      },
-      error: err,
-    })
-    return res.status(StatusCodes.BAD_REQUEST).json({
-      message: 'There was an unexpected error. Please refresh and try again.',
-    })
+const serveFormReact =
+  (isPublicForm: boolean): ControllerHandler =>
+  async (req, res) => {
+    let tags: MetaTags = {
+      title: 'FormSG',
+      description: 'Trusted form manager of the Singapore Government',
+      image: 'og-img-metatag-nonpublicform.png',
+    }
+
+    if (isPublicForm && get(req.params, 'formId')) {
+      tags = await getPublicFormMetaTags(get(req.params, 'formId') ?? '')
+    }
+
+    const reactHtmlWithMetaTags = replaceWithMetaTags(tags)
+
+    return (
+      res
+        // Prevent index.html from being cached by browsers.
+        .setHeader('Cache-Control', 'no-cache')
+        .send(reactHtmlWithMetaTags)
+    )
   }
-}
 
-/**
- * Handler for GET /client/env endpoint.
- * @returns the environment variables needed to hydrate the frontend.
- */
-export const handleGetEnvironment: ControllerHandler<never, ClientEnvVars> = (
-  _req,
-  res,
-) => {
-  return res.json(getClientEnvVars())
-}
+const getPublicFormMetaTags = async (formId: string): Promise<MetaTags> => {
+  const createMetatagsResult = await createMetatags({
+    formId,
+  })
 
-/**
- * Handler for GET /frontend/redirect endpoint.
- * @param req - Express request object
- * @param res - Express response object
- * @returns Templated Javascript code for the frontend that redirects to specific form url
- */
-export const _generateRedirectUrl: ControllerHandler<
-  unknown,
-  string | { message: string },
-  unknown,
-  { redirectPath: string }
-> = (req, res) => {
-  const js = `
-    // Update hash to match form id
-    window.location.hash = "#!/<%= redirectPath%>"
-    // Change url from form.gov.sg/123#!123 to form.gov.sg/#!/123
-    window.history.replaceState("","", "/#!/<%= redirectPath%>")
-  `
-  // If there are multiple query params, '&' is html-encoded as '&amp;', which is not valid URI
-  // Prefer to replace just '&' instead of using <%- to output unescaped values into the template
-  // As this could potentially introduce security vulnerability
-  // See https://ejs.co/#docs for tags
-  try {
-    const ejsRendered = ejs.render(js, req.query).replace(/&amp;/g, '&')
-    return res.type('text/javascript').status(StatusCodes.OK).send(ejsRendered)
-  } catch (err) {
+  if (createMetatagsResult.isErr()) {
     logger.error({
-      message: 'Error returning redirectLayer',
+      message: 'Error fetching metatags',
       meta: {
-        action: 'redirectlayer',
-        ...createReqMeta(req),
+        action: 'getPublicFormMetaTags',
+        formId,
       },
-      error: err,
-    })
-    return res.status(StatusCodes.BAD_REQUEST).json({
-      message: 'There was an unexpected error. Please refresh and try again.',
+      error: createMetatagsResult.error,
     })
+    return {
+      title: 'FormSG',
+      description: '',
+      image: 'og-img-metatag-publicform.png',
+    }
+  } else {
+    const { title, description } = createMetatagsResult.value
+    return {
+      title: title,
+      description: description ?? '',
+      image: 'og-img-metatag-publicform.png',
+    }
   }
 }
 
-export const generateRedirectUrl = [
-  validateGenerateRedirectParams,
-  _generateRedirectUrl,
-] as ControllerHandler[]
+export const servePublicForm: ControllerHandler<
+  RedirectParams,
+  unknown,
+  unknown,
+  Record<string, string>
+> = async (req, res, next) => {
+  const formResult = await FormService.retrieveFormKeysById(req.params.formId, [
+    'responseMode',
+    'status',
+  ])
 
-// Duplicated here since the feature manager is being deprecated.
-// TODO (#2147): delete this.
-enum FeatureNames {
-  Captcha = 'captcha',
-  GoogleAnalytics = 'google-analytics',
-  Sentry = 'sentry',
-  Sms = 'sms',
-  SpcpMyInfo = 'spcp-myinfo',
-  VerifiedFields = 'verified-fields',
-  WebhookVerifiedContent = 'webhook-verified-content',
+  const isPublicForm =
+    !formResult.isErr() && formResult.value.status === FormStatus.Public
+
+  return serveFormReact(isPublicForm)(req, res, next)
 }
 
-/**
- * Handler for GET /frontend/features endpoint.
- * @param _req - Express request object
- * @param res - Express response object
- * @returns Current featureManager states
- * @deprecated as the feature manager has been deprecated. This endpoint
- * now hardcodes the feature states to support old clients.
- * TODO (#2147): delete this
- */
-export const showFeaturesStates: ControllerHandler<
-  unknown,
-  Record<FeatureNames, boolean>
-> = (_req, res) => {
-  return res.json({
-    [FeatureNames.Captcha]: true,
-    [FeatureNames.Sms]: true,
-    [FeatureNames.SpcpMyInfo]: true,
-    [FeatureNames.VerifiedFields]: true,
-    [FeatureNames.GoogleAnalytics]: true,
-    [FeatureNames.WebhookVerifiedContent]: true,
-    [FeatureNames.Sentry]: true,
-  })
+export const serveDefault: ControllerHandler = (req, res, next) => {
+  return serveFormReact(/* isPublic= */ false)(req, res, next)
 }
diff --git a/src/app/modules/frontend/frontend.routes.ts b/src/app/modules/frontend/frontend.routes.ts
index 7f97568823..743b6973ec 100644
--- a/src/app/modules/frontend/frontend.routes.ts
+++ b/src/app/modules/frontend/frontend.routes.ts
@@ -1,47 +1,12 @@
 import { Router } from 'express'
 
-import * as FrontendServerController from './frontend.controller'
+import * as FrontendController from './frontend.controller'
 
-/** @deprecated use client router in src/app/routes/api/v3/client/client.routes.ts instead.  */
 export const FrontendRouter = Router()
 
-/**
- * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
- * Generate the templated Javascript code for the frontend to initialise Google Tag Manager
- * Code depends on whether googleAnalyticsFeature.isEnabled
- * @route GET /frontend/datalayer
- * @return 200 when code generation is successful
- * @return 400 when code generation fails
- */
 FrontendRouter.get(
-  '/datalayer',
-  FrontendServerController.addGoogleAnalyticsData,
+  '/:formId([a-fA-F0-9]{24})',
+  FrontendController.servePublicForm,
 )
 
-/**
- * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
- * Generate the templated Javascript code with environment variables for the frontend
- * @route GET /frontend/environment
- * @return 200 when code generation is successful
- * @return 400 when code generation fails
- */
-FrontendRouter.get('/environment', FrontendServerController.addEnvVarData)
-
-/**
- * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
- * Generate a json of current activated features
- * @route GET /frontend/features
- * @return json with featureManager.states
- * @deprecated
- * TODO (#2147): delete this
- */
-FrontendRouter.get('/features', FrontendServerController.showFeaturesStates)
-
-/**
- * @deprecated use routes in src/app/routes/api/v3/client/client.routes.ts instead
- * Generate the javascript code to redirect to the correct url
- * @route GET /frontend/redirect
- * @return 200 when redirect code is  successful
- * @return 400 when redirect code fails
- */
-FrontendRouter.get('/redirect', FrontendServerController.generateRedirectUrl)
+FrontendRouter.get('*', FrontendController.serveDefault)
diff --git a/src/app/modules/home/__tests__/home.controller.spec.ts b/src/app/modules/home/__tests__/home.controller.spec.ts
deleted file mode 100644
index 8bb232377a..0000000000
--- a/src/app/modules/home/__tests__/home.controller.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as HomeController from 'src/app/modules/home/home.controller'
-
-import expressHandler from 'tests/unit/backend/helpers/jest-express'
-
-describe('home.controller', () => {
-  describe('home', () => {
-    it('should render the home page without calling any downstream middleware', () => {
-      const mockReq = expressHandler.mockRequest()
-      const mockRes = expressHandler.mockResponse()
-      const mockNext = jest.fn()
-
-      HomeController.home(mockReq, mockRes, mockNext)
-
-      expect(mockRes.render).toHaveBeenCalledWith('index')
-      expect(mockRes.render).toHaveBeenCalledTimes(1)
-      expect(mockNext).not.toHaveBeenCalled()
-    })
-  })
-})
diff --git a/src/app/modules/home/home.controller.ts b/src/app/modules/home/home.controller.ts
deleted file mode 100644
index 25707fc25d..0000000000
--- a/src/app/modules/home/home.controller.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ControllerHandler } from '../core/core.types'
-
-/**
- * Renders the root page of the application.
- * @param  req - Express request object
- * @param  res - Express response object
- */
-export const home: ControllerHandler = (_req, res) => {
-  return res.render('index')
-}
diff --git a/src/app/modules/home/home.routes.ts b/src/app/modules/home/home.routes.ts
deleted file mode 100644
index 6ae06dbe13..0000000000
--- a/src/app/modules/home/home.routes.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Router } from 'express'
-
-import * as HomeController from './home.controller'
-
-export const HomeRouter = Router()
-
-HomeRouter.get('/', HomeController.home)
diff --git a/src/app/routes/api/v3/client/client.routes.ts b/src/app/routes/api/v3/client/client.routes.ts
index 26d3907649..df35d9f09d 100644
--- a/src/app/routes/api/v3/client/client.routes.ts
+++ b/src/app/routes/api/v3/client/client.routes.ts
@@ -1,6 +1,6 @@
 import { Router } from 'express'
 
-import * as FrontendServerController from '../../../../modules/frontend/frontend.controller'
+import * as FrontendServerController from '../../../../modules/frontend-old/frontend.controller'
 
 export const ClientRouter = Router()
 

From 5a52b90901c912210e58147fb40d5431d9f02ed5 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 16 May 2023 16:15:33 +0800
Subject: [PATCH 08/11] chore: remove src_e2e ci test, rename tests to better
 reflect backend-frontend split

---
 .github/workflows/ci.yml | 63 +++++++---------------------------------
 package.json             | 14 ++-------
 2 files changed, 13 insertions(+), 64 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6598ea0c8b..af40e3c436 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,7 +13,6 @@ jobs:
     outputs:
       backend: ${{ steps.filter.outputs.backend }}
       frontend: ${{ steps.filter.outputs.frontend }}
-      angularjs: ${{ steps.filter.outputs.angularjs }}
     steps:
       - uses: actions/checkout@v2
       - uses: dorny/paths-filter@v2
@@ -23,19 +22,13 @@ jobs:
             frontend:
               - shared/**
               - frontend/**
-            angularjs:
-              - shared/**
-              - src/shared/**
-              - package.json
-              - package-lock.json
-              - src/public/**
             backend:
               - tests/**
               - shared/**
-              - src/shared/**
+              - src/**
               - package.json
               - package-lock.json
-              - src/app/**
+
   install:
     runs-on: ubuntu-latest
     steps:
@@ -43,7 +36,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -59,7 +52,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -82,7 +75,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -97,7 +90,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -116,7 +109,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -126,54 +119,18 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
-  angularjs_test:
-    needs: [changes, install]
-    if: ${{ needs.changes.outputs.angularjs == 'true' }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 14
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
-      - run: npm ci
-      - run: npm run test:angularjs
-
-  src_lint:
+  backend_lint:
     needs: [changes, install]
-    if: ${{ needs.changes.outputs.backend == 'true' || needs.changes.outputs.angularjs == 'true' }}
+    if: ${{ needs.changes.outputs.backend == 'true' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
       - run: npm run lint-ci
       - run: npm_config_mode=yes npx lockfile-lint --type npm --path package.json --validate-https --allowed-hosts npm
-
-  src_e2e:
-    needs: [changes, build]
-    if: ${{ needs.changes.outputs.backend == 'true' || needs.changes.outputs.angularjs == 'true' }}
-    runs-on: ubuntu-latest
-    env:
-      NODE_OPTIONS: '--max-old-space-size=4096'
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/download-artifact@v3
-        if: always()
-        with:
-          name: build-output
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 14
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
-      - run: npm ci
-      - run: npm run test-e2e
diff --git a/package.json b/package.json
index 49d0918f3b..cf7aeef8ef 100644
--- a/package.json
+++ b/package.json
@@ -25,30 +25,22 @@
   },
   "scripts": {
     "postinstall": "npm run postinstall:frontend && npm run postinstall:shared",
+    "test": "npm run test:backend && npm run test:frontend",
     "test:backend": "env-cmd -f tests/.test-env jest --coverage --maxWorkers=4",
     "test:backend:watch": "env-cmd -f tests/.test-env jest --watch",
     "test:frontend": "npm --prefix frontend test",
     "test:e2e-v2": "npm run build && npx playwright test",
     "test:e2e-v2:server": "env-cmd -f ./__tests__/e2e/setup/.test-env npm run test-e2e-server",
+    "test-e2e-server": "concurrently --success last --kill-others \"mockpass\" \"maildev\" \"node dist/backend/src/app/server.js\" \"node ./tests/mock-webhook-server.js\"",
     "build": "npm run clean && concurrently \"npm:build:*\"",
-    "test:angularjs": "jest --config=tests/unit/frontend/jest.config.js",
-    "dev:angularjs": "webpack --config webpack.dev.js",
-    "build:old-frontend": "webpack --config webpack.prod.js",
     "build:frontend": "npm run --prefix frontend build",
     "build:backend": "tsc -p tsconfig.build.json && npm run copyfiles:backend",
     "copyfiles:backend": "copyfiles -e src/public/**/*.html -u 1 src/**/*.html dist/backend/src",
     "clean": "rimraf dist/",
     "start": "node -r dotenv/config src/app/server.js",
     "dev": "concurrently -k -p \"[{name}]\" -n \"api,client\" -c  \"yellow.bold,green.bold\" \"docker-compose up\" \"npm run dev:frontend\"",
-    "dev:backend": "npm run dev:angularjs & tsnd --poll --respawn --transpile-only --inspect=0.0.0.0 --exit-child -r dotenv/config -- src/app/server.ts",
+    "dev:backend": "tsnd --poll --respawn --transpile-only --inspect=0.0.0.0 --exit-child -r dotenv/config -- src/app/server.ts",
     "dev:frontend": "npm run --prefix frontend start",
-    "test": "npm run test:backend && npm run test:frontend",
-    "download-binary": "node tests/end-to-end/helpers/get-mongo-binary.js",
-    "test-e2e": "npm run test-e2e-build && npm run test-e2e-ci",
-    "test-e2e-build": "npm run build:backend && npm run dev:angularjs",
-    "test-e2e-ci": "env-cmd -f tests/.test-env --use-shell \"npm run download-binary && npm run testcafe-command\"",
-    "testcafe-command": "testcafe --skip-js-errors -c 2 chrome:headless ./tests/end-to-end --app \"npm run test-e2e-server\" --app-init-delay 10000",
-    "test-e2e-server": "concurrently --success last --kill-others \"mockpass\" \"maildev\" \"node dist/backend/src/app/server.js\" \"node ./tests/mock-webhook-server.js\"",
     "lint-code": "eslint src/ --quiet --fix",
     "lint-style": "stylelint '*/**/*.css' --quiet --fix",
     "lint-html": "htmlhint && prettier --write './src/public/**/*.html' --ignore-path './dist/**' --loglevel silent",

From 82d92e4e38da3bd6bb3c4d33167a967608b6dafa Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 16 May 2023 16:35:58 +0800
Subject: [PATCH 09/11] test: add --openssl-legacy-provider to the ci build
 step

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index af40e3c436..9d6ab50b6e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -45,7 +45,7 @@ jobs:
     needs: install
     runs-on: ubuntu-latest
     env:
-      NODE_OPTIONS: '--max-old-space-size=4096'
+      NODE_OPTIONS: '--max-old-space-size=4096 --openssl-legacy-provider'
     steps:
       - uses: actions/checkout@v2
       - run: mkdir -p build-output/

From d6289caf19a30d836bfddd75dce1ee74333273e6 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Tue, 16 May 2023 16:44:18 +0800
Subject: [PATCH 10/11] chore: update node options for build step

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9d6ab50b6e..45973ec19a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -44,8 +44,6 @@ jobs:
   build:
     needs: install
     runs-on: ubuntu-latest
-    env:
-      NODE_OPTIONS: '--max-old-space-size=4096 --openssl-legacy-provider'
     steps:
       - uses: actions/checkout@v2
       - run: mkdir -p build-output/
@@ -57,6 +55,8 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
       - run: npm run build
+        env:
+          NODE_OPTIONS: '--max-old-space-size=4096 --openssl-legacy-provider'
       - name: Upload build files
         uses: actions/upload-artifact@v2
         if: always()

From e90a23f9b269d6d2e857a91438bb7f5a86601cd1 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Wed, 17 May 2023 10:08:08 +0800
Subject: [PATCH 11/11] chore: revert ci to node 14

---
 .github/workflows/ci.yml | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 45973ec19a..6d328190d6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,7 +36,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 14
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -50,13 +50,13 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 14
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
       - run: npm run build
         env:
-          NODE_OPTIONS: '--max-old-space-size=4096 --openssl-legacy-provider'
+          NODE_OPTIONS: '--max-old-space-size=4096'
       - name: Upload build files
         uses: actions/upload-artifact@v2
         if: always()
@@ -75,7 +75,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 14
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -90,7 +90,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 14
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -109,7 +109,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 14
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
@@ -128,7 +128,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 14
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci