diff --git a/packages/web/src/components/edit-collection/desktop/EditCollectionForm.tsx b/packages/web/src/components/edit-collection/desktop/EditCollectionForm.tsx index 9858add5312..b037c61e02b 100644 --- a/packages/web/src/components/edit-collection/desktop/EditCollectionForm.tsx +++ b/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) => { ) : null} + {isAlbum ? : null}
{messages.trackDetails.title} {messages.trackDetails.description} diff --git a/packages/web/src/components/edit/fields/AdvancedAlbumField.tsx b/packages/web/src/components/edit/fields/AdvancedAlbumField.tsx new file mode 100644 index 00000000000..15cd7c4b4a5 --- /dev/null +++ b/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 +} + +const advancedSchema = z.object({ + upc: z + .string() + .regex(/^\d{12}$/, messages.inputError) + .nullable() +}) + +export const AdvancedAlbumField = () => { + const [{ value: upc }, , { setValue }] = useField('upc') + + return ( + } + label={messages.title} + description={messages.description} + initialValues={{ upc }} + validationSchema={toFormikValidationSchema(advancedSchema)} + onSubmit={(values: AdvancedAlbumFieldValues) => { + const { upc } = values + setValue(upc) + }} + renderValue={() => + upc ? : null + } + menuFields={ + + + + {messages.menuLabel} + + + + + + value.replace(/\D/g, '')} + maxLength={12} + /> + + } + /> + ) +} diff --git a/packages/web/src/components/form-fields/HarmonyTextField.tsx b/packages/web/src/components/form-fields/HarmonyTextField.tsx index a9374bc75fc..df04ca65dab 100644 --- a/packages/web/src/components/form-fields/HarmonyTextField.tsx +++ b/packages/web/src/components/form-fields/HarmonyTextField.tsx @@ -54,6 +54,7 @@ export const HarmonyTextField = forwardRef( { diff --git a/packages/web/src/components/form-fields/TextField.tsx b/packages/web/src/components/form-fields/TextField.tsx index ca925648fb4..3ed2e0b497e 100644 --- a/packages/web/src/components/form-fields/TextField.tsx +++ b/packages/web/src/components/form-fields/TextField.tsx @@ -14,6 +14,7 @@ export const TextField = (props: TextFieldProps) => { return (