[C-2676] Rough release date modal (#3610)

packages/web/package.json

@@ -82,6 +82,7 @@
     "@sentry/integrations": "6.16.1",
     "@solana/spl-token": "0.1.8",
     "@solana/web3.js": "1.53.0",
+    "@types/react-dates": "21.8.3",
     "@types/react-twitter-auth": "0.0.4",
     "@walletconnect/web3-provider": "1.4.1",
     "amplitude-js": "8.10.0",
@@ -217,6 +218,7 @@
     "@types/numeral": "^2.0.2",
     "@types/react": "18.0.26",
     "@types/react-beautiful-dnd": "13.1.3",
+    "@types/react-dates": "^21.8.3",
     "@types/react-dom": "18.0.10",
     "@types/react-helmet": "6.1.6",
     "@types/react-infinite-scroller": "1.2.1",

packages/web/src/assets/styles/type.css

@@ -160,5 +160,6 @@
   --font-medium: 500;
   --font-demi-bold: 600;
   --font-bold: 700;
+  --font-extra-bold: 800;
   --font-heavy: 900;
 }

packages/web/src/pages/upload-page/components/EditPageNew.tsx

@@ -3,13 +3,15 @@ import { useCallback } from 'react'
 import { ExtendedTrackMetadata, Nullable } from '@audius/common'
 import { Button, ButtonType, IconArrow } from '@audius/stems'
 import { Formik } from 'formik'
+import moment from 'moment'
 import * as Yup from 'yup'
 
 import PreviewButton from 'components/upload/PreviewButton'
 
 import TrackMetadataFields from '../fields/TrackMetadataFields'
 
 import styles from './EditPageNew.module.css'
