[C-4518] Add album advanced menu and upc

packages/web/src/components/edit-collection/desktop/EditCollectionForm.tsx

@@ -9,6 +9,7 @@ import { Flex, Text } from '@audius/harmony'
 import { Form, Formik } from 'formik'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
+import { AdvancedAlbumField } from 'components/edit/fields/AdvancedAlbumField'
 import { CollectionTrackFieldArray } from 'components/edit/fields/CollectionTrackFieldArray'
 import { ReleaseDateFieldLegacy } from 'components/edit/fields/ReleaseDateFieldLegacy'
 import { SelectGenreField } from 'components/edit/fields/SelectGenreField'
@@ -103,6 +104,7 @@ export const EditCollectionForm = (props: EditCollectionFormProps) => {
               <PriceAndAudienceField isAlbum isUpload />
             </Flex>
           ) : null}
+          {isAlbum ? <AdvancedAlbumField /> : null}
           <div className={styles.trackDetails}>
             <Text variant='label'>{messages.trackDetails.title}</Text>
             <Text variant='body'>{messages.trackDetails.description}</Text>

packages/web/src/components/edit/fields/AdvancedAlbumField.tsx

@@ -0,0 +1,74 @@
+import { Nullable } from '@audius/common/utils'
+import { Flex, IconIndent, IconInfo, Text } from '@audius/harmony'
+import { useField } from 'formik'
+import { z } from 'zod'
+import { toFormikValidationSchema } from 'zod-formik-adapter'
+
+import {
+  ContextualMenu,
+  SelectedValue
+} from 'components/data-entry/ContextualMenu'
+import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
+import { Tooltip } from 'components/tooltip'
+
+const messages = {
+  title: 'Advanced',
+  description:
+    'Provide detailed metadata to help identify and manage your music.',
+  value: 'UPC',
+  menuLabel: 'UPC (Universal Product Code)',
+  menuLabelDescription:
+    'A Universal Product Code (UPC) is a unique barcode that identifies music releases.',
+  inputLabel: 'UPC',
+  inputError: 'Invalid UPC'
+}
+
+type AdvancedAlbumFieldValues = {
+  upc: Nullable<string>
+}
+
+const advancedSchema = z.object({
+  upc: z
+    .string()
+    .regex(/^\d{12}$/, messages.inputError)
+    .nullable()
+})
+
+export const AdvancedAlbumField = () => {
+  const [{ value: upc }, , { setValue }] = useField('upc')
+
+  return (
+    <ContextualMenu
+      icon={<IconIndent />}
+      label={messages.title}
+      description={messages.description}
+      initialValues={{ upc }}
+      validationSchema={toFormikValidationSchema(advancedSchema)}
+      onSubmit={(values: AdvancedAlbumFieldValues) => {
+        const { upc } = values
+        setValue(upc)
+      }}
+      renderValue={() =>
+        upc ? <SelectedValue label={`${messages.value} ${upc}`} /> : null
+      }
+      menuFields={
+        <Flex direction='column' gap='l'>
+          <Flex gap='s' alignItems='center'>
+            <Text variant='title' size='l'>
+              {messages.menuLabel}
+            </Text>
+            <Tooltip text={messages.menuLabelDescription} placement='bottom'>
+              <IconInfo size='s' color='subdued' />
+            </Tooltip>
+          </Flex>
+          <HarmonyTextField
+            name='upc'
+            label={messages.inputLabel}
+            transformValueOnChange={(value) => value.replace(/\D/g, '')}
+            maxLength={12}
+          />
+        </Flex>
+      }
+    />
+  )
+}

packages/web/src/components/form-fields/HarmonyTextField.tsx

@@ -54,6 +54,7 @@ export const HarmonyTextField = forwardRef(
       <TextInput
         ref={ref}
         {...field}
+        value={value ?? ''}
         error={hasError}
         helperText={helperText ?? (hasError ? error : undefined)}
         onChange={(e) => {

packages/web/src/components/form-fields/TextField.tsx

@@ -14,6 +14,7 @@ export const TextField = (props: TextFieldProps) => {
   return (
     <TextInput
       {...field}
+      value={field.value ?? ''}
       error={hasError}
       helperText={hasError ? error : undefined}
       {...other}