[C-2914] USDC purchase options for new upload UI (web) (#3888)

Author: amendelsohn

packages/common/src/models/Track.ts

@@ -199,6 +199,7 @@ export type TrackMetadata = {
     category: StemCategory
   }
   remix_of: Nullable<RemixOf>
+  preview_start_seconds?: number
 
   // Added fields
   dateListened?: string

packages/common/src/models/TrackAvailabilityType.ts

@@ -1,5 +1,6 @@
 export enum TrackAvailabilityType {
   PUBLIC = 'PUBLIC',
+  USDC_PURCHASE = 'USDC_PURCHASE',
   SPECIAL_ACCESS = 'SPECIAL_ACCESS',
   COLLECTIBLE_GATED = 'COLLECTIBLE_GATED',
   HIDDEN = 'HIDDEN'

packages/web/src/components/data-entry/InputV2.module.css

@@ -3,7 +3,7 @@
   align-items: center;
   gap: var(--unit-2);
   width: 100%;
-  padding-right: var(--unit-4);
+  padding: 0 var(--unit-4);
   border: 1px solid var(--neutral-light-8);
   border-radius: var(--unit-1);
   background-color: var(--neutral-light-10);
@@ -59,7 +59,6 @@
 .textInput {
   width: 100%;
   height: 100%;
-  padding-left: var(--unit-4);
   outline: 0;
   border: 0;
   background: none;
@@ -73,6 +72,11 @@
   font-weight: var(--font-medium);
 }
 
+.inputRow {
+  width: 100%;
+  justify-content: space-between;
+}
+
 /** 
  * Flex container so that the absolutely positioned elevated placeholder
  * starts out centered vertically
@@ -92,7 +96,7 @@
 }
 
 /** Push the input down a bit to make room for the elevated placeholder **/
-.elevatedLabel .textInput {
+.elevatedLabel .inputRow {
   padding-top: calc(var(--font-xs));
 }
 
@@ -101,7 +105,6 @@
   position: absolute;
   z-index: 2;
   transition: all 0.3s ease;
-  left: var(--unit-4);
 }
 
 /** Move the elevated label to the top left if focused or has text **/

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

@@ -2,10 +2,12 @@ import { ComponentPropsWithoutRef, MutableRefObject, RefCallback } from 'react'
 
 import cn from 'classnames'
 
+import layoutStyles from 'components/layout/layout.module.css'
+import { Text } from 'components/typography'
+
 import { HelperText } from './HelperText'
 import styles from './InputV2.module.css'
 import { useFocusState } from './useFocusState'
-
 export enum InputV2Size {
   SMALL,
   MEDIUM,
@@ -29,6 +31,8 @@ export type InputV2Props = Omit<ComponentPropsWithoutRef<'input'>, 'size'> & {
   inputClassName?: string
   label?: string
   helperText?: string
+  startAdornment?: string
+  endAdornment?: string
 }
 
 export const InputV2 = (props: InputV2Props) => {
@@ -51,10 +55,12 @@ export const InputV2 = (props: InputV2Props) => {
     onBlur: onBlurProp,
     placeholder,
     helperText,
+    startAdornment,
+    endAdornment,
     ...other
   } = props
 
-  const characterCount = value ? `${value}`.length : 0
+  const characterCount = value !== undefined ? `${value}`.length : 0
   const nearCharacterLimit = maxLength && characterCount >= 0.9 * maxLength
   const elevatePlaceholder = variant === InputV2Variant.ELEVATED_PLACEHOLDER
   const label = required ? `${labelProp} *` : labelProp
@@ -80,18 +86,36 @@ export const InputV2 = (props: InputV2Props) => {
   }
 
   const input = (
-    <input
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      ref={inputRef}
-      required={required}
-      className={cn(styles.textInput, inputClassName)}
-      value={value}
-      maxLength={maxLength}
-      disabled={disabled}
-      placeholder={isFocused ? placeholder : undefined}
-      {...other}
-    />
+    <div className={cn(styles.inputRow, layoutStyles.row)}>
+      <div className={layoutStyles.row}>
+        {startAdornment ? (
+          <Text variant='label' size='large' color='--neutral-light-2'>
+            {startAdornment}
+          </Text>
+        ) : null}
+        <input
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          ref={inputRef}
+          required={required}
+          className={cn(styles.textInput, inputClassName)}
+          value={value}
+          maxLength={maxLength}
+          disabled={disabled}
+          placeholder={
+            isFocused || startAdornment || endAdornment
+              ? placeholder
+              : undefined
+          }
+          {...other}
+        />
+      </div>
+      {endAdornment ? (
+        <Text variant='label' size='large' color='--neutral-light-2'>
+          {endAdornment}
+        </Text>
+      ) : null}
+    </div>
   )
 
   return (
@@ -101,7 +125,8 @@ export const InputV2 = (props: InputV2Props) => {
           <label className={styles.elevatedLabel}>
             <span
               className={cn(styles.label, {
-                [styles.hasValue]: characterCount > 0
+                [styles.hasValue]:
+                  characterCount > 0 || startAdornment || endAdornment
               })}
             >
               {label}

packages/web/src/components/modal-radio/ModalRadioItem.module.css

@@ -4,8 +4,6 @@
 }
 
 .root {
-  display: flex;
-  gap: var(--unit-2);
   padding: var(--unit-6) 0;
   border-top: 1px solid var(--neutral-light-7);
   cursor: pointer;
@@ -18,13 +16,6 @@
   flex: 0 0 auto;
 }
 
-.labelContent {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--unit-2);
-}
-
 .optionTitle {
   display: flex;
   align-items: center;
@@ -39,16 +30,6 @@
   opacity: 0.5;
 }
 
-.optionDescription {
-  display: flex;
-  flex-direction: column;
-  gap: var(--unit-2);
-  margin-left: var(--unit-2);
-  font-weight: var(--font-medium);
-  font-size: var(--font-l);
-  line-height: 140%;
-}
-
 .root:has(.input:checked) .optionTitle {
   color: var(--secondary);
 }
@@ -64,3 +45,6 @@
   overflow: visible hidden;
   transition: height var(--quick);
 }
+.collapsibleContainer.collapsed {
+  display: none;
+}

packages/web/src/components/modal-radio/ModalRadioItem.tsx

@@ -5,12 +5,15 @@ import { ResizeObserver } from '@juggle/resize-observer'
 import cn from 'classnames'
 import useMeasure from 'react-use-measure'
 
+import layoutStyles from 'components/layout/layout.module.css'
+import { Text } from 'components/typography'
+
 import styles from './ModalRadioItem.module.css'
 
 type ModalRadioItemProps = {
   label: string
   title?: ReactNode
-  description: ReactNode
+  description?: ReactNode
   value: any
   disabled?: boolean
   icon?: ReactNode
@@ -38,32 +41,34 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
   }, [radioGroup, isCollapsed, value, setIsCollapsed])
 
   return (
-    <label className={cn(styles.root)}>
-      <RadioButton
-        className={styles.radio}
-        inputClassName={styles.input}
-        aria-label={label}
-        value={value}
-        disabled={disabled}
-      />
-      <div className={styles.labelContent}>
+    <label className={cn(styles.root, layoutStyles.col, layoutStyles.gap2)}>
+      <div className={cn(layoutStyles.row)}>
+        <RadioButton
+          className={styles.radio}
+          inputClassName={styles.input}
+          aria-label={label}
+          value={value}
+          disabled={disabled}
+        />
         <div className={styles.optionTitle}>
           {icon}
           <span>{title ?? label}</span>
         </div>
-        <div className={styles.optionDescription}>{description}</div>
-        {checkedContent ? (
-          <div
-            className={styles.collapsibleContainer}
-            style={{ height: isCollapsed ? 0 : bounds.height }}
-            aria-hidden={isCollapsed}
-          >
-            <div ref={ref} className={styles.checkedContent}>
-              {checkedContent}
-            </div>
-          </div>
-        ) : null}
       </div>
+      {checkedContent || description ? (
+        <div
+          className={cn(styles.collapsibleContainer, {
+            [styles.collapsed]: isCollapsed
+          })}
+          style={{ height: isCollapsed ? 0 : bounds.height }}
+          aria-hidden={isCollapsed}
+        >
+          <div ref={ref} className={cn(layoutStyles.col, layoutStyles.gap4)}>
+            <Text size='medium'>{description}</Text>
+            {checkedContent}
+          </div>
+        </div>
+      ) : null}
     </label>
   )
 }

packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx

@@ -283,7 +283,12 @@ const TrackAvailabilityModal = ({
   )
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} bodyClassName={styles.modalBody}>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      bodyClassName={styles.modalBody}
+      size='medium'
+    >
       <ModalHeader
         className={styles.modalHeader}
         onClose={onClose}

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

@@ -218,7 +218,7 @@ const TrackEditForm = (props: FormikProps<TrackEditFormValues>) => {
           {isMultiTrack ? <MultiTrackHeader /> : null}
           <div className={styles.trackEditForm}>
             <TrackMetadataFields />
-            <div className={styles.additionalFields}>
+            <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
               <ReleaseDateField />
               <RemixSettingsField />
               <SourceFilesField />