[PAY-1056] - More gated content updates and fixes (#3070)

Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · Mar 21, 2023 · c9a5879 · c9a5879
1 parent 23a02cb
commit c9a5879
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 47 deletions.
diff --git a/apps/audius-client/packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx b/apps/audius-client/packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx
@@ -61,7 +61,9 @@ export const EditTrackNavigator = (props: EditTrackNavigatorProps) => {
         <Stack.Screen name='IsrcIswc' component={IsrcIswcScreen} />
         <Stack.Screen name='LicenseType' component={LicenseTypeScreen} />
       </Stack.Navigator>
-      <GatedContentUploadPromptDrawer isUpload={props.isUpload} />
+      <GatedContentUploadPromptDrawer
+        isUpload={!props.initialValues.track_id}
+      />
     </>
   )
 }
diff --git a/...packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx b/...packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
@@ -141,7 +141,7 @@ export const CollectibleGatedAvailability = ({
   selected,
   disabled = false,
   disabledContent = false,
-  initialPremiumConditions
+  previousPremiumConditions
 }: TrackAvailabilitySelectionProps) => {
   const navigation = useNavigation()
   const styles = useStyles()
@@ -175,7 +175,7 @@ export const CollectibleGatedAvailability = ({
   const [{ value: premiumConditions }] =
     useField<Nullable<PremiumConditions>>('premium_conditions')
   const [selectedNFTCollection, setSelectedNFTCollection] = useState(
-    initialPremiumConditions?.nft_collection
+    previousPremiumConditions?.nft_collection
   )
 
   // Update nft collection gate when availability selection changes

diff --git a/...nt/packages/mobile/src/screens/edit-track-screen/components/SpecialAccessAvailability.tsx b/...nt/packages/mobile/src/screens/edit-track-screen/components/SpecialAccessAvailability.tsx
@@ -87,7 +87,7 @@ export const SpecialAccessAvailability = ({
   selected,
   disabled = false,
   disabledContent = false,
-  initialPremiumConditions
+  previousPremiumConditions
 }: TrackAvailabilitySelectionProps) => {
   const styles = useStyles()
   const secondary = useColor('secondary')
@@ -115,11 +115,13 @@ export const SpecialAccessAvailability = ({
     ? { follow_user_id: currentUserId }
     : null
   const [selectedSpecialAccessGate, setSelectedSpecialAccessGate] = useState(
-    !('nft_collection' in (initialPremiumConditions ?? {}))
-      ? initialPremiumConditions ?? defaultSpecialAccess
+    !('nft_collection' in (previousPremiumConditions ?? {}))
+      ? previousPremiumConditions ?? defaultSpecialAccess
       : defaultSpecialAccess
   )
 
+  const isContentDisabled = disabled || disabledContent
+
   // Update special access gate when selection changes
   useEffect(() => {
     if (selected && selectedSpecialAccessGate) {
@@ -163,32 +165,32 @@ export const SpecialAccessAvailability = ({
         <View style={styles.selection}>
           <TouchableOpacity
             onPress={handlePressFollowers}
-            disabled={
-              disabled || disabledContent || !!premiumConditions?.follow_user_id
-            }
+            disabled={isContentDisabled || !!premiumConditions?.follow_user_id}
           >
             <View style={styles.followersOnly}>
               <RadioButton
                 checked={!!premiumConditions?.follow_user_id}
-                disabled={disabled || disabledContent}
+                disabled={isContentDisabled}
                 style={styles.radio}
               />
-              <Text>{messages.followersOnly}</Text>
+              <Text style={isContentDisabled ? styles.disabledTitle : null}>
+                {messages.followersOnly}
+              </Text>
             </View>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={handlePressSupporters}
-            disabled={
-              disabled || disabledContent || !!premiumConditions?.tip_user_id
-            }
+            disabled={isContentDisabled || !!premiumConditions?.tip_user_id}
           >
             <View style={styles.supportersOnly}>
               <RadioButton
                 checked={!!premiumConditions?.tip_user_id}
-                disabled={disabled || disabledContent}
+                disabled={isContentDisabled}
                 style={styles.radio}
               />
-              <Text>{messages.supportersOnly}</Text>
+              <Text style={isContentDisabled ? styles.disabledTitle : null}>
+                {messages.supportersOnly}
+              </Text>
               <IconInfo style={styles.infoIcon} fill={neutralLight4} />
             </View>
           </TouchableOpacity>

diff --git a/apps/audius-client/packages/mobile/src/screens/edit-track-screen/components/types.ts b/apps/audius-client/packages/mobile/src/screens/edit-track-screen/components/types.ts
@@ -4,5 +4,5 @@ export type TrackAvailabilitySelectionProps = {
   selected: boolean
   disabled?: boolean
   disabledContent?: boolean
-  initialPremiumConditions?: Nullable<PremiumConditions>
+  previousPremiumConditions?: Nullable<PremiumConditions>
 }
diff --git a/...-client/packages/mobile/src/screens/edit-track-screen/screens/TrackAvailabilityScreen.tsx b/...-client/packages/mobile/src/screens/edit-track-screen/screens/TrackAvailabilityScreen.tsx
@@ -6,7 +6,7 @@ import {
   TrackAvailabilityType,
   collectiblesSelectors
 } from '@audius/common'
-import { useField } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import { useSelector } from 'react-redux'
 
 import IconHidden from 'app/assets/images/iconHidden.svg'
@@ -21,7 +21,7 @@ import { CollectibleGatedAvailability } from '../components/CollectibleGatedAvai
 import { HiddenAvailability } from '../components/HiddenAvailability'
 import { PublicAvailability } from '../components/PublicAvailability'
 import { SpecialAccessAvailability } from '../components/SpecialAccessAvailability'
-import type { RemixOfField } from '../types'
+import type { FormValues, RemixOfField } from '../types'
 
 import type { ListSelectionData } from './ListSelectionScreen'
 import { ListSelectionScreen } from './ListSelectionScreen'
@@ -73,14 +73,13 @@ export const TrackAvailabilityScreen = () => {
   const isCollectibleGatedEnabled = useIsCollectibleGatedEnabled()
 
   const navigation = useNavigation()
+  const { initialValues } = useFormikContext<FormValues>()
   const [{ value: isPremium }] = useField<boolean>('is_premium')
   const [{ value: premiumConditions }] =
     useField<Nullable<PremiumConditions>>('premium_conditions')
   const [{ value: isUnlisted }] = useField<boolean>('is_unlisted')
   const [{ value: remixOf }] = useField<RemixOfField>('remix_of')
   const isRemix = !!remixOf
-  const [{ value: trackId }] = useField<boolean>('track_id')
-  const isUpload = !trackId
 
   const { ethCollectionMap, solCollectionMap } = useSelector(
     getSupportedUserCollections
@@ -89,6 +88,8 @@ export const TrackAvailabilityScreen = () => {
   const numSolCollectibles = Object.keys(solCollectionMap).length
   const hasNoCollectibles = numEthCollectibles + numSolCollectibles === 0
 
+  const isUpload = !initialValues?.track_id
+  const initialPremiumConditions = initialValues?.premium_conditions ?? null
   const initialAvailability = useMemo(() => {
     if ('nft_collection' in (premiumConditions ?? {})) {
       return TrackAvailabilityType.COLLECTIBLE_GATED
@@ -104,27 +105,37 @@ export const TrackAvailabilityScreen = () => {
     // eslint-disable-next-line
   }, [])
 
-  // we only care about what the initial value was here
-  // eslint-disable-next-line
-  const initialPremiumConditions = useMemo(() => premiumConditions, [])
+  const isInitiallyPublic =
+    !isUpload && !initialValues.is_unlisted && !initialPremiumConditions
 
   const isInitiallySpecialAccess =
-    !isUpload && initialAvailability === TrackAvailabilityType.SPECIAL_ACCESS
+    !isUpload &&
+    !!(
+      initialPremiumConditions?.follow_user_id ||
+      initialPremiumConditions?.tip_user_id
+    )
   const noCollectibleGate =
-    isInitiallySpecialAccess || isRemix || hasNoCollectibles
+    isInitiallyPublic ||
+    isInitiallySpecialAccess ||
+    isRemix ||
+    hasNoCollectibles
   const noCollectibleDropdown = isInitiallySpecialAccess || !isUpload
 
   const isInitiallyCollectibleGated =
-    !isUpload && initialAvailability === TrackAvailabilityType.COLLECTIBLE_GATED
-  const noSpecialAccess = isInitiallyCollectibleGated || isRemix
+    !isUpload && !!initialPremiumConditions?.nft_collection
+  const noSpecialAccess =
+    isInitiallyPublic || isInitiallyCollectibleGated || isRemix
   const noSpecialAccessOptions = noSpecialAccess || !isUpload
 
-  const noHidden =
-    !isUpload && initialAvailability !== TrackAvailabilityType.HIDDEN
+  const noHidden = !isUpload && !initialValues.is_unlisted
 
   const [availability, setAvailability] =
     useState<TrackAvailabilityType>(initialAvailability)
 
+  // we only care about what the initial value was here
+  // eslint-disable-next-line
+  const previousPremiumConditions = useMemo(() => premiumConditions ?? initialPremiumConditions, [])
+
   const data: ListSelectionData[] = [
     { label: publicAvailability, value: publicAvailability },
     isSpecialAccessEnabled
@@ -157,7 +168,7 @@ export const TrackAvailabilityScreen = () => {
         selected={availability === TrackAvailabilityType.SPECIAL_ACCESS}
         disabled={noSpecialAccess}
         disabledContent={noSpecialAccessOptions}
-        initialPremiumConditions={initialPremiumConditions}
+        previousPremiumConditions={previousPremiumConditions}
       />
     )
   }
@@ -167,7 +178,7 @@ export const TrackAvailabilityScreen = () => {
         selected={availability === TrackAvailabilityType.COLLECTIBLE_GATED}
         disabled={noCollectibleGate}
         disabledContent={noCollectibleDropdown}
-        initialPremiumConditions={initialPremiumConditions}
+        previousPremiumConditions={previousPremiumConditions}
       />
     )
   }

diff --git a/apps/audius-client/packages/mobile/src/screens/edit-track-screen/types.ts b/apps/audius-client/packages/mobile/src/screens/edit-track-screen/types.ts
@@ -16,7 +16,6 @@ export type EditTrackScreenProps = {
   onSubmit: (values: ExtendedTrackMetadata) => void
   initialValues: ExtendedTrackMetadata & { trackArtwork?: string }
   doneText?: string
-  isUpload?: boolean
 } & Partial<ScreenProps>
 
 export type EditTrackFormProps = FormikProps<FormValues> &

diff --git a/apps/audius-client/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen.tsx b/apps/audius-client/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen.tsx
@@ -36,7 +36,6 @@ export const CompleteTrackScreen = () => {
       title={messages.title}
       url='/complete-track'
       doneText={messages.done}
-      isUpload
     />
   )
 }
diff --git a/...packages/web/src/components/track-availability-modal/SpecialAccessAvailability.module.css b/...packages/web/src/components/track-availability-modal/SpecialAccessAvailability.module.css
@@ -18,6 +18,9 @@
   display: flex;
   align-items: center;
   gap: var(--unit-2);
+}
+
+.row:not(.disabled) {
   cursor: pointer;
 }
 
@@ -29,3 +32,11 @@
   width: 272px;
   text-align: center;
 }
+
+.disabled .radio input {
+  cursor: default;
+}
+
+.disabled span {
+  color: var(--neutral-light-4);
+}
diff --git a/...client/packages/web/src/components/track-availability-modal/SpecialAccessAvailability.tsx b/...client/packages/web/src/components/track-availability-modal/SpecialAccessAvailability.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, useCallback } from 'react'
 
 import { accountSelectors, TrackAvailabilityType } from '@audius/common'
 import { IconInfo, RadioButton, RadioButtonGroup } from '@audius/stems'
+import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
 import Tooltip from 'components/tooltip/Tooltip'
@@ -59,21 +60,21 @@ export const SpecialAccessAvailability = ({
       onChange={handleChange}
       value={specialAccessType}
     >
-      <label className={styles.row}>
+      <label className={cn(styles.row, { [styles.disabled]: disabled })}>
         <RadioButton
           className={styles.radio}
           value={SpecialAccessType.FOLLOW}
           disabled={disabled}
         />
-        {messages.followersOnly}
+        <span>{messages.followersOnly}</span>
       </label>
-      <label className={styles.row}>
+      <label className={cn(styles.row, { [styles.disabled]: disabled })}>
         <RadioButton
           className={styles.radio}
           value={SpecialAccessType.TIP}
           disabled={disabled}
         />
-        {messages.supportersOnly}
+        <span>{messages.supportersOnly}</span>
         <Tooltip
           className={styles.tooltip}
           text={messages.supportersInfo}

diff --git a/...us-client/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx b/...us-client/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx
@@ -20,7 +20,8 @@ import {
   RadioButtonGroup,
   IconSpecialAccess,
   IconVisibilityPublic,
-  IconCollectible
+  IconCollectible,
+  ModalFooter
 } from '@audius/stems'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
@@ -357,15 +358,15 @@ const TrackAvailabilityModal = ({
             }
           />
         </RadioButtonGroup>
-        <div className={styles.doneButtonContainer}>
-          <Button
-            type={ButtonType.PRIMARY_ALT}
-            textClassName={cn(styles.doneButton)}
-            text={messages.done}
-            onClick={onClose}
-          />
-        </div>
       </ModalContent>
+      <ModalFooter className={styles.doneButtonContainer}>
+        <Button
+          type={ButtonType.PRIMARY_ALT}
+          textClassName={cn(styles.doneButton)}
+          text={messages.done}
+          onClick={onClose}
+        />
+      </ModalFooter>
     </Modal>
   )
 }