+import { TrackModalArray } from './TrackModalArray'
 import { TrackForUpload } from './types'
 
 type EditPageProps = {
@@ -18,12 +20,12 @@ type EditPageProps = {
   onContinue: () => void
 }
 export type FormValues = ExtendedTrackMetadata & {
+  releaseDate: moment.Moment
   licenseType: {
     allowAttribution: Nullable<boolean>
     commercialUse: Nullable<boolean>
     derivativeWorks: Nullable<boolean>
   }
-  trackArtwork?: string
 }
 
 const EditTrackSchema = Yup.object().shape({
@@ -48,6 +50,7 @@ export const EditPageNew = (props: EditPageProps) => {
   const initialValues: FormValues = {
     ...tracks[0].metadata,
     artwork: null,
+    releaseDate: moment().startOf('day'),
     licenseType: {
       allowAttribution: null,
       commercialUse: null,
@@ -73,6 +76,7 @@ export const EditPageNew = (props: EditPageProps) => {
         <>
           <div className={styles.editForm}>
             <TrackMetadataFields playing={false} type='track' />
+            <TrackModalArray />
             <PreviewButton playing={false} onClick={() => {}} />
           </div>
           <div className={styles.continue}>

packages/web/src/pages/upload-page/components/ReleaseDateModalField.module.css

@@ -0,0 +1,108 @@
+/* Form display component */
+.displayTile {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: var(--unit-4) var(--unit-6);
+  gap: var(--unit-4);
+
+  border: 1px solid var(--neutral-light-8);
+  border-radius: 8px;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: var(--font-extra-bold);
+  font-size: var(--font-l);
+  line-height: 20px;
+}
+
+.caret {
+  color: var(--neutral-light-4);
+  height: 14px;
+  width: 14px;
+}
+
+.description {
+  font-weight: var(--font-medium);
+}
+
+.valueDisplay {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+  gap: 4px;
+  background: var(--neutral-light-8);
+  border: 1px solid var(--neutral-light-7);
+  border-radius: 2px;
+
+  font-family: 'Avenir Next LT Pro';
+  font-weight: var(--font-demi-bold);
+  font-size: var(--font-m);
+  line-height: 20px;
+  text-transform: uppercase;
+}
+
+.calendarIcon {
+  height: 14px;
+  width: 14px;
+}
+
+/* Modal styles */
+.modalHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+
+.modalTitle {
+  font-weight: var(--font-heavy);
+  font-size: var(--font-xl);
+  line-height: 25px;
+
+  text-align: center;
+  text-transform: uppercase;
+
+  color: var(--neutral-light-2);
+}
+
+/* TODO: figure out how to do this as .modal .title */
+.modalHeading {
+  margin-bottom: var(--unit-2);
+}
+
+.titleIcon {
+  height: 18px;
+  width: 18px;
+}
+
+.datePicker {
+  margin-top: var(--unit-4);
+  background-color: var(--neutral-light-10);
+  border: 1px solid var(--neutral-light-9);
+  border-radius: 4px;
+  width: 100%;
+  padding: var(--unit-3) var(--unit-4);
+}
+
+.datePicker :global(.DateInput_input) {
+  background-color: var(--neutral-light-10);
+  border: none;
+  color: var(--neutral);
+  font-weight: var(--font-medium);
+  font-size: var(--font-l);
+  line-height: 18px;
+  width: 200px;
+  padding: 0;
+}

packages/web/src/pages/upload-page/components/ReleaseDateModalField.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+
+import {
+  Button,
+  ButtonType,
+  IconCalendar,
+  IconCaretRight,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle
+} from '@audius/stems'
+import cn from 'classnames'
+import { useField } from 'formik'
+
+import { DatePickerField } from '../fields/DatePickerField'
+
+import styles from './ReleaseDateModalField.module.css'
+
+const messages = {
+  title: 'Release Date',
+  description:
+    'Specify a release date (in the past) for your music. Release date will affect the order of content on your profile and is visible to users.',
+  done: 'Done'
+}
+
+const FIELD_NAME = 'releaseDate'
+
+export const ReleaseDateModalField = () => {
+  const [{ value }] = useField<moment.Moment>(FIELD_NAME)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const open = () => setIsModalOpen(true)
+  const close = () => setIsModalOpen(false)
+
+  const modal = (
+    <div className={styles.modal}>
+      <Modal onClose={close} isOpen={isModalOpen}>
+        <ModalHeader>
+          <div className={styles.modalHeader}>
+            <ModalTitle
+              className={styles.modalTitle}
+              title={messages.title}
+              icon={<IconCalendar className={styles.titleIcon} />}
+            />
+          </div>
+        </ModalHeader>
+        <ModalContent>
+          <h3 className={cn(styles.title, styles.modalHeading)}>
+            {messages.title}
+          </h3>
+          <p className={styles.description}>{messages.description}</p>
+          <div className={styles.datePicker}>
+            <DatePickerField name={FIELD_NAME} label={'Release Date'} />
+          </div>
+        </ModalContent>
+        <ModalFooter>
+          <Button
+            type={ButtonType.PRIMARY}
+            text={messages.done}
+            onClick={close}
+          />
+        </ModalFooter>
+      </Modal>
+    </div>
+  )
+
+  return (
+    <>
+      <div className={styles.displayTile} onClick={open}>
+        <div className={styles.header}>
+          <div className={styles.title}>{messages.title}</div>
+          <IconCaretRight className={styles.caret} />
+        </div>
+        <div className={styles.description}>{messages.description}</div>
+        <div className={styles.valueDisplay}>
+          <IconCalendar className={styles.calendarIcon} />
+          {value.calendar().split(' at')[0]}
+        </div>
+      </div>
+      {modal}
+    </>
+  )
+}

packages/web/src/pages/upload-page/components/TrackModalArray.tsx

@@ -0,0 +1,9 @@
+import { ReleaseDateModalField } from './ReleaseDateModalField'
+
+export const TrackModalArray = () => {
+  return (
+    <>
+      <ReleaseDateModalField />
+    </>
+  )
+}

packages/web/src/pages/upload-page/fields/DatePickerField.module.css

@@ -0,0 +1,45 @@
+.datePickerField {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.label {
+  color: var(--neutral-light-4);
+  font-size: var(--font-s);
+  line-height: 14px;
+  margin-bottom: var(--unit-1);
+}
+
+.iconCalendar {
+  height: 20px;
+  width: 20px;
+  margin-right: var(--unit-4);
+  color: var(--neutral-light-4);
+}
+
+.datePickerField :global(.SingleDatePicker_picker) {
+  top: -150px !important;
+  left: 128px !important;
+}
+
+.datePickerField :global(.DateInput_fang) {
+  display: none;
+}
+
+.datePickerField :global(.CalendarDay) {
+  font-family: var(--font-family);
+  line-height: 38px;
+  color: var(--neutral);
+  font-size: var(--font-s);
+  font-weight: var(--font-bold);
+}
+
+.datePickerField :global(.CalendarDay.CalendarDay__blocked_out_of_range) {
+  color: var(--neutral-light-7);
+}
+
+.datePickerField :global(.DayPicker_weekHeader) {
+  margin-top: -8px;
+}

packages/web/src/pages/upload-page/fields/DatePickerField.tsx

@@ -0,0 +1,50 @@
+import 'react-dates/initialize'
+import 'react-dates/lib/css/_datepicker.css'
+
+import { useState } from 'react'
+
+import cn from 'classnames'
+import { useField } from 'formik'
+import moment from 'moment'
+import { SingleDatePicker, isInclusivelyBeforeDay } from 'react-dates'
+
+import { ReactComponent as IconCalendar } from 'assets/img/iconCalendar.svg'
+
+import styles from './DatePickerField.module.css'
+
+type DatePickerFieldProps = {
+  name: string
+  label: string
+  style?: string
+}
+
+export const DatePickerField = (props: DatePickerFieldProps) => {
+  const { name, label, style } = props
+  const [field, , helpers] = useField(name)
+  const [isFocused, setIsFocused] = useState(false)
+
+  return (
+    <div className={styles.datePickerField} onClick={() => setIsFocused(true)}>
+      <IconCalendar className={styles.iconCalendar} />
+      <div>
+        <div className={styles.label}>{label}</div>
+        <div className={cn(styles.datePicker, style)}>
+          <SingleDatePicker
+            id={field.name}
+            placeholder={moment().format('MM/DD/YYYY')}
+            // @ts-ignore mismatched moment versions; shouldn't be relevant here
+            isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
+            date={field.value}
+            onDateChange={helpers.setValue}
+            focused={isFocused}
+            onFocusChange={({ focused }) => setIsFocused(focused)}
+            numberOfMonths={1}
+            hideKeyboardShortcutsPanel
+            small
+            noBorder
+          />
+        </div>
+      </div>
+    </div>
+  )
+}