[C-2700][C-2701] upload redesign feature flag and placeholder page (#…

…3480)

packages/common/src/services/remote-config/feature-flags.ts

@@ -49,7 +49,8 @@ export enum FeatureFlags {
   PLAYLIST_UPDATES_POST_QA = 'playlist_updates_post_qa',
   AI_ATTRIBUTION = 'ai_attribution',
   WRITE_METADATA_THROUGH_CHAIN = 'write_metadata_through_chain',
-  DEVELOPER_APPS_PAGE = 'developer_apps_page'
+  DEVELOPER_APPS_PAGE = 'developer_apps_page',
+  UPLOAD_REDESIGN_ENABLED = 'upload_redesign_enabled'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -114,5 +115,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.PLAYLIST_UPDATES_POST_QA]: false,
   [FeatureFlags.AI_ATTRIBUTION]: false,
   [FeatureFlags.WRITE_METADATA_THROUGH_CHAIN]: false,
-  [FeatureFlags.DEVELOPER_APPS_PAGE]: false
+  [FeatureFlags.DEVELOPER_APPS_PAGE]: false,
+  [FeatureFlags.UPLOAD_REDESIGN_ENABLED]: false
 }

packages/web/src/pages/upload-page/UploadPage.tsx

@@ -0,0 +1,20 @@
+import { FeatureFlags } from '@audius/common'
+
+import { useFlag } from 'hooks/useRemoteConfig'
+
+import UploadPageLegacy from './UploadPageLegacy'
+import UploadPageNew from './UploadPageNew'
+
+export const UploadPage = (props: any) => {
+  const { isEnabled: isRedesignEnabled } = useFlag(
+    FeatureFlags.UPLOAD_REDESIGN_ENABLED
+  )
+
+  return isRedesignEnabled ? (
+    <UploadPageNew {...props} />
+  ) : (
+    <UploadPageLegacy {...props} />
+  )
+}
+
+export default UploadPage

packages/web/src/pages/upload-page/UploadPage.js → packages/web/src/pages/upload-page/UploadPageLegacy.js

@@ -39,7 +39,7 @@ const Pages = Object.freeze({
 
 const SHOW_FIRST_UPLOAD_MODAL_DELAY = 3000
 
-const UploadPage = (props) => {
+const UploadPageLegacy = (props) => {
   const { children, page } = props
 
   return (
@@ -451,7 +451,7 @@ class Upload extends Component {
         contentClassName={styles.upload}
         header={header}
       >
-        <UploadPage page={page}>{currentPage}</UploadPage>
+        <UploadPageLegacy page={page}>{currentPage}</UploadPageLegacy>
       </Page>
     )
   }

packages/web/src/pages/upload-page/UploadPageNew.module.css

@@ -0,0 +1,9 @@
+.upload {
+  text-align: left;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

packages/web/src/pages/upload-page/UploadPageNew.tsx

@@ -0,0 +1,25 @@
+import { UploadType } from '@audius/common'
+
+import Header from 'components/header/desktop/Header'
+import Page from 'components/page/Page'
+
+import styles from './UploadPage.module.css'
+
+type UploadPageProps = {
+  uploadType: UploadType
+}
+
+export const UploadPageNew = (props: UploadPageProps) => {
+  return (
+    <Page
+      title='Upload'
+      description='Upload and publish audio content to the Audius platform'
+      contentClassName={styles.upload}
+      header={<Header primary={'Upload'} />}
+    >
+      This is the new upload page
+    </Page>
+  )
+}
+
+export default UploadPageNew