[PAY-2332][PAY-2358] More work on stems and downloads upload and edit flows

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}
       >

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' }

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,
-  AccessAndSaleMenuFields,
   FIELD_VISIBILITY,
   IS_STREAM_GATED,
   IS_UNLISTED,
-  STREAM_CONDITIONS,
   PREVIEW,
   PRICE_HUMANIZED,
   SPECIAL_ACCESS_TYPE,
-  getCombinedDefaultGatedConditionValues
-} from 'pages/upload-page/fields/AccessAndSaleField'
-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'

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;
+}

packages/web/src/components/data-entry/ContextualMenu.tsx

@@ -1,5 +1,7 @@
-import { ReactNode, ReactElement, useCallback } from 'react'
+import { ReactNode, ReactElement, useCallback, useMemo, useEffect } 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
@@ -32,23 +35,51 @@ 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 } = props
-  const { resetForm } = useFormikContext()
+  const {
+    isOpen,
+    onClose,
+    label,
+    icon,
+    menuFields,
+    closeMenuCallback,
+    displayMenuErrorMessage
+  } = props
+  const { resetForm, errors, initialStatus, status, setStatus } =
+    useFormikContext()
 
   const handleCancel = useCallback(() => {
     resetForm()
     onClose()
   }, [resetForm, onClose])
 
+  const errorMessage = useMemo(() => {
+    if (errors && displayMenuErrorMessage) {
+      return displayMenuErrorMessage(errors)
+    }
+  }, [displayMenuErrorMessage, errors])
+
+  useEffect(() => {
+    if (!isOpen) {
+      closeMenuCallback?.(status)
+      setStatus(initialStatus)
+    }
+  }, [isOpen, closeMenuCallback, status, setStatus, initialStatus])
+
   return (
     <Modal onClose={handleCancel} isOpen={isOpen} size='medium'>
       <ModalHeader>
@@ -57,7 +88,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}
@@ -101,8 +139,14 @@ 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?: (
+    errors: FormikErrors<FormValues>
+  ) => Nullable<string>
   previewOverride?: (toggleMenu: () => void) => ReactNode
 } & FormikConfig<FormValues>
 
@@ -116,13 +160,24 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
     menuFields,
     renderValue,
     onSubmit,
+    forceOpen,
+    setForceOpen,
+    closeMenuCallback,
     error,
     errorMessage,
+    displayMenuErrorMessage,
     previewOverride,
     ...formikProps
   } = props
   const [isMenuOpen, toggleMenu] = useToggle(false)
 
+  useEffect(() => {
+    if (forceOpen && setForceOpen) {
+      setForceOpen(false)
+      toggleMenu()
+    }
+  }, [forceOpen, setForceOpen, toggleMenu])
+
   const preview = previewOverride ? (
     previewOverride(toggleMenu)
   ) : (
@@ -159,6 +214,8 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
           isOpen={isMenuOpen}
           onClose={toggleMenu}
           menuFields={menuFields}
+          closeMenuCallback={closeMenuCallback}
+          displayMenuErrorMessage={displayMenuErrorMessage}
         />
       </Formik>
     </>

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)

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 { dropdownRows } 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
@@ -160,7 +160,7 @@ const EditTrackModal = ({
         ...p,
         allowDelete: true,
         allowCategorySwitch: true,
-        category: dropdownRows[0]
+        category: stemDropdownRows[0]
       }))
 
     setPendingUploads((s) => [...s, ...processed])

packages/web/src/components/source-files-modal/SourceFilesModal.module.css → 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;