[PAY-1074][PAY-1075][PAY-1076][PAY-1080] - Update availability settin…

…gs states + more QA fixes (#3059) Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · Mar 20, 2023 · 40f5627 · 40f5627
1 parent 5be60ac
commit 40f5627
Show file tree

Hide file tree

Showing 22 changed files with 183 additions and 90 deletions.
diff --git a/packages/mobile/src/components/core/RadioButton.tsx b/packages/mobile/src/components/core/RadioButton.tsx
@@ -49,6 +49,12 @@ const useStyles = makeStyles(({ palette }) => ({
     width: spacing(3.5),
     borderRadius: spacing(3.5),
     backgroundColor: palette.white
+  },
+  innerActiveAndDisabled: {
+    height: spacing(3.5),
+    width: spacing(3.5),
+    borderRadius: spacing(3.5),
+    backgroundColor: palette.neutralLight7
   }
 }))
 
@@ -75,7 +81,9 @@ export const RadioButton = (props: RadioButtonProps) => {
     >
       <View
         style={
-          checked
+          checked && disabled
+            ? styles.innerActiveAndDisabled
+            : checked
             ? styles.innerActive
             : disabled
             ? styles.innerDisabled

diff --git a/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx b/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx
@@ -195,12 +195,12 @@ export const DetailsTileNoAccess = ({
     if (followee) {
       dispatch(followUser(followee.user_id, followSource, trackId))
     }
-  }, [followee, dispatch, followSource])
+  }, [followee, dispatch, followSource, trackId])
 
   const handleSendTip = useCallback(() => {
     dispatch(beginTip({ user: tippedUser, source, trackId }))
     navigation.navigate('TipArtist')
-  }, [tippedUser, navigation, dispatch, source])
+  }, [tippedUser, navigation, dispatch, source, trackId])
 
   const renderLockedDescription = useCallback(() => {
     if (nftCollection) {

diff --git a/packages/mobile/src/components/locked-content-drawer/LockedContentDrawer.tsx b/packages/mobile/src/components/locked-content-drawer/LockedContentDrawer.tsx
@@ -76,6 +76,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     letterSpacing: spacing(0.5)
   },
   trackName: {
+    width: screenWidth - spacing(36),
     marginBottom: spacing(2),
     fontFamily: typography.fontByWeight.bold,
     fontSize: typography.fontSize.medium,
@@ -125,7 +126,9 @@ const TrackDetails = ({ track, owner }: TrackDetailsProps) => {
               : messages.specialAccess}
           </Text>
         </View>
-        <Text style={styles.trackName}>{track.title}</Text>
+        <Text style={styles.trackName} numberOfLines={1}>
+          {track.title}
+        </Text>
         <View style={styles.trackOwnerContainer}>
           <Text style={styles.trackOwner}>{owner.name}</Text>
           <UserBadges badgeSize={16} user={owner} hideName />

diff --git a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx b/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx
@@ -29,6 +29,7 @@ import IconKebabHorizontal from 'app/assets/images/iconKebabHorizontal.svg'
 import IconShare from 'app/assets/images/iconShare.svg'
 import { useAirplay } from 'app/components/audio/Airplay'
 import { IconButton } from 'app/components/core'
+import { useIsGatedContentEnabled } from 'app/hooks/useIsGatedContentEnabled'
 import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
@@ -83,6 +84,7 @@ type ActionsBarProps = {
 }
 
 export const ActionsBar = ({ track }: ActionsBarProps) => {
+  const isGatedContentEnabled = useIsGatedContentEnabled()
   const styles = useStyles()
   const { toast } = useToast()
   const castMethod = useSelector(getCastMethod)
@@ -147,7 +149,9 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
       const isLongFormContent =
         track.genre === Genre.PODCASTS || track.genre === Genre.AUDIOBOOKS
       const overflowActions = [
-        OverflowAction.ADD_TO_PLAYLIST,
+        !isGatedContentEnabled || !track.is_premium
+          ? OverflowAction.ADD_TO_PLAYLIST
+          : null,
         isNewPodcastControlsEnabled && isLongFormContent
           ? OverflowAction.VIEW_EPISODE_PAGE
           : OverflowAction.VIEW_TRACK_PAGE,
@@ -169,6 +173,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
     }
   }, [
     track,
+    isGatedContentEnabled,
     isNewPodcastControlsEnabled,
     playbackPositionInfo?.status,
     dispatch

diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx
@@ -23,6 +23,7 @@ import IconKebabHorizontal from 'app/assets/images/iconKebabHorizontal.svg'
 import IconRemoveTrack from 'app/assets/images/iconRemoveTrack.svg'
 import { IconButton } from 'app/components/core'
 import UserBadges from 'app/components/user-badges'
+import { useIsGatedContentEnabled } from 'app/hooks/useIsGatedContentEnabled'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { font, makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
@@ -161,6 +162,7 @@ type TrackListItemComponentProps = TrackListItemProps & {
 }
 
 const TrackListItemComponent = (props: TrackListItemComponentProps) => {
+  const isGatedContentEnabled = useIsGatedContentEnabled()
   const {
     drag,
     hideArt,
@@ -179,8 +181,14 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     user
   } = props
 
-  const { has_current_user_saved, is_delete, is_unlisted, title, track_id } =
-    track
+  const {
+    has_current_user_saved,
+    is_delete,
+    is_unlisted,
+    title,
+    track_id,
+    is_premium: isPremium
+  } = track
   const { is_deactivated, name } = user
 
   const isDeleted = is_delete || !!is_deactivated || is_unlisted
@@ -234,7 +242,9 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
 
   const handleOpenOverflowMenu = useCallback(() => {
     const overflowActions = [
-      OverflowAction.ADD_TO_PLAYLIST,
+      !isGatedContentEnabled || !isPremium
+        ? OverflowAction.ADD_TO_PLAYLIST
+        : null,
       isNewPodcastControlsEnabled && isLongFormContent
         ? OverflowAction.VIEW_EPISODE_PAGE
         : OverflowAction.VIEW_TRACK_PAGE,
@@ -258,6 +268,8 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     isNewPodcastControlsEnabled,
     isLongFormContent,
     playbackPositionInfo?.status,
+    isGatedContentEnabled,
+    isPremium,
     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
@@ -17,6 +17,8 @@ import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailability
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
 
+import type { TrackAvailabilitySelectionProps } from './types'
+
 const messages = {
   collectibleGated: 'Collectible Gated',
   collectibleGatedSubtitle:
@@ -135,16 +137,11 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
   }
 }))
 
-type TrackAvailabilitySelectionProps = {
-  selected: boolean
-  disabled?: boolean
-  disabledContent?: boolean
-}
-
 export const CollectibleGatedAvailability = ({
   selected,
   disabled = false,
-  disabledContent = false
+  disabledContent = false,
+  initialPremiumConditions
 }: TrackAvailabilitySelectionProps) => {
   const navigation = useNavigation()
   const styles = useStyles()
@@ -177,20 +174,13 @@ export const CollectibleGatedAvailability = ({
   const { set: setTrackAvailabilityFields } = useSetTrackAvailabilityFields()
   const [{ value: premiumConditions }] =
     useField<Nullable<PremiumConditions>>('premium_conditions')
-  const nftCollection = premiumConditions?.nft_collection
-
-  const [selectedNFTCollection, setSelectedNFTCollection] =
-    useState(nftCollection)
-  useEffect(() => {
-    if (nftCollection) {
-      setSelectedNFTCollection(nftCollection)
-    }
-  }, [nftCollection])
+  const [selectedNFTCollection, setSelectedNFTCollection] = useState(
+    initialPremiumConditions?.nft_collection
+  )
 
-  // If collectible gated was not previously selected,
-  // set as collectible gated and reset other fields.
+  // Update nft collection gate when availability selection changes
   useEffect(() => {
-    if (!('nft_collection' in (premiumConditions ?? {})) && selected) {
+    if (selected) {
       setTrackAvailabilityFields(
         {
           is_premium: true,
@@ -200,12 +190,14 @@ export const CollectibleGatedAvailability = ({
         true
       )
     }
-  }, [
-    premiumConditions,
-    selected,
-    setTrackAvailabilityFields,
-    selectedNFTCollection
-  ])
+  }, [selected, selectedNFTCollection, setTrackAvailabilityFields])
+
+  // Update nft collection gate when nft collection selection changes
+  useEffect(() => {
+    if (premiumConditions?.nft_collection) {
+      setSelectedNFTCollection(premiumConditions.nft_collection)
+    }
+  }, [premiumConditions])
 
   const handlePickACollection = useCallback(() => {
     navigation.navigate('NFTCollections')
@@ -264,17 +256,19 @@ export const CollectibleGatedAvailability = ({
             </Text>
             <IconCaretRight fill={neutralLight4} width={16} height={16} />
           </View>
-          {nftCollection && (
+          {premiumConditions?.nft_collection && (
             <View>
               <Text style={styles.ownersOf}>{messages.ownersOf}</Text>
               <View style={styles.collection}>
-                {nftCollection.imageUrl && (
+                {premiumConditions.nft_collection.imageUrl && (
                   <Image
-                    source={{ uri: nftCollection.imageUrl }}
+                    source={{ uri: premiumConditions.nft_collection.imageUrl }}
                     style={styles.logo}
                   />
                 )}
-                <Text style={styles.collectionName}>{nftCollection.name}</Text>
+                <Text style={styles.collectionName}>
+                  {premiumConditions.nft_collection.name}
+                </Text>
               </View>
             </View>
           )}

diff --git a/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx
@@ -11,6 +11,8 @@ import { useColor } from 'app/utils/theme'
 
 import { SwitchField } from '../fields'
 
+import type { TrackAvailabilitySelectionProps } from './types'
+
 const messages = {
   hidden: 'Hidden',
   hiddenSubtitle:
@@ -69,11 +71,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   }
 }))
 
-type TrackAvailabilitySelectionProps = {
-  selected: boolean
-  disabled?: boolean
-}
-
 export const HiddenAvailability = ({
   selected,
   disabled = false

diff --git a/packages/mobile/src/screens/edit-track-screen/components/PublicAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/PublicAvailability.tsx
@@ -8,6 +8,8 @@ import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailability
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
 
+import type { TrackAvailabilitySelectionProps } from './types'
+
 const messages = {
   public: 'Public (Default)',
   publicSubtitle:
@@ -46,11 +48,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   }
 }))
 
-type TrackAvailabilitySelectionProps = {
-  selected: boolean
-  disabled?: boolean
-}
-
 export const PublicAvailability = ({
   selected,
   disabled = false