Scheduled release follow ons: usdc to special access, persist selected date, etc

packages/common/src/store/cache/reducer.ts

@@ -89,7 +89,8 @@ const forceUpdateKeys = new Set([
   'followee_reposts',
   'followee_saves',
   'associated_wallets',
-  'associated_sol_wallets'
+  'associated_sol_wallets',
+  'premium_conditions'
 ])
 
 // Customize lodash recursive merge to never merge

packages/discovery-provider/src/tasks/metadata.py

@@ -179,7 +179,6 @@ class PlaylistMetadata(TypedDict):
     "track_cid",
     "duration",
     "is_available",
-    "is_scheduled_release",
 }
 
 immutable_user_fields = immutable_fields | {

packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx

@@ -5,6 +5,7 @@ import { Dimensions, View } from 'react-native'
 
 import IconHidden from 'app/assets/images/iconHidden.svg'
 import { Text } from 'app/components/core'
+import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
@@ -17,6 +18,7 @@ const messages = {
   hidden: 'Hidden',
   hiddenSubtitle:
     "Hidden tracks won't be visible to your followers. Only you will see them on your profile. Anyone who has the link will be able to listen.",
+  noHiddenHint: 'Scheduled tracks are hidden by default until release.',
   hideTrack: 'Hide Track',
   showGenre: 'Show Genre',
   showMood: 'Show Mood',
@@ -70,12 +72,16 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   },
   switch: {
     marginTop: spacing(2)
+  },
+  noHidden: {
+    marginTop: spacing(4)
   }
 }))
 
 export const HiddenAvailability = ({
   selected,
-  disabled = false
+  disabled = false,
+  isScheduledRelease
 }: TrackAvailabilitySelectionProps) => {
   const styles = useStyles()
   const secondary = useColor('secondary')
@@ -121,6 +127,9 @@ export const HiddenAvailability = ({
           {messages.hidden}
         </Text>
       </View>
+      {isUnlisted && isScheduledRelease ? (
+        <HelpCallout style={styles.noHidden} content={messages.noHiddenHint} />
+      ) : null}
       {selected ? (
         <>
           <View style={styles.subtitleContainer}>

packages/mobile/src/screens/edit-track-screen/components/types.ts

@@ -5,4 +5,6 @@ export type TrackAvailabilitySelectionProps = {
   disabled?: boolean
   disabledContent?: boolean
   previousPremiumConditions?: Nullable<PremiumConditions>
+  isScheduledRelease?: boolean
+  isUnlisted?: boolean
 }

packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx

@@ -218,6 +218,8 @@ export const AccessAndSaleScreen = () => {
     <HiddenAvailability
       selected={availability === TrackAvailabilityType.HIDDEN}
       disabled={noHidden}
+      isScheduledRelease={isScheduledRelease}
+      isUnlisted={isUnlisted}
     />
   )
 

packages/mobile/src/screens/edit-track-screen/screens/ReleaseDateScreen.tsx

@@ -74,22 +74,8 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
   }
 }))
 
-const data: ListSelectionData[] = [
-  {
-    label: ReleaseDateType.RELEASE_NOW,
-    value: ReleaseDateType.RELEASE_NOW,
-    disabled: false
-  },
-  {
-    label: ReleaseDateType.SCHEDULED_RELEASE,
-    value: ReleaseDateType.SCHEDULED_RELEASE,
-    disabled: false
-  }
-].filter(removeNullable)
-
 export const ScheduledReleaseRadioField = (props) => {
-  const { selected } = props
-  const isInitiallyUnlisted = props.route.params.isInitiallyUnlisted
+  const { selected, isInitiallyUnlisted } = props
   const { primary } = useThemeColors()
   const styles = useStyles()
   const theme = useThemeVariant()
@@ -243,7 +229,7 @@ export const ScheduledReleaseRadioField = (props) => {
 }
 
 export const ReleaseNowRadioField = (props) => {
-  const { selected } = props
+  const { selected, isInitiallyUnlisted } = props
   const [{ value: releaseDateValue }, , { setValue: setReleaseDateValue }] =
     useField<Nullable<string>>('release_date')
   const styles = useStyles()
@@ -268,7 +254,12 @@ export const ReleaseNowRadioField = (props) => {
 
   return (
     <View style={styles.releaseNowContainer}>
-      <Text size='l' strength='strong' variant='body'>
+      <Text
+        size='l'
+        strength='strong'
+        variant='body'
+        color={!isInitiallyUnlisted ? 'subdued' : undefined}
+      >
         {messages.releaseNowRadio}
       </Text>
       {selected ? (
@@ -284,6 +275,7 @@ export const ReleaseNowRadioField = (props) => {
 }
 
 export const ReleaseDateScreen = (props) => {
+  const isInitiallyUnlisted = props.route.params.isInitiallyUnlisted
   const [{ value }] = useField<Nullable<string>>('release_date')
 
   const [releaseDateType, setReleaseDateType] = useState<ReleaseDateType>(
@@ -296,12 +288,13 @@ export const ReleaseDateScreen = (props) => {
     [ReleaseDateType.RELEASE_NOW]: (
       <ReleaseNowRadioField
         selected={releaseDateType === ReleaseDateType.RELEASE_NOW}
+        isInitiallyUnlisted={isInitiallyUnlisted}
       />
     ),
     [ReleaseDateType.SCHEDULED_RELEASE]: (
       <ScheduledReleaseRadioField
         selected={releaseDateType === ReleaseDateType.SCHEDULED_RELEASE}
-        {...props}
+        isInitiallyUnlisted={isInitiallyUnlisted}
       />
     )
   }
@@ -312,6 +305,18 @@ export const ReleaseDateScreen = (props) => {
     navigation.goBack()
     dispatch(reset())
   }, [navigation, dispatch])
+  const data: ListSelectionData[] = [
+    {
+      label: ReleaseDateType.RELEASE_NOW,
+      value: ReleaseDateType.RELEASE_NOW,
+      disabled: !isInitiallyUnlisted
+    },
+    {
+      label: ReleaseDateType.SCHEDULED_RELEASE,
+      value: ReleaseDateType.SCHEDULED_RELEASE,
+      disabled: false
+    }
+  ].filter(removeNullable)
 
   return (
     <ListSelectionScreen

packages/web/src/components/data-entry/FormTile.jsx

@@ -413,6 +413,7 @@ const AdvancedForm = (props) => {
   const didUpdateReleaseDate = (newState) => {
     props.onChangeField('release_date', newState.release_date)
     props.onChangeField('is_unlisted', newState.is_unlisted)
+    props.onChangeField('is_scheduled_release', newState.is_unlisted)
   }
 
   const didToggleHideRemixesState = () => {

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

@@ -94,8 +94,11 @@ export const ReleaseDateTriggerLegacy = (
       newState.is_unlisted = false
     } else {
       newState.is_unlisted = true
+      newState.is_scheduled_release = true
     }
+    props.initialForm.release_date = newState.release_date
 
+    setTrackReleaseDateState(newState.release_date)
     setTrackReleaseDateState(newState.release_date)
     didUpdateState(newState)
   }
@@ -114,6 +117,7 @@ export const ReleaseDateTriggerLegacy = (
             <Text>{messages.description}</Text>
             <ReleaseDateRadioItems
               isInitiallyUnlisted={props.initialForm.is_unlisted}
+              initialReleaseDate={trackReleaseDateState}
             />
           </Flex>
         </>

packages/web/src/components/share-modal/ShareModal.tsx

@@ -155,8 +155,7 @@ export const ShareModal = () => {
     ),
     shareType: content?.type ?? 'track',
     isPrivate:
-      content?.type === 'playlist' ? content.playlist.is_private : false,
-    isUnlisted: content?.type === 'track' ? content.track.is_unlisted : false
+      content?.type === 'playlist' ? content.playlist.is_private : false
   }
 
   if (isMobile()) return <ShareDrawer {...shareProps} />

packages/web/src/components/share-modal/components/ShareDialog.tsx

@@ -53,8 +53,7 @@ export const ShareDialog = ({
   onClosed,
   showTikTokShareAction,
   shareType,
-  isPrivate,
-  isUnlisted
+  isPrivate
 }: ShareDialogProps) => {
   return (
     <Modal
@@ -86,15 +85,13 @@ export const ShareDialog = ({
               iconClassName={styles.shareIcon}
               textClassName={styles.shareActionLabel}
             />
-            {!isUnlisted ? (
-              <ShareActionListItem
-                leftIcon={<IconTwitterBird {...iconProps} />}
-                text={messages.twitter}
-                onClick={onShareToTwitter}
-                iconClassName={styles.shareIcon}
-                textClassName={styles.shareActionLabel}
-              />
-            ) : null}
+            <ShareActionListItem
+              leftIcon={<IconTwitterBird {...iconProps} />}
+              text={messages.twitter}
+              onClick={onShareToTwitter}
+              iconClassName={styles.shareIcon}
+              textClassName={styles.shareActionLabel}
+            />
             {showTikTokShareAction ? (
               <ShareActionListItem
                 leftIcon={<IconTikTok {...iconProps} />}

packages/web/src/components/share-modal/types.ts

@@ -12,5 +12,4 @@ export type ShareProps = {
   showTikTokShareAction?: boolean
   shareType: ShareType
   isPrivate: boolean
-  isUnlisted: boolean
 }

packages/web/src/components/track/GiantTrackTile.tsx

@@ -13,7 +13,8 @@ import {
   PremiumConditions,
   FieldVisibility,
   getDogEarType,
-  isPremiumContentUSDCPurchaseGated
+  isPremiumContentUSDCPurchaseGated,
+  publishTrackConfirmationModalUIActions
 } from '@audius/common'
 import { Flex } from '@audius/harmony'
 import { Mood } from '@audius/sdk'
@@ -28,6 +29,7 @@ import {
 } from '@audius/stems'
 import cn from 'classnames'
 import moment from 'moment'
+import { useDispatch } from 'react-redux'
 
 import IconRobot from 'assets/img/robot.svg'
 import DownloadButtons from 'components/download-buttons/DownloadButtons'
@@ -58,6 +60,9 @@ import InfoLabel from './InfoLabel'
 import { PlayPauseButton } from './PlayPauseButton'
 import { PremiumTrackSection } from './PremiumTrackSection'
 
+const { requestOpen: openPublishTrackConfirmationModal } =
+  publishTrackConfirmationModalUIActions
+
 const BUTTON_COLLAPSE_WIDTHS = {
   first: 1095,
   second: 1190,
@@ -176,6 +181,7 @@ export const GiantTrackTile = ({
   trackTitle,
   userId
 }: GiantTrackTileProps) => {
+  const dispatch = useDispatch()
   const [artworkLoading, setArtworkLoading] = useState(true)
   const onArtworkLoad = useCallback(
     () => setArtworkLoading(false),
@@ -249,7 +255,19 @@ export const GiantTrackTile = ({
             )
           }
           widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
-          onClick={isPublishing ? undefined : () => onMakePublic(trackId)}
+          onClick={
+            isPublishing
+              ? undefined
+              : () => {
+                  dispatch(
+                    openPublishTrackConfirmationModal({
+                      confirmCallback: () => {
+                        onMakePublic(trackId)
+                      }
+                    })
+                  )
+                }
+          }
         />
       )
     )

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

@@ -26,10 +26,11 @@ const messages = {
 
 type ShareBannerProps = {
   user: User
+  isUnlistedTrack: boolean
 }
 
 export const ShareBanner = (props: ShareBannerProps) => {
-  const { user } = props
+  const { user, isUnlistedTrack } = props
   const dispatch = useDispatch()
   const { toast } = useContext(ToastContext)
   const record = useRecord()
@@ -66,30 +67,32 @@ export const ShareBanner = (props: ShareBannerProps) => {
       <Text variant='heading' size='medium' color='darkmodeStaticWhite'>
         {messages.shareText}
       </Text>
-      <div className={styles.buttonContainer}>
-        <Button
-          fullWidth
-          leftIcon={<IconTwitterBird />}
-          onClick={handleTwitterShare}
-          text={
-            <Text variant='title' size='large' color='secondary'>
-              {messages.twitterButtonText}
-            </Text>
-          }
-          type={ButtonType.WHITE}
-        />
-        <Button
-          fullWidth
-          leftIcon={<IconLink />}
-          onClick={handleCopyTrackLink}
-          text={
-            <Text variant='title' size='large' color='secondary'>
-              {messages.copyLinkButtonText}
-            </Text>
-          }
-          type={ButtonType.WHITE}
-        />
-      </div>
+      {!isUnlistedTrack ? (
+        <div className={styles.buttonContainer}>
+          <Button
+            fullWidth
+            leftIcon={<IconTwitterBird />}
+            onClick={handleTwitterShare}
+            text={
+              <Text variant='title' size='large' color='secondary'>
+                {messages.twitterButtonText}
+              </Text>
+            }
+            type={ButtonType.WHITE}
+          />
+          <Button
+            fullWidth
+            leftIcon={<IconLink />}
+            onClick={handleCopyTrackLink}
+            text={
+              <Text variant='title' size='large' color='secondary'>
+                {messages.copyLinkButtonText}
+              </Text>
+            }
+            type={ButtonType.WHITE}
+          />
+        </div>
+      ) : null}
     </div>
   )
 }

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

@@ -624,7 +624,9 @@ export const AccessAndSaleMenuFields = (props: AccesAndSaleMenuFieldsProps) => {
           value={TrackAvailabilityType.HIDDEN}
           description={messages.hiddenSubtitle}
           disabled={noHidden}
-          hintContent={isScheduledRelease ? messages.hiddenHint : ''}
+          hintContent={
+            isScheduledRelease && isInitiallyUnlisted ? messages.hiddenHint : ''
+          }
           checkedContent={<HiddenAvailabilityFields />}
         />
       </RadioButtonGroup>