From d0cc9c878c57fbdbc516c3c17b0659c622f0e56b Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 06:08:35 -0500
Subject: [PATCH 01/15] Add invalid state handling

---
 .../data-entry/AccessAndSaleTriggerLegacy.tsx |   2 +-
 .../data-entry/ContextualMenu.module.css      |   6 +
 .../components/data-entry/ContextualMenu.tsx  |  31 ++-
 .../upload-page/fields/AccessAndSaleField.tsx | 139 +-----------
 .../fields/AccessAndSaleMenuFields.tsx        | 153 +++++++++++++
 .../fields/StemsAndDownloadsField.tsx         | 203 +++++++++++-------
 .../fields/StemsAndDownloadsMenuFields.tsx    | 146 +++++++------
 7 files changed, 398 insertions(+), 282 deletions(-)
 create mode 100644 packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx

diff --git a/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx b/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
index 9d71bd446cd..7e001fe9b82 100644
--- a/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
+++ b/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
@@ -35,7 +35,6 @@ import {
   STREAM_AVAILABILITY_TYPE,
   AccessAndSaleFormSchema,
   AccessAndSaleFormValues,
-  AccessAndSaleMenuFields,
   FIELD_VISIBILITY,
   IS_STREAM_GATED,
   IS_UNLISTED,
@@ -45,6 +44,7 @@ import {
   SPECIAL_ACCESS_TYPE,
   getCombinedDefaultGatedConditionValues
 } from 'pages/upload-page/fields/AccessAndSaleField'
+import { AccessAndSaleMenuFields } from 'pages/upload-page/fields/AccessAndSaleMenuFields'
 import { SpecialAccessType } from 'pages/upload-page/fields/stream-availability/SpecialAccessFields'
 
 import styles from './AccessAndSaleTriggerLegacy.module.css'
diff --git a/packages/web/src/components/data-entry/ContextualMenu.module.css b/packages/web/src/components/data-entry/ContextualMenu.module.css
index bca250ff2da..28f7faac579 100644
--- a/packages/web/src/components/data-entry/ContextualMenu.module.css
+++ b/packages/web/src/components/data-entry/ContextualMenu.module.css
@@ -45,3 +45,9 @@
   border: 1px solid var(---border-strong);
   background: var(--neutral-light-8);
 }
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/packages/web/src/components/data-entry/ContextualMenu.tsx b/packages/web/src/components/data-entry/ContextualMenu.tsx
index e8139a011c3..689949dfee7 100644
--- a/packages/web/src/components/data-entry/ContextualMenu.tsx
+++ b/packages/web/src/components/data-entry/ContextualMenu.tsx
@@ -1,5 +1,7 @@
-import { ReactNode, ReactElement, useCallback } from 'react'
+import { ReactNode, ReactElement, useCallback, useMemo } from 'react'
 
+import { Nullable } from '@audius/common'
+import { Box, Text as HarmonyText } from '@audius/harmony'
 import {
   Button,
   ButtonType,
@@ -15,6 +17,7 @@ import {
   Form,
   Formik,
   FormikConfig,
+  FormikErrors,
   FormikHelpers,
   FormikValues,
   useFormikContext
@@ -38,17 +41,25 @@ type MenuFormProps = {
   label: string
   icon: ReactNode
   menuFields: ReactNode
+  displayMenuErrorMessage?: (errors: FormikErrors<any>) => Nullable<string>
 }
 
 const MenuForm = (props: MenuFormProps) => {
-  const { isOpen, onClose, label, icon, menuFields } = props
-  const { resetForm } = useFormikContext()
+  const { isOpen, onClose, label, icon, menuFields, displayMenuErrorMessage } =
+    props
+  const { resetForm, errors } = useFormikContext()
 
   const handleCancel = useCallback(() => {
     resetForm()
     onClose()
   }, [resetForm, onClose])
 
+  const errorMessage = useMemo(() => {
+    if (errors && displayMenuErrorMessage) {
+      return displayMenuErrorMessage(errors)
+    }
+  }, [displayMenuErrorMessage, errors])
+
   return (
     <Modal onClose={handleCancel} isOpen={isOpen} size='medium'>
       <ModalHeader>
@@ -57,7 +68,14 @@ const MenuForm = (props: MenuFormProps) => {
       <ModalContent>
         <Form id={label}>{menuFields}</Form>
       </ModalContent>
-      <ModalFooter>
+      <ModalFooter className={styles.footer}>
+        {errorMessage ? (
+          <Box pb='l' ph='xl'>
+            <HarmonyText variant='body' color='danger' size='s'>
+              {errorMessage}
+            </HarmonyText>
+          </Box>
+        ) : null}
         <Button
           form={label}
           type={ButtonType.PRIMARY}
@@ -103,6 +121,9 @@ type ContextualMenuProps<FormValues extends FormikValues> = {
   menuFields: ReactNode
   error?: boolean
   errorMessage?: string
+  displayMenuErrorMessage?: (
+    errors: FormikErrors<FormValues>
+  ) => Nullable<string>
   previewOverride?: (toggleMenu: () => void) => ReactNode
 } & FormikConfig<FormValues>
 
@@ -118,6 +139,7 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
     onSubmit,
     error,
     errorMessage,
+    displayMenuErrorMessage,
     previewOverride,
     ...formikProps
   } = props
@@ -159,6 +181,7 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
           isOpen={isMenuOpen}
           onClose={toggleMenu}
           menuFields={menuFields}
+          displayMenuErrorMessage={displayMenuErrorMessage}
         />
       </Formik>
     </>
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
index c9a2a9770a0..c0b17e0063b 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
@@ -2,7 +2,6 @@ import { useCallback, useMemo } from 'react'
 
 import {
   accountSelectors,
-  FeatureFlags,
   FieldVisibility,
   formatPrice,
   isContentCollectibleGated,
@@ -13,13 +12,11 @@ import {
   StreamTrackAvailabilityType,
   USDCPurchaseConfig,
   useUSDCPurchaseConfig,
-  useAccessAndRemixSettings,
   CollectibleGatedConditions,
   USDCPurchaseConditions,
   FollowGatedConditions,
   TipGatedConditions,
   ID,
-  useFeatureFlag,
   AccessConditions
 } from '@audius/common'
 import {
@@ -28,10 +25,8 @@ import {
   IconHidden,
   IconNote,
   IconSpecialAccess,
-  IconVisibilityPublic,
-  RadioButtonGroup
+  IconVisibilityPublic
 } from '@audius/stems'
-import cn from 'classnames'
 import { useField } from 'formik'
 import { get, isEmpty, set } from 'lodash'
 import { useSelector } from 'react-redux'
@@ -43,51 +38,27 @@ import {
   SelectedValue
 } from 'components/data-entry/ContextualMenu'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import { HelpCallout } from 'components/help-callout/HelpCallout'
-import layoutStyles from 'components/layout/layout.module.css'
-import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
 import { Text } from 'components/typography'
-import { useFlag } from 'hooks/useRemoteConfig'
 import { defaultFieldVisibility } from 'pages/track-page/utils'
 
 import { useIndexedField, useTrackField } from '../hooks'
 import { SingleTrackEditValues } from '../types'
 
 import styles from './AccessAndSaleField.module.css'
+import { AccessAndSaleMenuFields } from './AccessAndSaleMenuFields'
 import { REMIX_OF } from './RemixSettingsField'
-import { HiddenAvailabilityFields } from './stream-availability/HiddenAvailabilityFields'
-import {
-  SpecialAccessFields,
-  SpecialAccessType
-} from './stream-availability/SpecialAccessFields'
-import { CollectibleGatedRadioField } from './stream-availability/collectible-gated/CollectibleGatedRadioField'
-import { UsdcPurchaseGatedRadioField } from './stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField'
+import { SpecialAccessType } from './stream-availability/SpecialAccessFields'
+
 const { getUserId } = accountSelectors
 
 const messages = {
   title: 'Access & Sale',
   description:
     "Customize your music's availability for different audiences, and create personalized gated experiences for your fans.",
-  modalDescription:
-    'Control who has access to listen. Create gated experiences or require users pay to unlock your music.',
-  isRemix:
-    'This track is marked as a remix. To enable additional availability options, unmark within Remix Settings.',
-  done: 'Done',
   public: 'Public (Free to Stream)',
-  publicSubtitle:
-    'Public tracks are visible to all users and appear throughout Audius.',
   specialAccess: 'Special Access',
-  specialAccessSubtitle:
-    'Special Access tracks are only available to users who meet certain criteria, such as following the artist.',
   collectibleGated: 'Collectible Gated',
-  compatibilityTitle: "Not seeing what you're looking for?",
-  compatibilitySubtitle:
-    'Unverified Solana NFT Collections are not compatible at this time.',
   hidden: 'Hidden',
-  hiddenSubtitle:
-    "Hidden tracks won't be visible to your followers. Only you will see them on your profile. Anyone who has the link will be able to listen.",
-  hiddenHint: 'Scheduled tracks are hidden by default until release.',
-  learnMore: 'Learn More',
   fieldVisibility: {
     genre: 'Show Genre',
     mood: 'Show Mood',
@@ -119,6 +90,7 @@ const messages = {
   },
   required: 'Required'
 }
+
 export const IS_SCHEDULED_RELEASE = 'is_scheduled_release'
 export const IS_UNLISTED = 'is_unlisted'
 export const IS_STREAM_GATED = 'is_stream_gated'
@@ -534,104 +506,3 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
     />
   )
 }
-
-type AccesAndSaleMenuFieldsProps = {
-  streamConditions: SingleTrackEditValues[typeof STREAM_CONDITIONS]
-  isRemix: boolean
-  isUpload?: boolean
-  isInitiallyUnlisted?: boolean
-  isScheduledRelease?: boolean
-  initialStreamConditions?: AccessConditions
-}
-
-export const AccessAndSaleMenuFields = (props: AccesAndSaleMenuFieldsProps) => {
-  const {
-    isRemix,
-    isUpload,
-    isInitiallyUnlisted,
-    initialStreamConditions,
-    isScheduledRelease
-  } = props
-
-  const { isEnabled: isUsdcEnabled } = useFeatureFlag(
-    FeatureFlags.USDC_PURCHASES
-  )
-  const { isEnabled: isCollectibleGatedEnabled } = useFlag(
-    FeatureFlags.COLLECTIBLE_GATED_ENABLED
-  )
-  const { isEnabled: isSpecialAccessEnabled } = useFlag(
-    FeatureFlags.SPECIAL_ACCESS_ENABLED
-  )
-
-  const [availabilityField] = useField({
-    name: STREAM_AVAILABILITY_TYPE
-  })
-
-  const { noSpecialAccessGate, noSpecialAccessGateFields, noHidden } =
-    useAccessAndRemixSettings({
-      isUpload: !!isUpload,
-      isRemix,
-      initialStreamConditions: initialStreamConditions ?? null,
-      isInitiallyUnlisted: !!isInitiallyUnlisted,
-      isScheduledRelease: !!isScheduledRelease
-    })
-
-  return (
-    <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
-      {isRemix ? <HelpCallout content={messages.isRemix} /> : null}
-      <Text>{messages.modalDescription}</Text>
-      <RadioButtonGroup {...availabilityField} aria-label={messages.title}>
-        <ModalRadioItem
-          icon={<IconVisibilityPublic className={styles.icon} />}
-          label={messages.public}
-          description={messages.publicSubtitle}
-          value={StreamTrackAvailabilityType.PUBLIC}
-        />
-        {isUsdcEnabled ? (
-          <UsdcPurchaseGatedRadioField
-            isRemix={isRemix}
-            isUpload={isUpload}
-            initialStreamConditions={initialStreamConditions}
-            isInitiallyUnlisted={isInitiallyUnlisted}
-          />
-        ) : null}
-
-        {isSpecialAccessEnabled ? (
-          <ModalRadioItem
-            icon={<IconSpecialAccess />}
-            label={messages.specialAccess}
-            description={messages.specialAccessSubtitle}
-            value={StreamTrackAvailabilityType.SPECIAL_ACCESS}
-            disabled={noSpecialAccessGate}
-            checkedContent={
-              <SpecialAccessFields disabled={noSpecialAccessGateFields} />
-            }
-          />
-        ) : null}
-        {isCollectibleGatedEnabled ? (
-          <CollectibleGatedRadioField
-            isRemix={isRemix}
-            isUpload={isUpload}
-            initialStreamConditions={initialStreamConditions}
-            isInitiallyUnlisted={isInitiallyUnlisted}
-          />
-        ) : null}
-        <ModalRadioItem
-          icon={<IconHidden />}
-          label={messages.hidden}
-          value={StreamTrackAvailabilityType.HIDDEN}
-          description={messages.hiddenSubtitle}
-          disabled={noHidden}
-          // isInitiallyUnlisted is undefined on create
-          // show hint on scheduled releases that are in create or already unlisted
-          hintContent={
-            isScheduledRelease && isInitiallyUnlisted !== false
-              ? messages.hiddenHint
-              : ''
-          }
-          checkedContent={<HiddenAvailabilityFields />}
-        />
-      </RadioButtonGroup>
-    </div>
-  )
-}
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
new file mode 100644
index 00000000000..d45c6b78794
--- /dev/null
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
@@ -0,0 +1,153 @@
+import {
+  AccessConditions,
+  FeatureFlags,
+  StreamTrackAvailabilityType,
+  useAccessAndRemixSettings,
+  useFeatureFlag
+} from '@audius/common'
+import {
+  IconHidden,
+  RadioButtonGroup,
+  IconSpecialAccess,
+  IconVisibilityPublic
+} from '@audius/stems'
+import cn from 'classnames'
+import { useField } from 'formik'
+
+import { HelpCallout } from 'components/help-callout/HelpCallout'
+import layoutStyles from 'components/layout/layout.module.css'
+import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
+import { Text } from 'components/typography'
+import { useFlag } from 'hooks/useRemoteConfig'
+
+import { SingleTrackEditValues } from '../types'
+
+import {
+  STREAM_AVAILABILITY_TYPE,
+  STREAM_CONDITIONS
+} from './AccessAndSaleField'
+import styles from './AccessAndSaleField.module.css'
+import { HiddenAvailabilityFields } from './stream-availability/HiddenAvailabilityFields'
+import { SpecialAccessFields } from './stream-availability/SpecialAccessFields'
+import { CollectibleGatedRadioField } from './stream-availability/collectible-gated/CollectibleGatedRadioField'
+import { UsdcPurchaseGatedRadioField } from './stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField'
+
+const messages = {
+  title: 'Access & Sale',
+  modalDescription:
+    'Control who has access to listen. Create gated experiences or require users pay to unlock your music.',
+  isRemix:
+    'This track is marked as a remix. To enable additional availability options, unmark within Remix Settings.',
+  done: 'Done',
+  public: 'Public (Free to Stream)',
+  publicSubtitle:
+    'Public tracks are visible to all users and appear throughout Audius.',
+  specialAccess: 'Special Access',
+  specialAccessSubtitle:
+    'Special Access tracks are only available to users who meet certain criteria, such as following the artist.',
+  hidden: 'Hidden',
+  hiddenSubtitle:
+    "Hidden tracks won't be visible to your followers. Only you will see them on your profile. Anyone who has the link will be able to listen.",
+  hiddenHint: 'Scheduled tracks are hidden by default until release.'
+}
+
+export type AccesAndSaleMenuFieldsProps = {
+  streamConditions: SingleTrackEditValues[typeof STREAM_CONDITIONS]
+  isRemix: boolean
+  isUpload?: boolean
+  isInitiallyUnlisted?: boolean
+  isScheduledRelease?: boolean
+  initialStreamConditions?: AccessConditions
+}
+
+export const AccessAndSaleMenuFields = (props: AccesAndSaleMenuFieldsProps) => {
+  const {
+    isRemix,
+    isUpload,
+    isInitiallyUnlisted,
+    initialStreamConditions,
+    isScheduledRelease
+  } = props
+
+  const { isEnabled: isUsdcEnabled } = useFeatureFlag(
+    FeatureFlags.USDC_PURCHASES
+  )
+  const { isEnabled: isCollectibleGatedEnabled } = useFlag(
+    FeatureFlags.COLLECTIBLE_GATED_ENABLED
+  )
+  const { isEnabled: isSpecialAccessEnabled } = useFlag(
+    FeatureFlags.SPECIAL_ACCESS_ENABLED
+  )
+
+  const [availabilityField] = useField({
+    name: STREAM_AVAILABILITY_TYPE
+  })
+
+  const { noSpecialAccessGate, noSpecialAccessGateFields, noHidden } =
+    useAccessAndRemixSettings({
+      isUpload: !!isUpload,
+      isRemix,
+      initialStreamConditions: initialStreamConditions ?? null,
+      isInitiallyUnlisted: !!isInitiallyUnlisted,
+      isScheduledRelease: !!isScheduledRelease
+    })
+
+  return (
+    <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
+      {isRemix ? <HelpCallout content={messages.isRemix} /> : null}
+      <Text>{messages.modalDescription}</Text>
+      <RadioButtonGroup {...availabilityField} aria-label={messages.title}>
+        <ModalRadioItem
+          icon={<IconVisibilityPublic className={styles.icon} />}
+          label={messages.public}
+          description={messages.publicSubtitle}
+          value={StreamTrackAvailabilityType.PUBLIC}
+        />
+        {isUsdcEnabled ? (
+          <UsdcPurchaseGatedRadioField
+            isRemix={isRemix}
+            isUpload={isUpload}
+            initialStreamConditions={initialStreamConditions}
+            isInitiallyUnlisted={isInitiallyUnlisted}
+          />
+        ) : null}
+
+        {isSpecialAccessEnabled ? (
+          <ModalRadioItem
+            icon={<IconSpecialAccess />}
+            label={messages.specialAccess}
+            description={messages.specialAccessSubtitle}
+            value={StreamTrackAvailabilityType.SPECIAL_ACCESS}
+            disabled={noSpecialAccessGate}
+            checkedContent={
+              <SpecialAccessFields disabled={noSpecialAccessGateFields} />
+            }
+          />
+        ) : null}
+        {isCollectibleGatedEnabled ? (
+          <CollectibleGatedRadioField
+            isRemix={isRemix}
+            isUpload={isUpload}
+            initialStreamConditions={initialStreamConditions}
+            isInitiallyUnlisted={isInitiallyUnlisted}
+          />
+        ) : null}
+        <ModalRadioItem
+          icon={<IconHidden />}
+          label={messages.hidden}
+          value={StreamTrackAvailabilityType.HIDDEN}
+          description={messages.hiddenSubtitle}
+          disabled={noHidden}
+          // isInitiallyUnlisted is undefined on create
+          // show hint on scheduled releases that are in create or already unlisted
+          hintContent={
+            isScheduledRelease && isInitiallyUnlisted !== false
+              ? messages.hiddenHint
+              : ''
+          }
+          checkedContent={<HiddenAvailabilityFields />}
+        />
+      </RadioButtonGroup>
+    </div>
+  )
+}
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
index eedfbda6f92..73618e6340b 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
@@ -15,6 +15,8 @@ import {
   stemCategoryFriendlyNames,
   useUSDCPurchaseConfig
 } from '@audius/common'
+import { IconCart } from '@audius/stems'
+import { FormikErrors } from 'formik'
 import { get, set } from 'lodash'
 import { useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
@@ -36,9 +38,10 @@ import {
   STREAM_CONDITIONS
 } from './AccessAndSaleField'
 import {
-  ALLOW_DOWNLOAD,
+  CID,
+  DOWNLOAD,
   DOWNLOAD_AVAILABILITY_TYPE,
-  FOLLOWER_GATED,
+  DOWNLOAD_REQUIRES_FOLLOW,
   IS_DOWNLOADABLE,
   IS_ORIGINAL_AVAILABLE,
   STEMS,
@@ -50,11 +53,6 @@ import { DOWNLOAD_PRICE_HUMANIZED } from './download-availability/DownloadPriceF
 
 const { getUserId } = accountSelectors
 
-const ALLOW_DOWNLOAD_BASE = 'is_downloadable'
-const FOLLOWER_GATED_BASE = 'requires_follow'
-const CID_BASE = 'cid'
-const CID = 'download.cid'
-
 const messages = {
   title: 'Stems & Downloads',
   description:
@@ -63,7 +61,11 @@ const messages = {
     allowDownload: 'Full Track Available',
     allowOriginal: 'Lossless Files Available',
     followerGated: 'Followers Only'
-  }
+  },
+  price: (price: number) =>
+    price.toLocaleString('en-US', { style: 'currency', currency: 'USD' }),
+  noDownloadableAssets:
+    'You must enable the full track download or upload a stem file before setting download availability.'
 }
 
 export const StemsAndDownloadsField = () => {
@@ -72,12 +74,6 @@ export const StemsAndDownloadsField = () => {
   )
   const usdcPurchaseConfig = useUSDCPurchaseConfig()
 
-  const [{ value: allowDownloadValue }, , { setValue: setAllowDownloadValue }] =
-    useTrackField<Download[typeof ALLOW_DOWNLOAD_BASE]>(ALLOW_DOWNLOAD)
-  const [{ value: followerGatedValue }, , { setValue: setFollowerGatedValue }] =
-    useTrackField<Download[typeof FOLLOWER_GATED_BASE]>(FOLLOWER_GATED)
-  const [{ value: cid }, , { setValue: setCidValue }] =
-    useTrackField<Download[typeof CID_BASE]>(CID)
   const [{ value: isDownloadable }, , { setValue: setIsDownloadable }] =
     useTrackField<boolean>(IS_DOWNLOADABLE)
   const [
@@ -85,6 +81,16 @@ export const StemsAndDownloadsField = () => {
     ,
     { setValue: setisOriginalAvailable }
   ] = useTrackField<boolean>(IS_ORIGINAL_AVAILABLE)
+  const [
+    { value: downloadRequiresFollow },
+    ,
+    { setValue: setDownloadRequiresFollow }
+  ] = useTrackField<boolean>(DOWNLOAD_REQUIRES_FOLLOW)
+  const [{ value: stemsValue }, , { setValue: setStemsValue }] =
+    useTrackField<StemUpload[]>(STEMS)
+  const [, , { setValue: setDownloadValue }] = useTrackField<Download>(DOWNLOAD)
+  const [{ value: cid }, , { setValue: setCidValue }] =
+    useTrackField<Nullable<string>>(CID)
   const [{ value: isDownloadGated }, , { setValue: setIsDownloadGated }] =
     useTrackField<boolean>(IS_DOWNLOAD_GATED)
   const [
@@ -94,8 +100,6 @@ export const StemsAndDownloadsField = () => {
   ] = useTrackField<Nullable<AccessConditions>>(DOWNLOAD_CONDITIONS)
   const [{ value: streamConditions }] =
     useTrackField<Nullable<AccessConditions>>(STREAM_CONDITIONS)
-  const [{ value: stemsValue }, , { setValue: setStemsValue }] =
-    useTrackField<StemUpload[]>(STEMS)
 
   /**
    * Stream conditions from inside the modal.
@@ -113,12 +117,15 @@ export const StemsAndDownloadsField = () => {
 
   const initialValues = useMemo(() => {
     const initialValues = {}
-    set(initialValues, ALLOW_DOWNLOAD, allowDownloadValue ?? false)
-    set(initialValues, FOLLOWER_GATED, followerGatedValue ?? false)
-    set(initialValues, CID, cid ?? null)
-    set(initialValues, STEMS, stemsValue ?? [])
     set(initialValues, IS_DOWNLOADABLE, isDownloadable)
     set(initialValues, IS_ORIGINAL_AVAILABLE, isOriginalAvailable)
+    set(
+      initialValues,
+      DOWNLOAD_REQUIRES_FOLLOW,
+      isContentFollowGated(savedDownloadConditions)
+    )
+    set(initialValues, STEMS, stemsValue ?? [])
+    set(initialValues, CID, cid ?? null)
     set(initialValues, IS_DOWNLOAD_GATED, isDownloadGated)
     set(initialValues, DOWNLOAD_CONDITIONS, tempDownloadConditions)
     set(initialValues, STREAM_CONDITIONS, streamConditions)
@@ -144,95 +151,124 @@ export const StemsAndDownloadsField = () => {
     set(initialValues, DOWNLOAD_AVAILABILITY_TYPE, availabilityType)
     return initialValues as StemsAndDownloadsFormValues
   }, [
-    savedDownloadConditions,
-    allowDownloadValue,
-    followerGatedValue,
     isDownloadable,
     isOriginalAvailable,
-    cid,
     stemsValue,
-    streamConditions,
+    cid,
     isDownloadGated,
-    tempDownloadConditions
+    tempDownloadConditions,
+    savedDownloadConditions,
+    streamConditions
   ])
 
   const handleSubmit = useCallback(
     (values: StemsAndDownloadsFormValues) => {
       const availabilityType = get(values, DOWNLOAD_AVAILABILITY_TYPE)
       const downloadConditions = get(values, DOWNLOAD_CONDITIONS)
+      const isDownloadable = get(values, IS_DOWNLOADABLE)
+      const downloadRequiresFollow = get(values, DOWNLOAD_REQUIRES_FOLLOW)
 
-      // note that there is some redundancy with the is_downloadable field
-      // this will go away once we remove the download object from track
-      // and only keep the top level fields
-      const allowsDownload =
-        get(values, ALLOW_DOWNLOAD) ?? allowDownloadValue ?? false
-      setAllowDownloadValue(allowsDownload)
-      setIsDownloadable(allowsDownload)
-      setFollowerGatedValue(
-        get(values, FOLLOWER_GATED) ?? followerGatedValue ?? false
-      )
-      setisOriginalAvailable(
-        get(values, IS_ORIGINAL_AVAILABLE) ?? isOriginalAvailable ?? false
-      )
+      setIsDownloadable(isDownloadable)
+      setisOriginalAvailable(get(values, IS_ORIGINAL_AVAILABLE))
       setStemsValue(get(values, STEMS))
       setCidValue(null)
 
-      // If download does not inherit from stream conditions,
-      // extract the correct download conditions based on the selected availability type
-      const inheritConditions = !!streamConditions
-      if (!inheritConditions) {
-        setIsDownloadGated(false)
-        setDownloadConditions(null)
+      // Note that there is some redundancy with the download fields
+      // this will go away once we remove the download object from track
+      // and only keep the top level fields.
 
-        switch (availabilityType) {
-          case DownloadTrackAvailabilityType.USDC_PURCHASE: {
-            const {
-              usdc_purchase: { price }
-            } = downloadConditions as USDCPurchaseConditions
-            setDownloadConditions({
-              // @ts-ignore fully formed in saga (validated + added splits)
-              usdc_purchase: { price: Math.round(price) }
-            })
-            setIsDownloadGated(true)
-            break
-          }
-          case DownloadTrackAvailabilityType.FOLLOWERS: {
-            const { follow_user_id } =
-              downloadConditions as FollowGatedConditions
-            setDownloadConditions({ follow_user_id })
-            setIsDownloadGated(true)
-            setFollowerGatedValue(true)
-            break
-          }
-          case DownloadTrackAvailabilityType.PUBLIC: {
-            break
+      if (isLosslessDownloadsEnabled) {
+        // If download does not inherit from stream conditions,
+        // extract the correct download conditions based on the selected availability type.
+        if (!streamConditions) {
+          setIsDownloadGated(false)
+          setDownloadConditions(null)
+          setDownloadRequiresFollow(false)
+          setDownloadValue({
+            is_downloadable: isDownloadable,
+            requires_follow: false,
+            cid: null
+          })
+          switch (availabilityType) {
+            case DownloadTrackAvailabilityType.USDC_PURCHASE: {
+              setIsDownloadGated(true)
+              const {
+                usdc_purchase: { price }
+              } = downloadConditions as USDCPurchaseConditions
+              setDownloadConditions({
+                // @ts-ignore fully formed in saga (validated + added splits)
+                usdc_purchase: { price: Math.round(price) }
+              })
+              break
+            }
+            case DownloadTrackAvailabilityType.FOLLOWERS: {
+              setIsDownloadGated(true)
+              const { follow_user_id } =
+                downloadConditions as FollowGatedConditions
+              setDownloadConditions({ follow_user_id })
+              setDownloadRequiresFollow(true)
+              setDownloadValue({
+                is_downloadable: isDownloadable,
+                requires_follow: true,
+                cid: null
+              })
+              break
+            }
+            case DownloadTrackAvailabilityType.PUBLIC: {
+              break
+            }
           }
         }
+      } else {
+        // If download does not inherit from stream conditions,
+        // set the download conditions to be follow gated if requires follow switch is on.
+        if (!streamConditions) {
+          setIsDownloadGated(downloadRequiresFollow)
+          setDownloadConditions(
+            downloadRequiresFollow
+              ? ({
+                  follow_user_id: accountUserId
+                } as FollowGatedConditions)
+              : null
+          )
+          setDownloadRequiresFollow(downloadRequiresFollow)
+          setDownloadValue({
+            is_downloadable: isDownloadable,
+            requires_follow: downloadRequiresFollow,
+            cid: null
+          })
+        }
       }
     },
     [
-      allowDownloadValue,
-      followerGatedValue,
-      isOriginalAvailable,
+      isLosslessDownloadsEnabled,
+      accountUserId,
       streamConditions,
-      setAllowDownloadValue,
-      setFollowerGatedValue,
       setIsDownloadable,
+      setDownloadRequiresFollow,
       setisOriginalAvailable,
       setStemsValue,
       setCidValue,
       setIsDownloadGated,
-      setDownloadConditions
+      setDownloadConditions,
+      setDownloadValue
     ]
   )
 
   const renderValue = () => {
     let values = []
-    if (allowDownloadValue || isDownloadable) {
-      values.push(messages.values.allowDownload)
-    }
-    if (followerGatedValue) {
+    if (downloadRequiresFollow) {
       values.push(messages.values.followerGated)
+    } else if (isContentUSDCPurchaseGated(savedDownloadConditions)) {
+      values.push({
+        label: messages.price(
+          savedDownloadConditions.usdc_purchase.price / 100
+        ),
+        icon: IconCart
+      })
+    }
+    if (isDownloadable) {
+      values.push(messages.values.allowDownload)
     }
     if (isLosslessDownloadsEnabled && isOriginalAvailable) {
       values.push(messages.values.allowOriginal)
@@ -245,9 +281,11 @@ export const StemsAndDownloadsField = () => {
 
     return (
       <SelectedValues>
-        {values.map((value) => (
-          <SelectedValue key={value} label={value} />
-        ))}
+        {values.map((value) => {
+          const valueProps =
+            typeof value === 'string' ? { label: value } : value
+          return <SelectedValue key={valueProps.label} {...valueProps} />
+        })}
       </SelectedValues>
     )
   }
@@ -264,6 +302,11 @@ export const StemsAndDownloadsField = () => {
         stemsAndDownloadsSchema(usdcPurchaseConfig)
       )}
       menuFields={<StemsAndDownloadsMenuFields />}
+      displayMenuErrorMessage={(
+        errors: FormikErrors<StemsAndDownloadsFormValues>
+      ) => {
+        return errors[IS_DOWNLOAD_GATED] ?? null
+      }}
     />
   )
 }
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
index 8fec915eca1..975c3f163f0 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
@@ -23,6 +23,7 @@ import { processFiles } from '../store/utils/processFiles'
 
 import {
   DOWNLOAD_CONDITIONS,
+  IS_DOWNLOAD_GATED,
   STREAM_CONDITIONS,
   USDCPurchaseRemoteConfig
 } from './AccessAndSaleField'
@@ -32,21 +33,22 @@ import { SwitchRowField } from './SwitchRowField'
 import { DownloadAvailability } from './download-availability/DownloadAvailability'
 import { DOWNLOAD_PRICE } from './download-availability/DownloadPriceField'
 
-export const ALLOW_DOWNLOAD = 'download.is_downloadable'
-export const FOLLOWER_GATED = 'download.requires_follow'
 export const IS_DOWNLOADABLE = 'is_downloadable'
 export const IS_ORIGINAL_AVAILABLE = 'is_original_available'
+export const DOWNLOAD_REQUIRES_FOLLOW = 'download_requires_follow'
 export const STEMS = 'stems'
+export const DOWNLOAD = 'download'
+export const CID = 'download.cid'
 export const DOWNLOAD_AVAILABILITY_TYPE = 'download_availability_type'
 
 const messages = {
   description:
     'Upload your stems and source files to allow fans to remix your track. This does not affect users ability to listen offline.',
-  [ALLOW_DOWNLOAD]: {
+  [IS_DOWNLOADABLE]: {
     header: 'Allow Full Track Download',
     description: 'Allow your fans to download a copy of your full track.'
   },
-  [FOLLOWER_GATED]: {
+  [DOWNLOAD_REQUIRES_FOLLOW]: {
     header: 'Available Only to Followers',
     description:
       'Make your stems and source files available only to your followers'
@@ -65,14 +67,15 @@ const messages = {
 }
 
 export type StemsAndDownloadsFormValues = {
-  [ALLOW_DOWNLOAD]: boolean
-  [FOLLOWER_GATED]: boolean
   [IS_DOWNLOADABLE]: boolean
   [IS_ORIGINAL_AVAILABLE]: boolean
+  [DOWNLOAD_REQUIRES_FOLLOW]: boolean
+  [STEMS]: StemUpload[]
+  [CID]: Nullable<string>
+  [IS_DOWNLOAD_GATED]: boolean
   [DOWNLOAD_CONDITIONS]: Nullable<AccessConditions>
   [STREAM_CONDITIONS]: Nullable<AccessConditions>
   [DOWNLOAD_AVAILABILITY_TYPE]: DownloadTrackAvailabilityType
-  [STEMS]: StemUpload[]
 }
 
 export const stemsAndDownloadsSchema = ({
@@ -81,12 +84,9 @@ export const stemsAndDownloadsSchema = ({
 }: USDCPurchaseRemoteConfig) =>
   z
     .object({
-      // [ALLOW_DOWNLOAD]: z.boolean(),
-      // [FOLLOWER_GATED]: z.boolean(),
-      [ALLOW_DOWNLOAD]: z.any(),
-      [FOLLOWER_GATED]: z.any(),
-      [STEMS]: z.any(),
       [IS_DOWNLOADABLE]: z.boolean(),
+      [DOWNLOAD_REQUIRES_FOLLOW]: z.boolean(),
+      [STEMS]: z.any(),
       [IS_ORIGINAL_AVAILABLE]: z.boolean(),
       [DOWNLOAD_CONDITIONS]: z.any(),
       [STREAM_CONDITIONS]: z.any(),
@@ -129,60 +129,96 @@ export const stemsAndDownloadsSchema = ({
         path: [DOWNLOAD_PRICE]
       }
     )
+    .refine(
+      // cannot be download gated if no downloadable assets
+      (values) => {
+        const formValues = values as StemsAndDownloadsFormValues
+        const availabilityType = formValues[DOWNLOAD_AVAILABILITY_TYPE]
+        const isDownloadGated = [
+          DownloadTrackAvailabilityType.FOLLOWERS,
+          DownloadTrackAvailabilityType.USDC_PURCHASE
+        ].includes(availabilityType)
+        const isDownloadable = formValues[IS_DOWNLOADABLE]
+        const stems = formValues[STEMS]
+        const hasStems = stems.length > 0
+        const hasDownloadableAssets = isDownloadable || hasStems
+        return !isDownloadGated || hasDownloadableAssets
+      },
+      {
+        message: messages.noDownloadableAssets,
+        path: [IS_DOWNLOAD_GATED]
+      }
+    )
 
 export const StemsAndDownloadsMenuFields = () => {
   const isLosslessDownloadsEnabled = getFeatureEnabled(
     FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
   )
-
-  const [
-    { onChange: allowDownloadOnChange },
-    ,
-    { setValue: allowDownloadSetValue }
-  ] = useField(ALLOW_DOWNLOAD)
+  const [{ value: isDownloadable }, , { setValue: isDownloadableSetValue }] =
+    useField(IS_DOWNLOADABLE)
+  const [, , { setValue: setIsOriginalAvailable }] = useField(
+    IS_ORIGINAL_AVAILABLE
+  )
   const [
-    { onChange: followerGatedOnChange },
+    { value: downloadRequiresFollow },
     ,
     { setValue: followerGatedSetValue }
-  ] = useField(FOLLOWER_GATED)
-  const [
-    { onChange: isDownloadableOnChange },
-    ,
-    { setValue: setIsDownloadable }
-  ] = useField(IS_DOWNLOADABLE)
-  const [
-    { onChange: isOriginalAvailableOnChange },
-    ,
-    { setValue: setIsOriginalAvailable }
-  ] = useField(IS_ORIGINAL_AVAILABLE)
+  ] = useField(DOWNLOAD_REQUIRES_FOLLOW)
   const [{ value: stemsValue }, , { setValue: setStems }] =
     useField<StemUploadWithFile[]>(STEMS)
+  const [{ value: streamConditions }] =
+    useField<Nullable<AccessConditions>>(STREAM_CONDITIONS)
   const [{ value: availabilityType }, , { setValue: setAvailabilityType }] =
     useField<DownloadTrackAvailabilityType>(DOWNLOAD_AVAILABILITY_TYPE)
+  const [isAvailabilityTouched, setIsAvailabilityTouched] = useState(
+    availabilityType !== DownloadTrackAvailabilityType.PUBLIC
+  )
 
-  const [isAvailabilityTouched, setIsAvailabilityTouched] = useState(false)
-
+  // If the track is download gated for the first time,
+  // set the track to be downloadable and allow lossless files
   useEffect(() => {
-    if (
+    const firstTimeDownloadGated =
       [
         DownloadTrackAvailabilityType.FOLLOWERS,
         DownloadTrackAvailabilityType.USDC_PURCHASE
-      ].includes(availabilityType) &&
-      !isAvailabilityTouched
-    ) {
-      allowDownloadSetValue(true)
-      setIsDownloadable(true)
+      ].includes(availabilityType) && !isAvailabilityTouched
+    if (firstTimeDownloadGated) {
+      isDownloadableSetValue(true)
       setIsOriginalAvailable(true)
       setIsAvailabilityTouched(true)
     }
   }, [
     availabilityType,
     isAvailabilityTouched,
-    allowDownloadSetValue,
-    setIsDownloadable,
+    isDownloadableSetValue,
     setIsOriginalAvailable
   ])
 
+  // Allow lossless files by default if the track is downloadable.
+  // If there are no downloadable assets, set the requires follow switch to false.
+  // (the latter is only relevant until lossless downloads feature is live)
+  // Note that the useEffect has been preferred to the corresponding onChange handlers
+  // as those seemed to cause unwanted race conditions resulting in errors showing up incorrectly.
+  useEffect(() => {
+    if (isDownloadable) {
+      setIsOriginalAvailable(true)
+    } else if (stemsValue.length === 0) {
+      followerGatedSetValue(false)
+    }
+  }, [
+    followerGatedSetValue,
+    isDownloadable,
+    setIsOriginalAvailable,
+    stemsValue.length
+  ])
+
+  // If download requires follow is enabled, set the track to be downloadable.
+  useEffect(() => {
+    if (downloadRequiresFollow) {
+      isDownloadableSetValue(true)
+    }
+  }, [downloadRequiresFollow, isDownloadableSetValue])
+
   const invalidAudioFile = (
     name: string,
     reason: 'corrupted' | 'size' | 'type'
@@ -229,18 +265,9 @@ export const StemsAndDownloadsMenuFields = () => {
         />
       ) : null}
       <SwitchRowField
-        name={ALLOW_DOWNLOAD}
-        header={messages[ALLOW_DOWNLOAD].header}
-        description={messages[ALLOW_DOWNLOAD].description}
-        onChange={(e) => {
-          allowDownloadOnChange(e)
-          isDownloadableOnChange(e)
-          if (!e.target.checked) {
-            followerGatedSetValue(false)
-          } else {
-            setIsOriginalAvailable(true)
-          }
-        }}
+        name={IS_DOWNLOADABLE}
+        header={messages[IS_DOWNLOADABLE].header}
+        description={messages[IS_DOWNLOADABLE].description}
       />
       <Divider />
       {isLosslessDownloadsEnabled ? (
@@ -248,20 +275,13 @@ export const StemsAndDownloadsMenuFields = () => {
           name={IS_ORIGINAL_AVAILABLE}
           header={messages[IS_ORIGINAL_AVAILABLE].header}
           description={messages[IS_ORIGINAL_AVAILABLE].description}
-          onChange={isOriginalAvailableOnChange}
         />
       ) : (
         <SwitchRowField
-          name={FOLLOWER_GATED}
-          header={messages[FOLLOWER_GATED].header}
-          description={messages[FOLLOWER_GATED].description}
-          onChange={(e) => {
-            followerGatedOnChange(e)
-            if (e.target.checked) {
-              allowDownloadSetValue(true)
-              setIsDownloadable(true)
-            }
-          }}
+          name={DOWNLOAD_REQUIRES_FOLLOW}
+          header={messages[DOWNLOAD_REQUIRES_FOLLOW].header}
+          description={messages[DOWNLOAD_REQUIRES_FOLLOW].description}
+          disabled={!!streamConditions}
         />
       )}
       <Divider />

From 5fd0bca47df55660543a6dd81088bb5aee92c343 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 06:49:55 -0500
Subject: [PATCH 02/15] Make download conditions to inherit from stream
 conditions in access and sale

---
 .../upload-page/fields/AccessAndSaleField.tsx | 97 +++++++++++++++++--
 .../DownloadAvailability.tsx                  |  2 +-
 2 files changed, 89 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
index c0b17e0063b..a856c97faae 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
@@ -17,7 +17,8 @@ import {
   FollowGatedConditions,
   TipGatedConditions,
   ID,
-  AccessConditions
+  AccessConditions,
+  Download
 } from '@audius/common'
 import {
   IconCart,
@@ -47,6 +48,11 @@ import { SingleTrackEditValues } from '../types'
 import styles from './AccessAndSaleField.module.css'
 import { AccessAndSaleMenuFields } from './AccessAndSaleMenuFields'
 import { REMIX_OF } from './RemixSettingsField'
+import {
+  DOWNLOAD,
+  DOWNLOAD_REQUIRES_FOLLOW,
+  IS_DOWNLOADABLE
+} from './StemsAndDownloadsMenuFields'
 import { SpecialAccessType } from './stream-availability/SpecialAccessFields'
 
 const { getUserId } = accountSelectors
@@ -254,6 +260,28 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
   const [{ value: preview }, , { setValue: setPreviewValue }] =
     useTrackField<SingleTrackEditValues[typeof PREVIEW]>(PREVIEW)
 
+  const [{ value: isDownloadGated }, , { setValue: setIsDownloadGated }] =
+    useTrackField<SingleTrackEditValues[typeof IS_DOWNLOAD_GATED]>(
+      IS_DOWNLOAD_GATED
+    )
+  const [
+    { value: downloadConditions },
+    ,
+    { setValue: setDownloadConditionsValue }
+  ] =
+    useTrackField<SingleTrackEditValues[typeof DOWNLOAD_CONDITIONS]>(
+      DOWNLOAD_CONDITIONS
+    )
+  const [{ value: isDownloadable }, , { setValue: setIsDownloadable }] =
+    useField(IS_DOWNLOADABLE)
+  const [
+    { value: downloadRequiresFollow },
+    ,
+    { setValue: setDownloadRequiresFollow }
+  ] = useField(DOWNLOAD_REQUIRES_FOLLOW)
+  const [{ value: download }, , { setValue: setDownload }] =
+    useTrackField<Download>(DOWNLOAD)
+
   const isRemix = !isEmpty(remixOfValue?.tracks)
 
   /**
@@ -280,6 +308,11 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
     set(initialValues, IS_UNLISTED, isUnlisted)
     set(initialValues, IS_STREAM_GATED, isStreamGated)
     set(initialValues, STREAM_CONDITIONS, tempStreamConditions)
+    set(initialValues, IS_DOWNLOAD_GATED, isDownloadGated)
+    set(initialValues, DOWNLOAD_CONDITIONS, downloadConditions)
+    set(initialValues, IS_DOWNLOADABLE, isDownloadable)
+    set(initialValues, DOWNLOAD_REQUIRES_FOLLOW, downloadRequiresFollow)
+    set(initialValues, DOWNLOAD, download)
 
     let availabilityType = StreamTrackAvailabilityType.PUBLIC
     if (isUsdcGated) {
@@ -315,6 +348,11 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
     isUnlisted,
     isStreamGated,
     tempStreamConditions,
+    isDownloadGated,
+    downloadConditions,
+    isDownloadable,
+    downloadRequiresFollow,
+    download,
     fieldVisibility,
     preview,
     isScheduledRelease
@@ -340,33 +378,69 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
       // For gated options, extract the correct stream conditions based on the selected availability type
       switch (availabilityType) {
         case StreamTrackAvailabilityType.USDC_PURCHASE: {
+          // type cast because the object is fully formed in saga (validated + added splits)
+          const conditions = {
+            usdc_purchase: {
+              price: Math.round(
+                (streamConditions as USDCPurchaseConditions).usdc_purchase.price
+              )
+            }
+          } as USDCPurchaseConditions
+          setIsStreamGated(true)
+          setStreamConditionsValue(conditions)
           setPreviewValue(preview ?? 0)
-          const {
-            usdc_purchase: { price }
-          } = streamConditions as USDCPurchaseConditions
-          setStreamConditionsValue({
-            // @ts-ignore fully formed in saga (validated + added splits)
-            usdc_purchase: { price: Math.round(price) }
+          setIsDownloadGated(true)
+          setDownloadConditionsValue(conditions)
+          setIsDownloadable(true)
+          setDownloadRequiresFollow(false)
+          setDownload({
+            cid: null,
+            is_downloadable: true,
+            requires_follow: false
           })
-          setIsStreamGated(true)
           break
         }
         case StreamTrackAvailabilityType.SPECIAL_ACCESS: {
           if (specialAccessType === SpecialAccessType.FOLLOW) {
             const { follow_user_id } = streamConditions as FollowGatedConditions
             setStreamConditionsValue({ follow_user_id })
+            setDownloadConditionsValue({ follow_user_id })
+            setDownloadRequiresFollow(true)
+            setDownload({
+              cid: null,
+              is_downloadable: true,
+              requires_follow: true
+            })
           } else {
             const { tip_user_id } = streamConditions as TipGatedConditions
             setStreamConditionsValue({ tip_user_id })
+            setDownloadConditionsValue({ tip_user_id })
+            setDownloadRequiresFollow(false)
+            setDownload({
+              cid: null,
+              is_downloadable: true,
+              requires_follow: false
+            })
           }
           setIsStreamGated(true)
+          setIsDownloadGated(true)
+          setIsDownloadable(true)
           break
         }
         case StreamTrackAvailabilityType.COLLECTIBLE_GATED: {
           const { nft_collection } =
             streamConditions as CollectibleGatedConditions
-          setStreamConditionsValue({ nft_collection })
           setIsStreamGated(true)
+          setStreamConditionsValue({ nft_collection })
+          setIsDownloadGated(true)
+          setDownloadConditionsValue({ nft_collection })
+          setIsDownloadable(true)
+          setDownloadRequiresFollow(false)
+          setDownload({
+            cid: null,
+            is_downloadable: true,
+            requires_follow: false
+          })
           break
         }
         case StreamTrackAvailabilityType.HIDDEN: {
@@ -388,6 +462,11 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
       setIsStreamGated,
       setIsUnlistedValue,
       setStreamConditionsValue,
+      setIsDownloadGated,
+      setDownloadConditionsValue,
+      setIsDownloadable,
+      setDownloadRequiresFollow,
+      setDownload,
       setPreviewValue,
       isUnlisted
     ]
diff --git a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
index cd99ef3afea..8d4ae8a75e0 100644
--- a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
+++ b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
@@ -38,7 +38,7 @@ const messages = {
   premium: 'Premium',
   callout: {
     premium:
-      "You're uploading a premium track. By default, purchasers will be able to download your available files. If you'd like to sell your files, set your track to Public or Hidden in the",
+      "You're uploading a Premium track. By default, purchasers will be able to download your available files. If you'd like to sell your files, set your track to Public or Hidden in the",
     specialAccess:
       "You're uploading a Special Access track. By default, users who unlock your track will be able to download your available files. If you'd like to sell your files, set your track to Public or Hidden in the",
     collectibleGated:

From b9e50dbbcc5c84d15c2c205f67f9e27437a613b2 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 07:25:49 -0500
Subject: [PATCH 03/15] Add premium download callouts in access and sale

---
 .../SpecialAccessFields.tsx                   | 88 ++++++++++++-------
 .../CollectibleGatedFields.tsx                | 25 +++++-
 .../UsdcPurchaseFields.tsx                    | 22 ++++-
 3 files changed, 96 insertions(+), 39 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
index 27fd04b691f..83b2b5c3871 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
@@ -1,16 +1,24 @@
 import { ChangeEvent, useCallback } from 'react'
 
-import { accountSelectors } from '@audius/common'
+import {
+  AccessConditions,
+  FeatureFlags,
+  Nullable,
+  accountSelectors,
+  useFeatureFlag
+} from '@audius/common'
 import { IconInfo, RadioButton, RadioButtonGroup } from '@audius/stems'
 import cn from 'classnames'
 import { useField } from 'formik'
 import { useSelector } from 'react-redux'
 
+import { HelpCallout } from 'components/help-callout/HelpCallout'
 import Tooltip from 'components/tooltip/Tooltip'
 import { Text } from 'components/typography'
 
 import {
   AccessAndSaleFormValues,
+  DOWNLOAD_CONDITIONS,
   STREAM_CONDITIONS
 } from '../AccessAndSaleField'
 
@@ -21,7 +29,9 @@ const { getUserId } = accountSelectors
 const messages = {
   followersOnly: 'Available to Followers Only',
   supportersOnly: 'Available to Supporters Only',
-  supportersInfo: 'Supporters are users who have sent you a tip.'
+  supportersInfo: 'Supporters are users who have sent you a tip.',
+  premiumDownloads:
+    'Setting your track to Special Access will remove the availability you set on your premium downloads. Don’t worry, your stems are still saved!'
 }
 
 export enum SpecialAccessType {
@@ -46,6 +56,11 @@ export const SpecialAccessFields = (props: TrackAvailabilityFieldsProps) => {
     useField<AccessAndSaleFormValues[typeof STREAM_CONDITIONS]>(
       STREAM_CONDITIONS
     )
+  const [{ value: downloadConditions }] =
+    useField<Nullable<AccessConditions>>(DOWNLOAD_CONDITIONS)
+  const { isEnabled: isLosslessDownloadsEnabled } = useFeatureFlag(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -67,37 +82,42 @@ export const SpecialAccessFields = (props: TrackAvailabilityFieldsProps) => {
   )
 
   return (
-    <RadioButtonGroup
-      className={styles.root}
-      {...specialAccessTypeField}
-      onChange={handleChange}
-      defaultValue={SpecialAccessType.FOLLOW}
-    >
-      <label className={cn(styles.row, { [styles.disabled]: disabled })}>
-        <RadioButton
-          className={styles.radio}
-          value={SpecialAccessType.FOLLOW}
-          disabled={disabled}
-        />
-        <Text>{messages.followersOnly}</Text>
-      </label>
-      <label className={cn(styles.row, { [styles.disabled]: disabled })}>
-        <RadioButton
-          className={styles.radio}
-          value={SpecialAccessType.TIP}
-          disabled={disabled}
-        />
-        <Text>{messages.supportersOnly}</Text>
-        <Tooltip
-          className={styles.tooltip}
-          text={messages.supportersInfo}
-          mouseEnterDelay={0.1}
-          mount={'parent'}
-          color='--secondary'
-        >
-          <IconInfo className={styles.icon} />
-        </Tooltip>
-      </label>
-    </RadioButtonGroup>
+    <>
+      <RadioButtonGroup
+        className={styles.root}
+        {...specialAccessTypeField}
+        onChange={handleChange}
+        defaultValue={SpecialAccessType.FOLLOW}
+      >
+        <label className={cn(styles.row, { [styles.disabled]: disabled })}>
+          <RadioButton
+            className={styles.radio}
+            value={SpecialAccessType.FOLLOW}
+            disabled={disabled}
+          />
+          <Text>{messages.followersOnly}</Text>
+        </label>
+        <label className={cn(styles.row, { [styles.disabled]: disabled })}>
+          <RadioButton
+            className={styles.radio}
+            value={SpecialAccessType.TIP}
+            disabled={disabled}
+          />
+          <Text>{messages.supportersOnly}</Text>
+          <Tooltip
+            className={styles.tooltip}
+            text={messages.supportersInfo}
+            mouseEnterDelay={0.1}
+            mount={'parent'}
+            color='--secondary'
+          >
+            <IconInfo className={styles.icon} />
+          </Tooltip>
+        </label>
+      </RadioButtonGroup>
+      {isLosslessDownloadsEnabled && downloadConditions ? (
+        <HelpCallout icon={<IconInfo />} content={messages.premiumDownloads} />
+      ) : null}
+    </>
   )
 }
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
index 89378343352..1b748fb2b3c 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
@@ -1,11 +1,16 @@
 import { useMemo } from 'react'
 
 import {
+  AccessConditions,
   Chain,
   collectiblesSelectors,
+  FeatureFlags,
   isContentCollectibleGated,
-  StreamTrackAvailabilityType
+  Nullable,
+  StreamTrackAvailabilityType,
+  useFeatureFlag
 } from '@audius/common'
+import { Box, IconInfo } from '@audius/harmony'
 import { useField } from 'formik'
 import { useSelector } from 'react-redux'
 
@@ -14,6 +19,7 @@ import { HelpCallout } from 'components/help-callout/HelpCallout'
 
 import {
   AccessAndSaleFormValues,
+  DOWNLOAD_CONDITIONS,
   STREAM_AVAILABILITY_TYPE,
   STREAM_CONDITIONS
 } from '../../AccessAndSaleField'
@@ -27,7 +33,9 @@ const messages = {
   pickACollection: 'Pick a Collection',
   compatibilityTitle: "Not seeing what you're looking for?",
   compatibilitySubtitle:
-    'Unverified Solana NFT Collections are not compatible at this time.'
+    'Unverified Solana NFT Collections are not compatible at this time.',
+  premiumDownloads:
+    'Setting your track to Collectible Gated will remove the availability you set on your premium downloads. Don’t worry, your stems are still saved!'
 }
 
 type CollectibleGatedFieldsProps = {
@@ -47,6 +55,11 @@ export const CollectibleGatedFields = (props: CollectibleGatedFieldsProps) => {
     useField<AccessAndSaleFormValues[typeof STREAM_CONDITIONS]>(
       STREAM_CONDITIONS
     )
+  const [{ value: downloadConditions }] =
+    useField<Nullable<AccessConditions>>(DOWNLOAD_CONDITIONS)
+  const { isEnabled: isLosslessDownloadsEnabled } = useFeatureFlag(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
 
   const { ethCollectionMap, solCollectionMap } = useSelector(
     getSupportedUserCollections
@@ -167,6 +180,14 @@ export const CollectibleGatedFields = (props: CollectibleGatedFieldsProps) => {
         footer={renderFooter()}
         disabled={disabled}
       />
+      {isLosslessDownloadsEnabled && downloadConditions ? (
+        <Box mt='l'>
+          <HelpCallout
+            icon={<IconInfo />}
+            content={messages.premiumDownloads}
+          />
+        </Box>
+      ) : null}
     </div>
   )
 }
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
index e2a0349a631..2259c4fb1ee 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
@@ -6,16 +6,22 @@ import {
 } from 'react'
 
 import {
+  AccessConditions,
+  FeatureFlags,
+  Nullable,
   decimalIntegerToHumanReadable,
   filterDecimalString,
-  padDecimalValue
+  padDecimalValue,
+  useFeatureFlag
 } from '@audius/common'
+import { IconInfo } from '@audius/harmony'
 import cn from 'classnames'
 import { useField } from 'formik'
 
+import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 
-import { PREVIEW, PRICE } from '../../AccessAndSaleField'
+import { PREVIEW, PRICE, DOWNLOAD_CONDITIONS } from '../../AccessAndSaleField'
 import { BoxedTextField } from '../../BoxedTextField'
 
 const messages = {
@@ -34,7 +40,9 @@ const messages = {
   },
   dollars: '$',
   usdc: '(USDC)',
-  seconds: '(Seconds)'
+  seconds: '(Seconds)',
+  premiumDownloads:
+    'Setting your track to Premium will remove the availability settings you set on your premium downloads. Don’t worry, your stems are still saved!'
 }
 
 export enum UsdcPurchaseType {
@@ -48,11 +56,19 @@ export type TrackAvailabilityFieldsProps = {
 
 export const UsdcPurchaseFields = (props: TrackAvailabilityFieldsProps) => {
   const { disabled } = props
+  const [{ value: downloadConditions }] =
+    useField<Nullable<AccessConditions>>(DOWNLOAD_CONDITIONS)
+  const { isEnabled: isLosslessDownloadsEnabled } = useFeatureFlag(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
 
   return (
     <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
       <PriceField disabled={disabled} />
       <PreviewField disabled={disabled} />
+      {isLosslessDownloadsEnabled && downloadConditions ? (
+        <HelpCallout icon={<IconInfo />} content={messages.premiumDownloads} />
+      ) : null}
     </div>
   )
 }

From 2cc2cf29e9f525c579f38787fcb1e22d9be40c19 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 07:33:55 -0500
Subject: [PATCH 04/15] Fix collectible gated subtitle

---
 .../collectible-gated/CollectibleGatedDescription.tsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx
index b042a1d8318..90e33a03c18 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx
@@ -1,4 +1,5 @@
 import { collectiblesSelectors } from '@audius/common'
+import { Text } from '@audius/harmony'
 import { Button, ButtonType } from '@audius/stems'
 import { useSelector } from 'react-redux'
 
@@ -43,7 +44,7 @@ export const CollectibleGatedDescription = (
 
   return (
     <div className={styles.innerDescription}>
-      {messages.collectibleGatedSubtitle}
+      <Text variant='body'>{messages.collectibleGatedSubtitle}</Text>
       {!hasCollectibles && isUpload ? (
         <HelpCallout content={helpContent} />
       ) : null}

From 840add72d9d0fc1963d50c04286aacdcf7a6c175 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 07:58:19 -0500
Subject: [PATCH 05/15] Fix stems and downloads field labels

---
 .../fields/StemsAndDownloadsField.tsx         | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
index 73618e6340b..427e0645cee 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
@@ -81,11 +81,9 @@ export const StemsAndDownloadsField = () => {
     ,
     { setValue: setisOriginalAvailable }
   ] = useTrackField<boolean>(IS_ORIGINAL_AVAILABLE)
-  const [
-    { value: downloadRequiresFollow },
-    ,
-    { setValue: setDownloadRequiresFollow }
-  ] = useTrackField<boolean>(DOWNLOAD_REQUIRES_FOLLOW)
+  const [, , { setValue: setDownloadRequiresFollow }] = useTrackField<boolean>(
+    DOWNLOAD_REQUIRES_FOLLOW
+  )
   const [{ value: stemsValue }, , { setValue: setStemsValue }] =
     useTrackField<StemUpload[]>(STEMS)
   const [, , { setValue: setDownloadValue }] = useTrackField<Download>(DOWNLOAD)
@@ -257,15 +255,21 @@ export const StemsAndDownloadsField = () => {
 
   const renderValue = () => {
     let values = []
-    if (downloadRequiresFollow) {
-      values.push(messages.values.followerGated)
-    } else if (isContentUSDCPurchaseGated(savedDownloadConditions)) {
-      values.push({
-        label: messages.price(
-          savedDownloadConditions.usdc_purchase.price / 100
-        ),
-        icon: IconCart
-      })
+    if (!streamConditions) {
+      if (
+        isLosslessDownloadsEnabled &&
+        isContentUSDCPurchaseGated(savedDownloadConditions)
+      ) {
+        values.push({
+          label: messages.price(
+            savedDownloadConditions.usdc_purchase.price / 100
+          ),
+          icon: IconCart
+        })
+      }
+      if (isContentFollowGated(savedDownloadConditions)) {
+        values.push(messages.values.followerGated)
+      }
     }
     if (isDownloadable) {
       values.push(messages.values.allowDownload)

From 6da218bbf8f4557a1e4cf99956e0e7a59e61a1e7 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 08:15:35 -0500
Subject: [PATCH 06/15] Fix downloadable assets check

---
 .../src/pages/upload-page/fields/StemsAndDownloadsField.tsx   | 4 +---
 .../pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx  | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
index 427e0645cee..ff50a0da6a8 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
@@ -63,9 +63,7 @@ const messages = {
     followerGated: 'Followers Only'
   },
   price: (price: number) =>
-    price.toLocaleString('en-US', { style: 'currency', currency: 'USD' }),
-  noDownloadableAssets:
-    'You must enable the full track download or upload a stem file before setting download availability.'
+    price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
 }
 
 export const StemsAndDownloadsField = () => {
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
index 975c3f163f0..4c33e3da91d 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
@@ -133,6 +133,7 @@ export const stemsAndDownloadsSchema = ({
       // cannot be download gated if no downloadable assets
       (values) => {
         const formValues = values as StemsAndDownloadsFormValues
+        const streamConditions = formValues[STREAM_CONDITIONS]
         const availabilityType = formValues[DOWNLOAD_AVAILABILITY_TYPE]
         const isDownloadGated = [
           DownloadTrackAvailabilityType.FOLLOWERS,
@@ -142,7 +143,7 @@ export const stemsAndDownloadsSchema = ({
         const stems = formValues[STEMS]
         const hasStems = stems.length > 0
         const hasDownloadableAssets = isDownloadable || hasStems
-        return !isDownloadGated || hasDownloadableAssets
+        return streamConditions || !isDownloadGated || hasDownloadableAssets
       },
       {
         message: messages.noDownloadableAssets,

From 77408bfbed236d54c8d52b0ac6c904185241bb6f Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 11:46:07 -0500
Subject: [PATCH 07/15] Open access and sale if callout linked clicked from
 stems and downloads

---
 .../components/data-entry/ContextualMenu.tsx  | 42 +++++++++++++++++--
 .../upload-page/fields/AccessAndSaleField.tsx |  6 ++-
 .../fields/StemsAndDownloadsField.tsx         |  9 +++-
 .../DownloadAvailability.tsx                  |  6 ++-
 .../pages/upload-page/forms/EditTrackForm.tsx | 18 ++++++--
 5 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/components/data-entry/ContextualMenu.tsx b/packages/web/src/components/data-entry/ContextualMenu.tsx
index 689949dfee7..df6e9b87cca 100644
--- a/packages/web/src/components/data-entry/ContextualMenu.tsx
+++ b/packages/web/src/components/data-entry/ContextualMenu.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, useCallback, useMemo } from 'react'
+import { ReactNode, ReactElement, useCallback, useMemo, useEffect } from 'react'
 
 import { Nullable } from '@audius/common'
 import { Box, Text as HarmonyText } from '@audius/harmony'
@@ -35,19 +35,32 @@ const messages = {
   save: 'Save'
 }
 
+export enum MenuFormCallbackStatus {
+  OPEN_ACCESS_AND_SALE = 'OPEN_ACCESS_AND_SALE'
+}
+
 type MenuFormProps = {
   isOpen: boolean
   onClose: () => void
   label: string
   icon: ReactNode
   menuFields: ReactNode
+  closeMenuCallback?: (data?: any) => void
   displayMenuErrorMessage?: (errors: FormikErrors<any>) => Nullable<string>
 }
 
 const MenuForm = (props: MenuFormProps) => {
-  const { isOpen, onClose, label, icon, menuFields, displayMenuErrorMessage } =
-    props
-  const { resetForm, errors } = useFormikContext()
+  const {
+    isOpen,
+    onClose,
+    label,
+    icon,
+    menuFields,
+    closeMenuCallback,
+    displayMenuErrorMessage
+  } = props
+  const { resetForm, errors, initialStatus, status, setStatus } =
+    useFormikContext()
 
   const handleCancel = useCallback(() => {
     resetForm()
@@ -60,6 +73,13 @@ const MenuForm = (props: MenuFormProps) => {
     }
   }, [displayMenuErrorMessage, errors])
 
+  useEffect(() => {
+    if (!isOpen) {
+      closeMenuCallback?.(status)
+      setStatus(initialStatus)
+    }
+  }, [isOpen, closeMenuCallback, status, setStatus, initialStatus])
+
   return (
     <Modal onClose={handleCancel} isOpen={isOpen} size='medium'>
       <ModalHeader>
@@ -119,6 +139,9 @@ type ContextualMenuProps<FormValues extends FormikValues> = {
   icon: ReactElement
   renderValue: () => JSX.Element | null
   menuFields: ReactNode
+  closeMenuCallback?: (data?: any) => void
+  forceOpen?: boolean
+  setForceOpen?: (value: boolean) => void
   error?: boolean
   errorMessage?: string
   displayMenuErrorMessage?: (
@@ -137,6 +160,9 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
     menuFields,
     renderValue,
     onSubmit,
+    forceOpen,
+    setForceOpen,
+    closeMenuCallback,
     error,
     errorMessage,
     displayMenuErrorMessage,
@@ -145,6 +171,13 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
   } = props
   const [isMenuOpen, toggleMenu] = useToggle(false)
 
+  useEffect(() => {
+    if (forceOpen && setForceOpen) {
+      setForceOpen(false)
+      toggleMenu()
+    }
+  }, [forceOpen, setForceOpen, toggleMenu])
+
   const preview = previewOverride ? (
     previewOverride(toggleMenu)
   ) : (
@@ -181,6 +214,7 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
           isOpen={isMenuOpen}
           onClose={toggleMenu}
           menuFields={menuFields}
+          closeMenuCallback={closeMenuCallback}
           displayMenuErrorMessage={displayMenuErrorMessage}
         />
       </Formik>
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
index a856c97faae..b6b69c637ea 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
@@ -217,10 +217,12 @@ export const getCombinedDefaultGatedConditionValues = (
 type AccessAndSaleFieldProps = {
   isUpload?: boolean
   trackLength?: number
+  forceOpen?: boolean
+  setForceOpen?: (value: boolean) => void
 }
 
 export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
-  const { isUpload } = props
+  const { isUpload, forceOpen, setForceOpen } = props
 
   const [{ value: index }] = useField('trackMetadatasIndex')
   const [{ value: trackLength }] = useIndexedField<number>(
@@ -582,6 +584,8 @@ export const AccessAndSaleField = (props: AccessAndSaleFieldProps) => {
           isScheduledRelease={isScheduledRelease}
         />
       }
+      forceOpen={forceOpen}
+      setForceOpen={setForceOpen}
     />
   )
 }
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
index ff50a0da6a8..e24b5af1b49 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
@@ -66,7 +66,13 @@ const messages = {
     price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
 }
 
-export const StemsAndDownloadsField = () => {
+type StemsAndDownloadsFieldProps = {
+  closeMenuCallback?: (data?: any) => void
+}
+
+export const StemsAndDownloadsField = ({
+  closeMenuCallback
+}: StemsAndDownloadsFieldProps) => {
   const isLosslessDownloadsEnabled = getFeatureEnabled(
     FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
   )
@@ -304,6 +310,7 @@ export const StemsAndDownloadsField = () => {
         stemsAndDownloadsSchema(usdcPurchaseConfig)
       )}
       menuFields={<StemsAndDownloadsMenuFields />}
+      closeMenuCallback={closeMenuCallback}
       displayMenuErrorMessage={(
         errors: FormikErrors<StemsAndDownloadsFormValues>
       ) => {
diff --git a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
index 8d4ae8a75e0..7fdd83e8386 100644
--- a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
+++ b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
@@ -22,6 +22,7 @@ import {
 import { SegmentedControl } from '@audius/stems'
 import { useFormikContext } from 'formik'
 
+import { MenuFormCallbackStatus } from 'components/data-entry/ContextualMenu'
 import { Divider } from 'components/divider'
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { useTrackField } from 'pages/upload-page/hooks'
@@ -56,7 +57,7 @@ export const DownloadAvailability = ({
   value,
   setValue
 }: DownloadAvailabilityProps) => {
-  const { submitForm } = useFormikContext()
+  const { submitForm, setStatus } = useFormikContext()
   const [{ value: streamConditions }] =
     useTrackField<Nullable<AccessConditions>>(STREAM_CONDITIONS)
   const isUsdcGated = isContentUSDCPurchaseGated(streamConditions)
@@ -81,8 +82,9 @@ export const DownloadAvailability = ({
   }, [isCollectibleGated, isSpecialAccess, isUsdcGated])
 
   const handleCalloutClick = useCallback(() => {
+    setStatus(MenuFormCallbackStatus.OPEN_ACCESS_AND_SALE)
     submitForm()
-  }, [submitForm])
+  }, [setStatus, submitForm])
 
   const options = [
     {
diff --git a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
index 278f77ad8e4..b7331b55843 100644
--- a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo } from 'react'
+import { useCallback, useContext, useMemo, useState } from 'react'
 
 import { FeatureFlags } from '@audius/common'
 import { HarmonyPlainButton, IconCaretRight } from '@audius/stems'
@@ -10,6 +10,7 @@ import { z } from 'zod'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import IconCaretLeft from 'assets/img/iconCaretLeft.svg'
+import { MenuFormCallbackStatus } from 'components/data-entry/ContextualMenu'
 import layoutStyles from 'components/layout/layout.module.css'
 import { NavigationPrompt } from 'components/navigation-prompt/NavigationPrompt'
 import { Text } from 'components/typography'
@@ -124,6 +125,7 @@ const TrackEditForm = (props: FormikProps<TrackEditFormValues>) => {
   const { isEnabled: isScheduledReleasesEnabled } = useFlag(
     FeatureFlags.SCHEDULED_RELEASES
   )
+  const [forceOpenAccessAndSale, setForceOpenAccessAndSale] = useState(false)
 
   return (
     <Form>
@@ -145,9 +147,19 @@ const TrackEditForm = (props: FormikProps<TrackEditFormValues>) => {
               ) : (
                 <ReleaseDateFieldLegacy />
               )}
-              <AccessAndSaleField isUpload />
+              <AccessAndSaleField
+                isUpload
+                forceOpen={forceOpenAccessAndSale}
+                setForceOpen={setForceOpenAccessAndSale}
+              />
               <AttributionField />
-              <StemsAndDownloadsField />
+              <StemsAndDownloadsField
+                closeMenuCallback={(data) => {
+                  if (data === MenuFormCallbackStatus.OPEN_ACCESS_AND_SALE) {
+                    setForceOpenAccessAndSale(true)
+                  }
+                }}
+              />
               <RemixSettingsField />
             </div>
             <PreviewButton

From 163bc1b748ed30bdd953141870e1900ab6f451b6 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 12:12:07 -0500
Subject: [PATCH 08/15] Move out shared types

---
 .../data-entry/AccessAndSaleTriggerLegacy.tsx | 14 ++---
 .../upload-page/fields/AccessAndSaleField.tsx | 61 ++++++-------------
 .../fields/AccessAndSaleMenuFields.tsx        |  5 +-
 .../upload-page/fields/ReleaseDateField.tsx   |  2 +-
 .../RemixSettingsField/RemixSettingsField.tsx |  2 +-
 .../RemixSettingsMenuFields.tsx               |  2 +-
 .../fields/StemsAndDownloadsField.tsx         | 22 +++----
 .../fields/StemsAndDownloadsMenuFields.tsx    | 28 ++++-----
 .../DownloadAvailability.tsx                  |  2 +-
 .../DownloadPriceField.tsx                    |  4 +-
 .../src/pages/upload-page/fields/helpers.ts   | 16 +++++
 .../HiddenAvailabilityFields.tsx              |  2 +-
 .../SpecialAccessFields.tsx                   | 10 +--
 .../CollectibleGatedFields.tsx                |  2 +-
 .../UsdcPurchaseFields.tsx                    |  2 +-
 .../web/src/pages/upload-page/fields/types.ts | 44 +++++++++++++
 16 files changed, 120 insertions(+), 98 deletions(-)
 create mode 100644 packages/web/src/pages/upload-page/fields/helpers.ts

diff --git a/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx b/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
index 7e001fe9b82..9207173f64d 100644
--- a/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
+++ b/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
@@ -31,21 +31,21 @@ import { useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { defaultFieldVisibility } from 'pages/track-page/utils'
+import { AccessAndSaleFormSchema } from 'pages/upload-page/fields/AccessAndSaleField'
+import { AccessAndSaleMenuFields } from 'pages/upload-page/fields/AccessAndSaleMenuFields'
+import { getCombinedDefaultGatedConditionValues } from 'pages/upload-page/fields/helpers'
 import {
-  STREAM_AVAILABILITY_TYPE,
-  AccessAndSaleFormSchema,
   AccessAndSaleFormValues,
   FIELD_VISIBILITY,
   IS_STREAM_GATED,
   IS_UNLISTED,
-  STREAM_CONDITIONS,
   PREVIEW,
   PRICE_HUMANIZED,
   SPECIAL_ACCESS_TYPE,
-  getCombinedDefaultGatedConditionValues
-} from 'pages/upload-page/fields/AccessAndSaleField'
-import { AccessAndSaleMenuFields } from 'pages/upload-page/fields/AccessAndSaleMenuFields'
-import { SpecialAccessType } from 'pages/upload-page/fields/stream-availability/SpecialAccessFields'
+  STREAM_AVAILABILITY_TYPE,
+  STREAM_CONDITIONS,
+  SpecialAccessType
+} from 'pages/upload-page/fields/types'
 
 import styles from './AccessAndSaleTriggerLegacy.module.css'
 import { ContextualMenu } from './ContextualMenu'
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
index b6b69c637ea..02c88997bff 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
@@ -8,7 +8,6 @@ import {
   isContentFollowGated,
   isContentTipGated,
   isContentUSDCPurchaseGated,
-  Nullable,
   StreamTrackAvailabilityType,
   USDCPurchaseConfig,
   useUSDCPurchaseConfig,
@@ -16,8 +15,6 @@ import {
   USDCPurchaseConditions,
   FollowGatedConditions,
   TipGatedConditions,
-  ID,
-  AccessConditions,
   Download
 } from '@audius/common'
 import {
@@ -48,12 +45,26 @@ import { SingleTrackEditValues } from '../types'
 import styles from './AccessAndSaleField.module.css'
 import { AccessAndSaleMenuFields } from './AccessAndSaleMenuFields'
 import { REMIX_OF } from './RemixSettingsField'
+import { getCombinedDefaultGatedConditionValues } from './helpers'
 import {
+  AccessAndSaleFormValues,
   DOWNLOAD,
+  DOWNLOAD_CONDITIONS,
   DOWNLOAD_REQUIRES_FOLLOW,
-  IS_DOWNLOADABLE
-} from './StemsAndDownloadsMenuFields'
-import { SpecialAccessType } from './stream-availability/SpecialAccessFields'
+  FIELD_VISIBILITY,
+  IS_DOWNLOADABLE,
+  IS_DOWNLOAD_GATED,
+  IS_SCHEDULED_RELEASE,
+  IS_STREAM_GATED,
+  IS_UNLISTED,
+  PREVIEW,
+  PRICE,
+  PRICE_HUMANIZED,
+  SPECIAL_ACCESS_TYPE,
+  STREAM_AVAILABILITY_TYPE,
+  STREAM_CONDITIONS,
+  SpecialAccessType
+} from './types'
 
 const { getUserId } = accountSelectors
 
@@ -97,29 +108,6 @@ const messages = {
   required: 'Required'
 }
 
-export const IS_SCHEDULED_RELEASE = 'is_scheduled_release'
-export const IS_UNLISTED = 'is_unlisted'
-export const IS_STREAM_GATED = 'is_stream_gated'
-export const STREAM_CONDITIONS = 'stream_conditions'
-export const IS_DOWNLOAD_GATED = 'is_download_gated'
-export const DOWNLOAD_CONDITIONS = 'download_conditions'
-export const STREAM_AVAILABILITY_TYPE = 'stream_availability_type'
-export const SPECIAL_ACCESS_TYPE = 'special_access_type'
-export const FIELD_VISIBILITY = 'field_visibility'
-export const PRICE = 'stream_conditions.usdc_purchase.price'
-export const PRICE_HUMANIZED = 'price_humanized'
-export const PREVIEW = 'preview_start_seconds'
-
-export type AccessAndSaleFormValues = {
-  [IS_UNLISTED]: boolean
-  [STREAM_AVAILABILITY_TYPE]: StreamTrackAvailabilityType
-  [STREAM_CONDITIONS]: Nullable<AccessConditions>
-  [SPECIAL_ACCESS_TYPE]: Nullable<SpecialAccessType>
-  [FIELD_VISIBILITY]: FieldVisibility
-  [PRICE_HUMANIZED]: string
-  [PREVIEW]?: number
-}
-
 export type USDCPurchaseRemoteConfig = Pick<
   USDCPurchaseConfig,
   'minContentPriceCents' | 'maxContentPriceCents'
@@ -199,21 +187,6 @@ export const AccessAndSaleFormSchema = (
       { message: messages.errors.preview.tooLate, path: [PREVIEW] }
     )
 
-/**
- * Allows us to store all the user selections in the Access & Sale modal
- * so that their previous selections is remembered as they change between the radio button options.
- * On submit (saving the changes in the Access & Sale modal), we only save the corresponding
- * stream conditions based on the availability type they have currently selected.
- */
-export const getCombinedDefaultGatedConditionValues = (
-  userId: Nullable<ID>
-) => ({
-  usdc_purchase: { price: null },
-  follow_user_id: userId,
-  tip_user_id: userId,
-  nft_collection: undefined
-})
-
 type AccessAndSaleFieldProps = {
   isUpload?: boolean
   trackLength?: number
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
index d45c6b78794..ed88de0dfda 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
@@ -22,15 +22,12 @@ import { useFlag } from 'hooks/useRemoteConfig'
 
 import { SingleTrackEditValues } from '../types'
 
-import {
-  STREAM_AVAILABILITY_TYPE,
-  STREAM_CONDITIONS
-} from './AccessAndSaleField'
 import styles from './AccessAndSaleField.module.css'
 import { HiddenAvailabilityFields } from './stream-availability/HiddenAvailabilityFields'
 import { SpecialAccessFields } from './stream-availability/SpecialAccessFields'
 import { CollectibleGatedRadioField } from './stream-availability/collectible-gated/CollectibleGatedRadioField'
 import { UsdcPurchaseGatedRadioField } from './stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField'
+import { STREAM_AVAILABILITY_TYPE, STREAM_CONDITIONS } from './types'
 
 const messages = {
   title: 'Access & Sale',
diff --git a/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx b/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx
index 46d5db3dba9..0cf9cc72aed 100644
--- a/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx
+++ b/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx
@@ -24,9 +24,9 @@ import { formatCalendarTime } from 'utils/dateUtils'
 import { useTrackField } from '../hooks'
 import { SingleTrackEditValues } from '../types'
 
-import { IS_UNLISTED } from './AccessAndSaleField'
 import { DatePickerField } from './DatePickerField'
 import styles from './ReleaseDateField.module.css'
+import { IS_UNLISTED } from './types'
 
 const messages = {
   title: 'Release Date',
diff --git a/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsField.tsx b/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsField.tsx
index c91c4bbe231..28c69bf0fda 100644
--- a/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsField.tsx
@@ -21,7 +21,7 @@ import { fullTrackPage } from 'utils/route'
 
 import { useTrackField } from '../../hooks'
 import { SingleTrackEditValues } from '../../types'
-import { IS_STREAM_GATED, STREAM_CONDITIONS } from '../AccessAndSaleField'
+import { IS_STREAM_GATED, STREAM_CONDITIONS } from '../types'
 
 import styles from './RemixSettingsField.module.css'
 import { RemixSettingsMenuFields } from './RemixSettingsMenuFields'
diff --git a/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx
index 46aa587e094..2c17a307671 100644
--- a/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx
@@ -16,8 +16,8 @@ import { Divider } from 'components/divider'
 import { TextField } from 'components/form-fields'
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 
-import { IS_STREAM_GATED, STREAM_CONDITIONS } from '../AccessAndSaleField'
 import { SwitchRowField } from '../SwitchRowField'
+import { IS_STREAM_GATED, STREAM_CONDITIONS } from '../types'
 
 import styles from './RemixSettingsField.module.css'
 import { TrackInfo } from './TrackInfo'
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
index e24b5af1b49..4792043f543 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
@@ -32,24 +32,24 @@ import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { useTrackField } from '../hooks'
 
 import {
-  DOWNLOAD_CONDITIONS,
-  IS_DOWNLOAD_GATED,
-  getCombinedDefaultGatedConditionValues,
-  STREAM_CONDITIONS
-} from './AccessAndSaleField'
+  StemsAndDownloadsFormValues,
+  StemsAndDownloadsMenuFields,
+  stemsAndDownloadsSchema
+} from './StemsAndDownloadsMenuFields'
+import { getCombinedDefaultGatedConditionValues } from './helpers'
 import {
+  IS_DOWNLOAD_GATED,
+  DOWNLOAD_CONDITIONS,
+  STREAM_CONDITIONS,
   CID,
   DOWNLOAD,
   DOWNLOAD_AVAILABILITY_TYPE,
+  DOWNLOAD_PRICE_HUMANIZED,
   DOWNLOAD_REQUIRES_FOLLOW,
   IS_DOWNLOADABLE,
   IS_ORIGINAL_AVAILABLE,
-  STEMS,
-  StemsAndDownloadsFormValues,
-  StemsAndDownloadsMenuFields,
-  stemsAndDownloadsSchema
-} from './StemsAndDownloadsMenuFields'
-import { DOWNLOAD_PRICE_HUMANIZED } from './download-availability/DownloadPriceField'
+  STEMS
+} from './types'
 
 const { getUserId } = accountSelectors
 
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
index 4c33e3da91d..73dd4f9df7b 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
@@ -21,25 +21,23 @@ import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 
 import { processFiles } from '../store/utils/processFiles'
 
-import {
-  DOWNLOAD_CONDITIONS,
-  IS_DOWNLOAD_GATED,
-  STREAM_CONDITIONS,
-  USDCPurchaseRemoteConfig
-} from './AccessAndSaleField'
+import { USDCPurchaseRemoteConfig } from './AccessAndSaleField'
 import { StemFilesView, dropdownRows as stemCategories } from './StemFilesView'
 import styles from './StemsAndDownloadsField.module.css'
 import { SwitchRowField } from './SwitchRowField'
 import { DownloadAvailability } from './download-availability/DownloadAvailability'
-import { DOWNLOAD_PRICE } from './download-availability/DownloadPriceField'
-
-export const IS_DOWNLOADABLE = 'is_downloadable'
-export const IS_ORIGINAL_AVAILABLE = 'is_original_available'
-export const DOWNLOAD_REQUIRES_FOLLOW = 'download_requires_follow'
-export const STEMS = 'stems'
-export const DOWNLOAD = 'download'
-export const CID = 'download.cid'
-export const DOWNLOAD_AVAILABILITY_TYPE = 'download_availability_type'
+import {
+  IS_DOWNLOAD_GATED,
+  DOWNLOAD_CONDITIONS,
+  STREAM_CONDITIONS,
+  CID,
+  DOWNLOAD_AVAILABILITY_TYPE,
+  DOWNLOAD_REQUIRES_FOLLOW,
+  IS_DOWNLOADABLE,
+  IS_ORIGINAL_AVAILABLE,
+  STEMS,
+  DOWNLOAD_PRICE
+} from './types'
 
 const messages = {
   description:
diff --git a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
index 7fdd83e8386..7baaa513725 100644
--- a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
+++ b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
@@ -27,7 +27,7 @@ import { Divider } from 'components/divider'
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { useTrackField } from 'pages/upload-page/hooks'
 
-import { STREAM_CONDITIONS } from '../AccessAndSaleField'
+import { STREAM_CONDITIONS } from '../types'
 
 import { DownloadPriceField } from './DownloadPriceField'
 
diff --git a/packages/web/src/pages/upload-page/fields/download-availability/DownloadPriceField.tsx b/packages/web/src/pages/upload-page/fields/download-availability/DownloadPriceField.tsx
index 572b92a3d27..a2e21624335 100644
--- a/packages/web/src/pages/upload-page/fields/download-availability/DownloadPriceField.tsx
+++ b/packages/web/src/pages/upload-page/fields/download-availability/DownloadPriceField.tsx
@@ -13,6 +13,7 @@ import {
 import { useField } from 'formik'
 
 import { BoxedTextField } from '../BoxedTextField'
+import { DOWNLOAD_PRICE } from '../types'
 
 const messages = {
   price: {
@@ -26,9 +27,6 @@ const messages = {
   usdc: '(USDC)'
 }
 
-export const DOWNLOAD_PRICE = 'download_conditions.usdc_purchase.price'
-export const DOWNLOAD_PRICE_HUMANIZED = 'download_price_humanized'
-
 type TrackAvailabilityFieldsProps = {
   disabled?: boolean
 }
diff --git a/packages/web/src/pages/upload-page/fields/helpers.ts b/packages/web/src/pages/upload-page/fields/helpers.ts
new file mode 100644
index 00000000000..0afa679bb43
--- /dev/null
+++ b/packages/web/src/pages/upload-page/fields/helpers.ts
@@ -0,0 +1,16 @@
+import { ID, Nullable } from '@audius/common'
+
+/**
+ * Allows us to store all the user selections in the Access & Sale modal
+ * so that their previous selections is remembered as they change between the radio button options.
+ * On submit (saving the changes in the Access & Sale modal), we only save the corresponding
+ * stream conditions based on the availability type they have currently selected.
+ */
+export const getCombinedDefaultGatedConditionValues = (
+  userId: Nullable<ID>
+) => ({
+  usdc_purchase: { price: null },
+  follow_user_id: userId,
+  tip_user_id: userId,
+  nft_collection: undefined
+})
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/HiddenAvailabilityFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/HiddenAvailabilityFields.tsx
index f54c27cd534..ecd46fff0fb 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/HiddenAvailabilityFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/HiddenAvailabilityFields.tsx
@@ -3,7 +3,7 @@ import { useField } from 'formik'
 
 import { Text } from 'components/typography'
 
-import { FIELD_VISIBILITY } from '../AccessAndSaleField'
+import { FIELD_VISIBILITY } from '../types'
 
 import styles from './HiddenAvailabilityFields.module.css'
 
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
index 83b2b5c3871..5baee37bf0a 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
@@ -19,8 +19,9 @@ import { Text } from 'components/typography'
 import {
   AccessAndSaleFormValues,
   DOWNLOAD_CONDITIONS,
-  STREAM_CONDITIONS
-} from '../AccessAndSaleField'
+  STREAM_CONDITIONS,
+  SpecialAccessType
+} from '../types'
 
 import styles from './SpecialAccessFields.module.css'
 
@@ -34,11 +35,6 @@ const messages = {
     'Setting your track to Special Access will remove the availability you set on your premium downloads. Don’t worry, your stems are still saved!'
 }
 
-export enum SpecialAccessType {
-  TIP = 'tip',
-  FOLLOW = 'follow'
-}
-
 type TrackAvailabilityFieldsProps = {
   disabled?: boolean
 }
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
index 1b748fb2b3c..ed99dab538f 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
@@ -22,7 +22,7 @@ import {
   DOWNLOAD_CONDITIONS,
   STREAM_AVAILABILITY_TYPE,
   STREAM_CONDITIONS
-} from '../../AccessAndSaleField'
+} from '../../types'
 
 import styles from './CollectibleGatedFields.module.css'
 
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
index 2259c4fb1ee..bb953c774de 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
@@ -21,8 +21,8 @@ import { useField } from 'formik'
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 
-import { PREVIEW, PRICE, DOWNLOAD_CONDITIONS } from '../../AccessAndSaleField'
 import { BoxedTextField } from '../../BoxedTextField'
+import { DOWNLOAD_CONDITIONS, PREVIEW, PRICE } from '../../types'
 
 const messages = {
   price: {
diff --git a/packages/web/src/pages/upload-page/fields/types.ts b/packages/web/src/pages/upload-page/fields/types.ts
index 8990b1cf25d..1158b5bb5a0 100644
--- a/packages/web/src/pages/upload-page/fields/types.ts
+++ b/packages/web/src/pages/upload-page/fields/types.ts
@@ -1,6 +1,50 @@
+import {
+  AccessConditions,
+  FieldVisibility,
+  Nullable,
+  StreamTrackAvailabilityType
+} from '@audius/common'
+
 export type FieldProps = {
   name: string
   label: string
   required?: boolean
   errorMessage?: string
 }
+
+export enum SpecialAccessType {
+  TIP = 'tip',
+  FOLLOW = 'follow'
+}
+
+export const IS_SCHEDULED_RELEASE = 'is_scheduled_release'
+export const IS_UNLISTED = 'is_unlisted'
+export const IS_STREAM_GATED = 'is_stream_gated'
+export const STREAM_CONDITIONS = 'stream_conditions'
+export const IS_DOWNLOAD_GATED = 'is_download_gated'
+export const DOWNLOAD_CONDITIONS = 'download_conditions'
+export const STREAM_AVAILABILITY_TYPE = 'stream_availability_type'
+export const SPECIAL_ACCESS_TYPE = 'special_access_type'
+export const FIELD_VISIBILITY = 'field_visibility'
+export const PRICE = 'stream_conditions.usdc_purchase.price'
+export const PRICE_HUMANIZED = 'price_humanized'
+export const PREVIEW = 'preview_start_seconds'
+export const IS_DOWNLOADABLE = 'is_downloadable'
+export const IS_ORIGINAL_AVAILABLE = 'is_original_available'
+export const DOWNLOAD_REQUIRES_FOLLOW = 'download_requires_follow'
+export const STEMS = 'stems'
+export const DOWNLOAD = 'download'
+export const CID = 'download.cid'
+export const DOWNLOAD_AVAILABILITY_TYPE = 'download_availability_type'
+export const DOWNLOAD_PRICE = 'download_conditions.usdc_purchase.price'
+export const DOWNLOAD_PRICE_HUMANIZED = 'download_price_humanized'
+
+export type AccessAndSaleFormValues = {
+  [IS_UNLISTED]: boolean
+  [STREAM_AVAILABILITY_TYPE]: StreamTrackAvailabilityType
+  [STREAM_CONDITIONS]: Nullable<AccessConditions>
+  [SPECIAL_ACCESS_TYPE]: Nullable<SpecialAccessType>
+  [FIELD_VISIBILITY]: FieldVisibility
+  [PRICE_HUMANIZED]: string
+  [PREVIEW]?: number
+}

From 23abc2a626db6b979f8056f61f63b84afc870052 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 12:29:27 -0500
Subject: [PATCH 09/15] More cleanup

---
 .../fields/StemsAndDownloadsField.tsx         |  4 +--
 .../fields/StemsAndDownloadsMenuFields.tsx    | 17 ++-------
 .../web/src/pages/upload-page/fields/types.ts | 36 +++++++++++++------
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
index 4792043f543..1c0e7facf36 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsField.tsx
@@ -32,7 +32,6 @@ import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { useTrackField } from '../hooks'
 
 import {
-  StemsAndDownloadsFormValues,
   StemsAndDownloadsMenuFields,
   stemsAndDownloadsSchema
 } from './StemsAndDownloadsMenuFields'
@@ -48,7 +47,8 @@ import {
   DOWNLOAD_REQUIRES_FOLLOW,
   IS_DOWNLOADABLE,
   IS_ORIGINAL_AVAILABLE,
-  STEMS
+  STEMS,
+  StemsAndDownloadsFormValues
 } from './types'
 
 const { getUserId } = accountSelectors
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
index 73dd4f9df7b..6f07792b2e9 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
@@ -6,7 +6,6 @@ import {
   FeatureFlags,
   Nullable,
   StemCategory,
-  StemUpload,
   StemUploadWithFile,
   formatPrice,
   isContentUSDCPurchaseGated,
@@ -30,13 +29,13 @@ import {
   IS_DOWNLOAD_GATED,
   DOWNLOAD_CONDITIONS,
   STREAM_CONDITIONS,
-  CID,
   DOWNLOAD_AVAILABILITY_TYPE,
   DOWNLOAD_REQUIRES_FOLLOW,
   IS_DOWNLOADABLE,
   IS_ORIGINAL_AVAILABLE,
   STEMS,
-  DOWNLOAD_PRICE
+  DOWNLOAD_PRICE,
+  StemsAndDownloadsFormValues
 } from './types'
 
 const messages = {
@@ -64,18 +63,6 @@ const messages = {
     'You must enable the full track download or upload a stem file before setting download availability.'
 }
 
-export type StemsAndDownloadsFormValues = {
-  [IS_DOWNLOADABLE]: boolean
-  [IS_ORIGINAL_AVAILABLE]: boolean
-  [DOWNLOAD_REQUIRES_FOLLOW]: boolean
-  [STEMS]: StemUpload[]
-  [CID]: Nullable<string>
-  [IS_DOWNLOAD_GATED]: boolean
-  [DOWNLOAD_CONDITIONS]: Nullable<AccessConditions>
-  [STREAM_CONDITIONS]: Nullable<AccessConditions>
-  [DOWNLOAD_AVAILABILITY_TYPE]: DownloadTrackAvailabilityType
-}
-
 export const stemsAndDownloadsSchema = ({
   minContentPriceCents,
   maxContentPriceCents
diff --git a/packages/web/src/pages/upload-page/fields/types.ts b/packages/web/src/pages/upload-page/fields/types.ts
index 1158b5bb5a0..168ef8c20d2 100644
--- a/packages/web/src/pages/upload-page/fields/types.ts
+++ b/packages/web/src/pages/upload-page/fields/types.ts
@@ -1,7 +1,9 @@
 import {
   AccessConditions,
+  DownloadTrackAvailabilityType,
   FieldVisibility,
   Nullable,
+  StemUpload,
   StreamTrackAvailabilityType
 } from '@audius/common'
 
@@ -17,27 +19,27 @@ export enum SpecialAccessType {
   FOLLOW = 'follow'
 }
 
-export const IS_SCHEDULED_RELEASE = 'is_scheduled_release'
-export const IS_UNLISTED = 'is_unlisted'
+export const STREAM_AVAILABILITY_TYPE = 'stream_availability_type'
 export const IS_STREAM_GATED = 'is_stream_gated'
 export const STREAM_CONDITIONS = 'stream_conditions'
-export const IS_DOWNLOAD_GATED = 'is_download_gated'
-export const DOWNLOAD_CONDITIONS = 'download_conditions'
-export const STREAM_AVAILABILITY_TYPE = 'stream_availability_type'
-export const SPECIAL_ACCESS_TYPE = 'special_access_type'
-export const FIELD_VISIBILITY = 'field_visibility'
 export const PRICE = 'stream_conditions.usdc_purchase.price'
 export const PRICE_HUMANIZED = 'price_humanized'
 export const PREVIEW = 'preview_start_seconds'
+export const DOWNLOAD_AVAILABILITY_TYPE = 'download_availability_type'
 export const IS_DOWNLOADABLE = 'is_downloadable'
 export const IS_ORIGINAL_AVAILABLE = 'is_original_available'
-export const DOWNLOAD_REQUIRES_FOLLOW = 'download_requires_follow'
+export const IS_DOWNLOAD_GATED = 'is_download_gated'
+export const DOWNLOAD_CONDITIONS = 'download_conditions'
+export const DOWNLOAD_PRICE = 'download_conditions.usdc_purchase.price'
+export const DOWNLOAD_PRICE_HUMANIZED = 'download_price_humanized'
 export const STEMS = 'stems'
+export const DOWNLOAD_REQUIRES_FOLLOW = 'download_requires_follow'
 export const DOWNLOAD = 'download'
 export const CID = 'download.cid'
-export const DOWNLOAD_AVAILABILITY_TYPE = 'download_availability_type'
-export const DOWNLOAD_PRICE = 'download_conditions.usdc_purchase.price'
-export const DOWNLOAD_PRICE_HUMANIZED = 'download_price_humanized'
+export const SPECIAL_ACCESS_TYPE = 'special_access_type'
+export const IS_UNLISTED = 'is_unlisted'
+export const FIELD_VISIBILITY = 'field_visibility'
+export const IS_SCHEDULED_RELEASE = 'is_scheduled_release'
 
 export type AccessAndSaleFormValues = {
   [IS_UNLISTED]: boolean
@@ -48,3 +50,15 @@ export type AccessAndSaleFormValues = {
   [PRICE_HUMANIZED]: string
   [PREVIEW]?: number
 }
+
+export type StemsAndDownloadsFormValues = {
+  [IS_DOWNLOADABLE]: boolean
+  [IS_ORIGINAL_AVAILABLE]: boolean
+  [DOWNLOAD_REQUIRES_FOLLOW]: boolean
+  [STEMS]: StemUpload[]
+  [CID]: Nullable<string>
+  [IS_DOWNLOAD_GATED]: boolean
+  [DOWNLOAD_CONDITIONS]: Nullable<AccessConditions>
+  [STREAM_CONDITIONS]: Nullable<AccessConditions>
+  [DOWNLOAD_AVAILABILITY_TYPE]: DownloadTrackAvailabilityType
+}

From 125fc49959e8f3889d1077f64b39c58c3b8433bf Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 19:15:39 -0500
Subject: [PATCH 10/15] Only allow is original to be available if feature flag
 is on

---
 .../fields/StemsAndDownloadsMenuFields.tsx            | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
index 6f07792b2e9..b1b3dcb0fc6 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
@@ -170,13 +170,16 @@ export const StemsAndDownloadsMenuFields = () => {
       ].includes(availabilityType) && !isAvailabilityTouched
     if (firstTimeDownloadGated) {
       isDownloadableSetValue(true)
-      setIsOriginalAvailable(true)
       setIsAvailabilityTouched(true)
+      if (isLosslessDownloadsEnabled) {
+        setIsOriginalAvailable(true)
+      }
     }
   }, [
     availabilityType,
     isAvailabilityTouched,
     isDownloadableSetValue,
+    isLosslessDownloadsEnabled,
     setIsOriginalAvailable
   ])
 
@@ -186,12 +189,14 @@ export const StemsAndDownloadsMenuFields = () => {
   // Note that the useEffect has been preferred to the corresponding onChange handlers
   // as those seemed to cause unwanted race conditions resulting in errors showing up incorrectly.
   useEffect(() => {
-    if (isDownloadable) {
+    if (isLosslessDownloadsEnabled && isDownloadable) {
       setIsOriginalAvailable(true)
-    } else if (stemsValue.length === 0) {
+    }
+    if (!isDownloadable && stemsValue.length === 0) {
       followerGatedSetValue(false)
     }
   }, [
+    isLosslessDownloadsEnabled,
     followerGatedSetValue,
     isDownloadable,
     setIsOriginalAvailable,

From 5830d81712bc6acb0643594cd1a3702e1bf1e114 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Mon, 29 Jan 2024 19:27:32 -0500
Subject: [PATCH 11/15] Move out stem dropdown rows to utils

---
 .../components/edit-track/EditTrackModal.tsx  |  4 ++--
 .../source-files-modal/SourceFilesModal.tsx   | 22 ++++---------------
 .../upload-page/fields/StemFilesView.tsx      | 22 ++++---------------
 .../fields/StemsAndDownloadsMenuFields.tsx    |  5 +++--
 packages/web/src/utils/stems.ts               | 16 ++++++++++++++
 5 files changed, 29 insertions(+), 40 deletions(-)
 create mode 100644 packages/web/src/utils/stems.ts

diff --git a/packages/web/src/components/edit-track/EditTrackModal.tsx b/packages/web/src/components/edit-track/EditTrackModal.tsx
index ff946ac159a..8d3184e9fd4 100644
--- a/packages/web/src/components/edit-track/EditTrackModal.tsx
+++ b/packages/web/src/components/edit-track/EditTrackModal.tsx
@@ -21,7 +21,7 @@ import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { Dispatch } from 'redux'
 
 import DeleteConfirmationModal from 'components/delete-confirmation/DeleteConfirmationModal'
-import { dropdownRows } from 'components/source-files-modal/SourceFilesModal'
+import { stemDropdownRows } from 'components/source-files-modal/SourceFilesModal'
 import EditTrackModalComponent from 'components/track/EditTrackModal'
 import { processFiles } from 'pages/upload-page/store/utils/processFiles'
 import { AppState } from 'store/types'
@@ -160,7 +160,7 @@ const EditTrackModal = ({
         ...p,
         allowDelete: true,
         allowCategorySwitch: true,
-        category: dropdownRows[0]
+        category: stemDropdownRows[0]
       }))
 
     setPendingUploads((s) => [...s, ...processed])
diff --git a/packages/web/src/components/source-files-modal/SourceFilesModal.tsx b/packages/web/src/components/source-files-modal/SourceFilesModal.tsx
index 42033fe2bed..649e1f3fd7f 100644
--- a/packages/web/src/components/source-files-modal/SourceFilesModal.tsx
+++ b/packages/web/src/components/source-files-modal/SourceFilesModal.tsx
@@ -20,6 +20,7 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Dropdown from 'components/navigation/Dropdown'
 import Switch from 'components/switch/Switch'
 import { Dropzone } from 'components/upload/Dropzone'
+import { stemDropdownRows } from 'utils/stems'
 
 import styles from './SourceFilesModal.module.css'
 
@@ -41,21 +42,6 @@ const defaultDownloadSettings: Download = {
   cid: null
 }
 
-export const dropdownRows = [
-  StemCategory.INSTRUMENTAL,
-  StemCategory.LEAD_VOCALS,
-  StemCategory.MELODIC_LEAD,
-  StemCategory.PAD,
-  StemCategory.SNARE,
-  StemCategory.KICK,
-  StemCategory.HIHAT,
-  StemCategory.PERCUSSION,
-  StemCategory.SAMPLE,
-  StemCategory.BACKING_VOX,
-  StemCategory.BASS,
-  StemCategory.OTHER
-]
-
 type StemRowProps = {
   stem: StemUpload
   didSelectCategory: (category: StemCategory) => void
@@ -68,11 +54,11 @@ const StemRow = ({
   onDelete
 }: StemRowProps) => {
   const onSelectIndex = (index: number) => {
-    const cat = dropdownRows[index]
+    const cat = stemDropdownRows[index]
     didSelectCategory(cat)
   }
 
-  let stemIndex = dropdownRows.findIndex((r) => r === category)
+  let stemIndex = stemDropdownRows.findIndex((r) => r === category)
   if (stemIndex === -1) {
     console.error(`Couldn't find stem row for category: ${category}`)
     stemIndex = 0
@@ -104,7 +90,7 @@ const StemRow = ({
         <Dropdown
           size='medium'
           menu={{
-            items: dropdownRows.map((r) => ({
+            items: stemDropdownRows.map((r) => ({
               text: stemCategoryFriendlyNames[r]
             }))
           }}
diff --git a/packages/web/src/pages/upload-page/fields/StemFilesView.tsx b/packages/web/src/pages/upload-page/fields/StemFilesView.tsx
index e83840b15c6..ed1b853cf8b 100644
--- a/packages/web/src/pages/upload-page/fields/StemFilesView.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemFilesView.tsx
@@ -17,6 +17,7 @@ import { Text } from 'components/typography'
 import { Dropzone } from 'components/upload/Dropzone'
 import { TrackPreviewNew } from 'components/upload/TrackPreviewNew'
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
+import { stemDropdownRows } from 'utils/stems'
 
 import styles from './StemFilesView.module.css'
 
@@ -143,21 +144,6 @@ export const StemFilesView = ({
   )
 }
 
-export const dropdownRows = [
-  StemCategory.INSTRUMENTAL,
-  StemCategory.LEAD_VOCALS,
-  StemCategory.MELODIC_LEAD,
-  StemCategory.PAD,
-  StemCategory.SNARE,
-  StemCategory.KICK,
-  StemCategory.HIHAT,
-  StemCategory.PERCUSSION,
-  StemCategory.SAMPLE,
-  StemCategory.BACKING_VOX,
-  StemCategory.BASS,
-  StemCategory.OTHER
-]
-
 type StemListItemProps = {
   stem: StemUpload
   didSelectCategory: (category: StemCategory) => void
@@ -170,11 +156,11 @@ const StemListItem = ({
   onDelete
 }: StemListItemProps) => {
   const onSelectIndex = (index: number) => {
-    const cat = dropdownRows[index]
+    const cat = stemDropdownRows[index]
     didSelectCategory(cat)
   }
 
-  let stemIndex = dropdownRows.findIndex((r) => r === category)
+  let stemIndex = stemDropdownRows.findIndex((r) => r === category)
   if (stemIndex === -1) {
     console.error(`Couldn't find stem row for category: ${category}`)
     stemIndex = 0
@@ -206,7 +192,7 @@ const StemListItem = ({
         <Dropdown
           size='medium'
           menu={{
-            items: dropdownRows.map((r) => ({
+            items: stemDropdownRows.map((r) => ({
               text: stemCategoryFriendlyNames[r]
             }))
           }}
diff --git a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
index b1b3dcb0fc6..a69d5b6bd23 100644
--- a/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemsAndDownloadsMenuFields.tsx
@@ -17,11 +17,12 @@ import { z } from 'zod'
 import { Divider } from 'components/divider'
 import { Text } from 'components/typography'
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
+import { stemDropdownRows } from 'utils/stems'
 
 import { processFiles } from '../store/utils/processFiles'
 
 import { USDCPurchaseRemoteConfig } from './AccessAndSaleField'
-import { StemFilesView, dropdownRows as stemCategories } from './StemFilesView'
+import { StemFilesView } from './StemFilesView'
 import styles from './StemsAndDownloadsField.module.css'
 import { SwitchRowField } from './SwitchRowField'
 import { DownloadAvailability } from './download-availability/DownloadAvailability'
@@ -223,7 +224,7 @@ export const StemsAndDownloadsMenuFields = () => {
       const detectCategory = (filename: string): StemCategory => {
         const lowerCaseFilename = filename.toLowerCase()
         return (
-          stemCategories.find((category) =>
+          stemDropdownRows.find((category) =>
             lowerCaseFilename.includes(category.toString().toLowerCase())
           ) ?? StemCategory.OTHER
         )
diff --git a/packages/web/src/utils/stems.ts b/packages/web/src/utils/stems.ts
new file mode 100644
index 00000000000..5afd507e954
--- /dev/null
+++ b/packages/web/src/utils/stems.ts
@@ -0,0 +1,16 @@
+import { StemCategory } from '@audius/common'
+
+export const stemDropdownRows = [
+  StemCategory.INSTRUMENTAL,
+  StemCategory.LEAD_VOCALS,
+  StemCategory.MELODIC_LEAD,
+  StemCategory.PAD,
+  StemCategory.SNARE,
+  StemCategory.KICK,
+  StemCategory.HIHAT,
+  StemCategory.PERCUSSION,
+  StemCategory.SAMPLE,
+  StemCategory.BACKING_VOX,
+  StemCategory.BASS,
+  StemCategory.OTHER
+]

From be22d5da3258a5123eb03378a71765219ba81dcf Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Tue, 30 Jan 2024 09:43:06 -0500
Subject: [PATCH 12/15] Update edit flow for lossless

---
 .../src/components/data-entry/FormTile.jsx    |   8 +-
 .../components/edit-track/EditTrackModal.tsx  |   2 +-
 .../StemFilesModal.module.css}                |  25 +-
 .../StemFilesModal.tsx}                       | 238 ++++++++++++------
 .../components/upload/TrackPreview.module.css |   4 +-
 .../src/components/upload/TrackPreviewNew.tsx |   6 +-
 .../fields/StemFilesView.module.css           |   2 +-
 .../upload-page/fields/StemFilesView.tsx      |   2 +-
 8 files changed, 204 insertions(+), 83 deletions(-)
 rename packages/web/src/components/{source-files-modal/SourceFilesModal.module.css => stem-files-modal/StemFilesModal.module.css} (84%)
 rename packages/web/src/components/{source-files-modal/SourceFilesModal.tsx => stem-files-modal/StemFilesModal.tsx} (58%)

diff --git a/packages/web/src/components/data-entry/FormTile.jsx b/packages/web/src/components/data-entry/FormTile.jsx
index a561e1270d6..2874e7316d9 100644
--- a/packages/web/src/components/data-entry/FormTile.jsx
+++ b/packages/web/src/components/data-entry/FormTile.jsx
@@ -26,7 +26,7 @@ import TextArea from 'components/data-entry/TextArea'
 import Dropdown from 'components/navigation/Dropdown'
 import ConnectedRemixSettingsModal from 'components/remix-settings-modal/ConnectedRemixSettingsModal'
 import { RemixSettingsModalTrigger } from 'components/remix-settings-modal/RemixSettingsModalTrigger'
-import SourceFilesModal from 'components/source-files-modal/SourceFilesModal'
+import { StemFilesModal } from 'components/stem-files-modal/StemFilesModal'
 import Switch from 'components/switch/Switch'
 import PreviewButton from 'components/upload/PreviewButton'
 import UploadArtwork from 'components/upload/UploadArtwork'
@@ -256,7 +256,11 @@ const BasicForm = (props) => {
 
   const renderSourceFilesModal = () => {
     return (
-      <SourceFilesModal
+      <StemFilesModal
+        isOriginalAvailable={props.defaultFields.is_original_available}
+        onUpdateIsOriginalAvailable={(value) =>
+          props.onChangeField('is_original_available', value)
+        }
         downloadSettings={props.defaultFields.download}
         onUpdateDownloadSettings={(settings) =>
           props.onChangeField('download', settings)
diff --git a/packages/web/src/components/edit-track/EditTrackModal.tsx b/packages/web/src/components/edit-track/EditTrackModal.tsx
index 8d3184e9fd4..d29ee91669d 100644
--- a/packages/web/src/components/edit-track/EditTrackModal.tsx
+++ b/packages/web/src/components/edit-track/EditTrackModal.tsx
@@ -21,11 +21,11 @@ import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { Dispatch } from 'redux'
 
 import DeleteConfirmationModal from 'components/delete-confirmation/DeleteConfirmationModal'
-import { stemDropdownRows } from 'components/source-files-modal/SourceFilesModal'
 import EditTrackModalComponent from 'components/track/EditTrackModal'
 import { processFiles } from 'pages/upload-page/store/utils/processFiles'
 import { AppState } from 'store/types'
 import { FEED_PAGE, getPathname } from 'utils/route'
+import { stemDropdownRows } from 'utils/stems'
 const { startStemUploads } = stemsUploadActions
 const { getCurrentUploads } = stemsUploadSelectors
 const { getMetadata, getStems } = editTrackModalSelectors
diff --git a/packages/web/src/components/source-files-modal/SourceFilesModal.module.css b/packages/web/src/components/stem-files-modal/StemFilesModal.module.css
similarity index 84%
rename from packages/web/src/components/source-files-modal/SourceFilesModal.module.css
rename to packages/web/src/components/stem-files-modal/StemFilesModal.module.css
index 050f95ebdc5..40069e26144 100644
--- a/packages/web/src/components/source-files-modal/SourceFilesModal.module.css
+++ b/packages/web/src/components/stem-files-modal/StemFilesModal.module.css
@@ -5,6 +5,11 @@
   overflow: auto;
 }
 
+.newModalContainer {
+  max-width: unset;
+  min-width: 600px;
+}
+
 .modalContainer {
   max-width: 536px;
   /* Need to account for the dropdown outside modal */
@@ -20,7 +25,7 @@
 }
 
 .modalTitle {
-  color: var(--neutral);
+  color: var(--neutral-light-4);
   font-size: var(--font-l);
   font-weight: var(--font-heavy);
   text-transform: uppercase;
@@ -100,6 +105,10 @@
   width: 32px;
 }
 
+.dropzoneIcon g path {
+  fill: var(--neutral-light-4);
+}
+
 .deleteButton {
   margin-left: auto;
   margin-right: 22px;
@@ -134,6 +143,20 @@
   fill: var(--neutral-light-4) !important;
 }
 
+.stemPreview {
+  padding-top: var(--unit-2);
+  padding-bottom: var(--unit-2);
+  border-top: none;
+  border-bottom: 1px solid var(--border-default);
+}
+.stemPreview:last-child {
+  border-bottom: none;
+}
+.stemPreview:hover {
+  background: var(--background-surface-1);
+  border-top: none;
+}
+
 .doneButton {
   align-self: flex-end;
   margin: 16px;
diff --git a/packages/web/src/components/source-files-modal/SourceFilesModal.tsx b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx
similarity index 58%
rename from packages/web/src/components/source-files-modal/SourceFilesModal.tsx
rename to packages/web/src/components/stem-files-modal/StemFilesModal.tsx
index 649e1f3fd7f..19ee6091dfd 100644
--- a/packages/web/src/components/source-files-modal/SourceFilesModal.tsx
+++ b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx
@@ -4,8 +4,10 @@ import {
   StemCategory,
   stemCategoryFriendlyNames,
   StemUpload,
-  Download
+  Download,
+  FeatureFlags
 } from '@audius/common'
+import { Flex, Box, Text as HarmonyText } from '@audius/harmony'
 import {
   Button,
   ButtonSize,
@@ -20,20 +22,25 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Dropdown from 'components/navigation/Dropdown'
 import Switch from 'components/switch/Switch'
 import { Dropzone } from 'components/upload/Dropzone'
+import { TrackPreviewNew } from 'components/upload/TrackPreviewNew'
+import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { stemDropdownRows } from 'utils/stems'
 
-import styles from './SourceFilesModal.module.css'
+import styles from './StemFilesModal.module.css'
 
 const MAX_ROWS = 10
 
 const messages = {
-  title: 'DOWNLOADS & SOURCE FILES',
+  title: 'STEMS & DOWNLOADS',
   subtitle: 'Allow Users to download MP3 copies of your track',
-  sourceFiles: 'SOURCE FILES',
+  additionalFiles: 'UPLOAD ADDITIONAL FILES',
   allowDownloads: 'Allow Downloads',
   requireFollowToDownload: 'Require Follow to Download',
+  provideLosslessFiles: 'Provide Lossless Files',
   done: 'DONE',
-  maxCapacity: 'Reached upload limit of 10 files.'
+  maxCapacity: 'Reached upload limit of 10 files.',
+  stemTypeHeader: 'Select Stem Type',
+  stemTypeDescription: 'Please select a stem type for each of your files.'
 }
 
 const defaultDownloadSettings: Download = {
@@ -107,74 +114,55 @@ const StemRow = ({
   )
 }
 
-type SourceFilesViewProps = {
-  downloadSettings: Download
-  onUpdateDownloadSettings: (downloadSettings: Download) => void
+type StemFilesViewProps = {
   onAddStems: (stems: any) => void
   stems: StemUpload[]
   onSelectCategory: (category: StemCategory, index: number) => void
   onDeleteStem: (index: number) => void
 }
-const SourceFilesView = ({
-  downloadSettings,
-  onUpdateDownloadSettings,
+const StemFilesView = ({
   onAddStems,
   stems,
   onSelectCategory,
   onDeleteStem
-}: SourceFilesViewProps) => {
-  const toggleIsDownloadable = useCallback(() => {
-    const newSettings = downloadSettings
-      ? { ...downloadSettings }
-      : { ...defaultDownloadSettings }
-
-    if (newSettings.is_downloadable) {
-      // Disabling
-      newSettings.is_downloadable = false
-      newSettings.requires_follow = false
-    } else {
-      // Enabling
-      newSettings.is_downloadable = true
-      newSettings.requires_follow = false
-    }
-    onUpdateDownloadSettings(newSettings)
-  }, [onUpdateDownloadSettings, downloadSettings])
-
-  const toggleRequiresFollow = useCallback(() => {
-    const newSettings = downloadSettings
-      ? { ...downloadSettings }
-      : { ...defaultDownloadSettings }
-
-    if (newSettings.requires_follow) {
-      // Disabling
-      newSettings.requires_follow = false
-    } else {
-      // Enabling
-      newSettings.requires_follow = true
-      newSettings.is_downloadable = true
-    }
-    onUpdateDownloadSettings(newSettings)
-  }, [onUpdateDownloadSettings, downloadSettings])
+}: StemFilesViewProps) => {
+  const isLosslessDownloadsEnabled = getFeatureEnabled(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
 
-  const renderDownloadSection = () => {
-    return (
-      <div className={styles.downloadSettings}>
-        <div className={styles.downloadSetting}>
-          <div className={styles.label}>{messages.allowDownloads}</div>
-          <Switch
-            isOn={downloadSettings?.is_downloadable ?? false}
-            handleToggle={toggleIsDownloadable}
-          />
-        </div>
-        <div className={styles.downloadSetting}>
-          <div className={styles.label}>{messages.requireFollowToDownload}</div>
-          <Switch
-            isOn={downloadSettings?.requires_follow ?? false}
-            handleToggle={toggleRequiresFollow}
-          />
-        </div>
-      </div>
-    )
+  const renderStemFiles = () => {
+    return stems.length > 0 ? (
+      <Box p='xl'>
+        <Flex direction='column'>
+          <HarmonyText variant='title' size='l'>
+            {messages.stemTypeHeader}
+          </HarmonyText>
+          <Box mt='s'>
+            <HarmonyText variant='body'>
+              {messages.stemTypeDescription}
+            </HarmonyText>
+          </Box>
+        </Flex>
+        <Flex direction='column' mt='xl' borderRadius='m' border='default'>
+          {stems.map((stem, i) => (
+            <TrackPreviewNew
+              className={styles.stemPreview}
+              index={i}
+              displayIndex={stems.length > 1}
+              key={`stem-${i}`}
+              trackTitle={stem.metadata.title}
+              fileType=''
+              fileSize={0}
+              onRemove={() => onDeleteStem(i)}
+              stemCategory={stem.category}
+              onEditStemCategory={(category) => onSelectCategory(category, i)}
+              isStem
+              isEdit
+            />
+          ))}
+        </Flex>
+      </Box>
+    ) : null
   }
 
   const renderCurrentStems = () => {
@@ -217,30 +205,126 @@ const SourceFilesView = ({
         iconClassName={cn(styles.dropzoneIcon, {
           [styles.dropzoneDisabled]: atCapacity
         })}
-        textAboveIcon={messages.sourceFiles}
+        textAboveIcon={messages.additionalFiles}
         onDropAccepted={onAdd}
         type='stem'
         subtitle={atCapacity ? messages.maxCapacity : undefined}
         disableClick={atCapacity}
+        isTruncated={stems.length > 0}
       />
     )
   }
 
   return (
     <div className={styles.sourceFilesContainer}>
-      {renderDownloadSection()}
+      {isLosslessDownloadsEnabled ? renderStemFiles() : null}
       {useRenderDropzone()}
-      {renderCurrentStems()}
+      {!isLosslessDownloadsEnabled ? renderCurrentStems() : null}
+    </div>
+  )
+}
+
+type DownloadSectionProps = {
+  isOriginalAvailable: boolean
+  onUpdateIsOriginalAvailable: (isOriginalAvailable: boolean) => void
+  downloadSettings: Download
+  onUpdateDownloadSettings: (downloadSettings: Download) => void
+}
+
+const DownloadSection = ({
+  isOriginalAvailable,
+  onUpdateIsOriginalAvailable,
+  downloadSettings,
+  onUpdateDownloadSettings
+}: DownloadSectionProps) => {
+  const isLosslessDownloadsEnabled = getFeatureEnabled(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
+
+  const toggleIsDownloadable = useCallback(() => {
+    const newSettings = downloadSettings
+      ? { ...downloadSettings }
+      : { ...defaultDownloadSettings }
+
+    if (newSettings.is_downloadable) {
+      // Disabling
+      newSettings.is_downloadable = false
+      newSettings.requires_follow = false
+    } else {
+      // Enabling
+      newSettings.is_downloadable = true
+      newSettings.requires_follow = false
+      onUpdateIsOriginalAvailable(true)
+    }
+    onUpdateDownloadSettings(newSettings)
+  }, [downloadSettings, onUpdateDownloadSettings, onUpdateIsOriginalAvailable])
+
+  const toggleIsOriginalAvailable = useCallback(() => {
+    onUpdateIsOriginalAvailable(!isOriginalAvailable)
+  }, [onUpdateIsOriginalAvailable, isOriginalAvailable])
+
+  const toggleRequiresFollow = useCallback(() => {
+    const newSettings = downloadSettings
+      ? { ...downloadSettings }
+      : { ...defaultDownloadSettings }
+
+    if (newSettings.requires_follow) {
+      // Disabling
+      newSettings.requires_follow = false
+    } else {
+      // Enabling
+      newSettings.requires_follow = true
+      newSettings.is_downloadable = true
+    }
+    onUpdateDownloadSettings(newSettings)
+  }, [onUpdateDownloadSettings, downloadSettings])
+
+  return (
+    <div className={styles.downloadSettings}>
+      <div className={styles.downloadSetting}>
+        <div className={styles.label}>{messages.allowDownloads}</div>
+        <Switch
+          isOn={downloadSettings?.is_downloadable ?? false}
+          handleToggle={toggleIsDownloadable}
+        />
+      </div>
+      <div className={styles.downloadSetting}>
+        {isLosslessDownloadsEnabled ? (
+          <>
+            <div className={styles.label}>{messages.provideLosslessFiles}</div>
+            <Switch
+              isOn={isOriginalAvailable}
+              handleToggle={toggleIsOriginalAvailable}
+            />
+          </>
+        ) : (
+          <>
+            <div className={styles.label}>
+              {messages.requireFollowToDownload}
+            </div>
+            <Switch
+              isOn={downloadSettings?.requires_follow ?? false}
+              handleToggle={toggleRequiresFollow}
+            />
+          </>
+        )}
+      </div>
     </div>
   )
 }
 
-type SourceFilesModalProps = SourceFilesViewProps & {
+type StemFilesModalProps = StemFilesViewProps & {
+  isOriginalAvailable: boolean
+  onUpdateIsOriginalAvailable: (isOriginalAvailable: boolean) => void
+  downloadSettings: Download
+  onUpdateDownloadSettings: (downloadSettings: Download) => void
   isOpen: boolean
   onClose: () => void
 }
 
-const SourceFilesModal = ({
+export const StemFilesModal = ({
+  isOriginalAvailable,
+  onUpdateIsOriginalAvailable,
   downloadSettings,
   onUpdateDownloadSettings,
   isOpen,
@@ -249,7 +333,11 @@ const SourceFilesModal = ({
   stems,
   onSelectCategory,
   onDeleteStem
-}: SourceFilesModalProps) => {
+}: StemFilesModalProps) => {
+  const isLosslessDownloadsEnabled = getFeatureEnabled(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
+
   return (
     <Modal
       isOpen={isOpen}
@@ -262,14 +350,20 @@ const SourceFilesModal = ({
       // Since this can be nested in the edit track modal
       // Appear on top of it
       zIndex={1002}
-      bodyClassName={styles.modalContainer}
+      bodyClassName={cn(styles.modalContainer, {
+        [styles.newModalContainer]: isLosslessDownloadsEnabled
+      })}
       headerContainerClassName={styles.modalHeader}
       titleClassName={styles.modalTitle}
       subtitleClassName={styles.modalSubtitle}
     >
-      <SourceFilesView
+      <DownloadSection
+        isOriginalAvailable={isOriginalAvailable}
+        onUpdateIsOriginalAvailable={onUpdateIsOriginalAvailable}
         downloadSettings={downloadSettings}
         onUpdateDownloadSettings={onUpdateDownloadSettings}
+      />
+      <StemFilesView
         onAddStems={onAddStems}
         stems={stems}
         onSelectCategory={onSelectCategory}
@@ -285,5 +379,3 @@ const SourceFilesModal = ({
     </Modal>
   )
 }
-
-export default SourceFilesModal
diff --git a/packages/web/src/components/upload/TrackPreview.module.css b/packages/web/src/components/upload/TrackPreview.module.css
index ac589350303..ab892962b91 100644
--- a/packages/web/src/components/upload/TrackPreview.module.css
+++ b/packages/web/src/components/upload/TrackPreview.module.css
@@ -101,7 +101,7 @@
 }
 
 .trackPreviewNew:hover .iconsContainer {
-  width: 80px;
+  width: 60px;
 }
 
 .trackPreviewNew:hover .removeButton,
@@ -127,7 +127,7 @@
 .fileSizeText {
   display: flex;
   transition: var(--hover);
-  width: 80px;
+  width: 60px;
   justify-content: flex-end;
 }
 
diff --git a/packages/web/src/components/upload/TrackPreviewNew.tsx b/packages/web/src/components/upload/TrackPreviewNew.tsx
index 22abb3bae45..78521d08fe7 100644
--- a/packages/web/src/components/upload/TrackPreviewNew.tsx
+++ b/packages/web/src/components/upload/TrackPreviewNew.tsx
@@ -60,6 +60,7 @@ type TrackPreviewProps = {
   isStem?: boolean
   stemCategory?: StemCategory
   onEditStemCategory?: (stemCategory: StemCategory) => void
+  isEdit?: boolean
   className?: string
 }
 
@@ -80,10 +81,11 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
     isStem,
     stemCategory,
     onEditStemCategory,
+    isEdit,
     className
   } = props
 
-  const Icon = fileTypeIcon(fileType)
+  const Icon = isEdit ? iconFileUnknown : fileTypeIcon(fileType)
   const iconStyle = isStem ? { width: 24, height: 24 } : undefined
 
   const [isEditingTitle, setIsEditingTitle] = useState(false)
@@ -137,7 +139,7 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
           size='small'
           color='neutralLight2'
         >
-          {numeral(fileSize).format('0.0 b')}
+          {isEdit ? '' : numeral(fileSize).format('0.0 b')}
         </Text>
         {isLosslessDownloadsEnabled ? (
           <Flex gap='xs' alignItems='center' className={styles.iconsContainer}>
diff --git a/packages/web/src/pages/upload-page/fields/StemFilesView.module.css b/packages/web/src/pages/upload-page/fields/StemFilesView.module.css
index 056abd68289..46e1ce4fb4d 100644
--- a/packages/web/src/pages/upload-page/fields/StemFilesView.module.css
+++ b/packages/web/src/pages/upload-page/fields/StemFilesView.module.css
@@ -1,4 +1,4 @@
-.sourceFilesContainer {
+.stemFilesContainer {
   width: 100%;
   display: flex;
   flex-direction: column;
diff --git a/packages/web/src/pages/upload-page/fields/StemFilesView.tsx b/packages/web/src/pages/upload-page/fields/StemFilesView.tsx
index ed1b853cf8b..a7f9a51076d 100644
--- a/packages/web/src/pages/upload-page/fields/StemFilesView.tsx
+++ b/packages/web/src/pages/upload-page/fields/StemFilesView.tsx
@@ -136,7 +136,7 @@ export const StemFilesView = ({
   }
 
   return (
-    <div className={styles.sourceFilesContainer}>
+    <div className={styles.stemFilesContainer}>
       {isLosslessDownloadsEnabled ? renderStemFiles() : null}
       {useRenderDropzone()}
       {!isLosslessDownloadsEnabled ? renderCurrentStems() : null}

From 5890253efd082fa6964814c34c4e3becc1ed37bd Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Tue, 30 Jan 2024 09:53:54 -0500
Subject: [PATCH 13/15] Disable changing already existing stem category in edit
 flow

---
 .../src/components/button/FilterButton/FilterButton.tsx      | 2 ++
 packages/harmony/src/components/button/FilterButton/types.ts | 5 +++++
 .../web/src/components/stem-files-modal/StemFilesModal.tsx   | 1 +
 packages/web/src/components/upload/TrackPreviewNew.tsx       | 3 +++
 4 files changed, 11 insertions(+)

diff --git a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
index 22aa73acaa1..9ff5166fec7 100644
--- a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
+++ b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
@@ -16,6 +16,7 @@ export const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(
       label,
       options,
       onSelect,
+      isDisabled,
       variant = 'fillContainer',
       size = 'default',
       iconRight = IconCaretDown,
@@ -172,6 +173,7 @@ export const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(
             ? IconCloseAlt
             : iconRight
         }
+        disabled={isDisabled}
         aria-haspopup='listbox'
         aria-expanded={isOpen}
       >
diff --git a/packages/harmony/src/components/button/FilterButton/types.ts b/packages/harmony/src/components/button/FilterButton/types.ts
index fd2c5b306de..41f41a3220b 100644
--- a/packages/harmony/src/components/button/FilterButton/types.ts
+++ b/packages/harmony/src/components/button/FilterButton/types.ts
@@ -65,6 +65,11 @@ export type FilterButtonProps = {
    */
   onSelect?: (label: string) => void
 
+  /**
+   * Whether interaction is disabled
+   */
+  isDisabled?: boolean
+
   /**
    * Popup anchor origin
    * @default { horizontal: 'center', vertical: 'bottom' }
diff --git a/packages/web/src/components/stem-files-modal/StemFilesModal.tsx b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx
index 19ee6091dfd..5a4da24bca0 100644
--- a/packages/web/src/components/stem-files-modal/StemFilesModal.tsx
+++ b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx
@@ -156,6 +156,7 @@ const StemFilesView = ({
               onRemove={() => onDeleteStem(i)}
               stemCategory={stem.category}
               onEditStemCategory={(category) => onSelectCategory(category, i)}
+              isDisabled={!stem.allowCategorySwitch}
               isStem
               isEdit
             />
diff --git a/packages/web/src/components/upload/TrackPreviewNew.tsx b/packages/web/src/components/upload/TrackPreviewNew.tsx
index 78521d08fe7..8bb7264f935 100644
--- a/packages/web/src/components/upload/TrackPreviewNew.tsx
+++ b/packages/web/src/components/upload/TrackPreviewNew.tsx
@@ -61,6 +61,7 @@ type TrackPreviewProps = {
   stemCategory?: StemCategory
   onEditStemCategory?: (stemCategory: StemCategory) => void
   isEdit?: boolean
+  isDisabled?: boolean
   className?: string
 }
 
@@ -82,6 +83,7 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
     stemCategory,
     onEditStemCategory,
     isEdit,
+    isDisabled,
     className
   } = props
 
@@ -131,6 +133,7 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
               onSelect={(label) => onEditStemCategory(label as StemCategory)}
               selection={stemCategory?.toString() ?? null}
               popupZIndex={zIndex.STEMS_AND_DOWNLOADS_FILTER_BUTTON_POPUP}
+              isDisabled={isDisabled}
             />
           </Box>
         ) : null}

From 0df8a445233a1964e72bcee37f72018cfb62f563 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Tue, 30 Jan 2024 11:39:43 -0500
Subject: [PATCH 14/15] Update upload lossless support link

---
 packages/web/src/components/upload/AudioQuality.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/upload/AudioQuality.tsx b/packages/web/src/components/upload/AudioQuality.tsx
index d8e75ae4a27..19ed8ced67b 100644
--- a/packages/web/src/components/upload/AudioQuality.tsx
+++ b/packages/web/src/components/upload/AudioQuality.tsx
@@ -5,12 +5,20 @@ const messages = {
   learnMore: 'Learn more about lossless HD.'
 }
 
+const AUDIO_FILE_FORMATS_LINK =
+  'https://support.audius.co/help/What-Audio-File-Formats-Can-I-Upload-to-Audius-ab4c8'
+
 export const AudioQuality = () => {
   return (
     <Flex justifyContent='center' alignItems='center' mh='3xl'>
       <Text variant='body'>
         {messages.lossless}
-        <TextLink href='' target='_blank' isExternal css={{ color: '#a30cb3' }}>
+        <TextLink
+          href={AUDIO_FILE_FORMATS_LINK}
+          target='_blank'
+          isExternal
+          css={{ color: '#a30cb3' }}
+        >
           {messages.learnMore}
         </TextLink>
       </Text>

From fcb2d3fc4c57f454d462dce55448c40dbe652926 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Tue, 30 Jan 2024 13:15:55 -0500
Subject: [PATCH 15/15] Fix upload page download metadata

---
 .../web/src/pages/upload-page/UploadPage.tsx  | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/web/src/pages/upload-page/UploadPage.tsx b/packages/web/src/pages/upload-page/UploadPage.tsx
index fe3dcd35421..80f6cc996e0 100644
--- a/packages/web/src/pages/upload-page/UploadPage.tsx
+++ b/packages/web/src/pages/upload-page/UploadPage.tsx
@@ -184,27 +184,10 @@ export const UploadPage = (props: UploadPageProps) => {
       return track.metadata.stems ?? []
     }, [])
 
-    // set download gate based on stream gate
-    // this will be updated once the UI for download gated tracks is implemented
-    const tracksToUpload = tracks.map((track) => {
-      const isDownloadable = !!track.metadata.download?.is_downloadable
-      const isDownloadGated = track.metadata.is_stream_gated
-      const downloadConditions = track.metadata.stream_conditions
-      return {
-        ...track,
-        metadata: {
-          ...track.metadata,
-          is_downloadable: isDownloadable,
-          is_download_gated: isDownloadGated,
-          download_conditions: downloadConditions
-        }
-      }
-    })
-
     dispatch(
       uploadTracks(
         // @ts-ignore - This has artwork on it
-        tracksToUpload,
+        tracks,
         formState.uploadType === UploadType.ALBUM ||
           formState.uploadType === UploadType.PLAYLIST
           ? formState.metadata