Fix mobile premium track remix visibility (#6843)

Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · Dec 4, 2023 · a9b35ad · a9b35ad
1 parent 942fcb8
commit a9b35ad
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/packages/mobile/src/screens/edit-track-screen/screens/RemixSettingsScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/RemixSettingsScreen.tsx
@@ -123,13 +123,15 @@ export const RemixSettingsScreen = () => {
   useEffect(() => {
     if (isPremium) {
       setRemixOf(null)
+    }
+    if (isPremium && !isUsdcGated) {
       setRemixesVisible(false)
     } else {
       setRemixesVisible(true)
     }
     // adding the useField setters cause infinite rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPremium])
+  }, [isPremium, isUsdcGated])
 
   const handleFetchParentTrack = useMemo(
     () =>
@@ -288,7 +290,7 @@ export const RemixSettingsScreen = () => {
             <Switch
               value={!remixesVisible}
               onValueChange={(value) => setRemixesVisible(!value)}
-              isDisabled={isPremium}
+              isDisabled={isPremium && !isUsdcGated}
             />
           </View>
           <Text {...descriptionProps}>{messages.hideRemixesDescription}</Text>

diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
@@ -127,6 +127,9 @@ const RemixSettingsModal = ({
 
   const [url, setUrl] = useState<string | null>(null)
 
+  const isUSDCPurchaseGated = isPremiumContentUSDCPurchaseGated(premiumConditions)
+  const isHideRemixesDisabled = isPremium && !isUSDCPurchaseGated
+
   useEffect(() => {
     if (url === null && track && isOpen) {
       setUrl(fullTrackPage(track.permalink))
@@ -189,13 +192,12 @@ const RemixSettingsModal = ({
         {isPremium ? (
           <HelpCallout
             className={styles.disableInfo}
-            content={`${messages.changeAvailabilityPrefix} ${
-              isPremiumContentUSDCPurchaseGated(premiumConditions)
-                ? messages.premium
-                : isPremiumContentCollectibleGated(premiumConditions)
+            content={`${messages.changeAvailabilityPrefix} ${isUSDCPurchaseGated
+              ? messages.premium
+              : isPremiumContentCollectibleGated(premiumConditions)
                 ? messages.collectibleGated
                 : messages.specialAccess
-            }${messages.changeAvailabilitySuffix}`}
+              }${messages.changeAvailabilitySuffix}`}
           />
         ) : null}
         <div className={styles.toggleRow}>
@@ -244,19 +246,19 @@ const RemixSettingsModal = ({
         <div className={styles.divider} />
 
         <div className={styles.toggleRow}>
-          <span className={cn({ [styles.remixDisabled]: isPremium })}>
+          <span className={cn({ [styles.remixDisabled]: isHideRemixesDisabled })}>
             {messages.hideOtherRemixes}
           </span>
           <Switch
-            isOn={!!hideRemixes || isPremium}
+            isOn={!!hideRemixes || isHideRemixesDisabled}
             handleToggle={() => onToggleHideRemixes?.()}
-            isDisabled={isPremium}
+            isDisabled={isHideRemixesDisabled}
             allowCheckedWhileDisabled
           />
         </div>
         <div
           className={cn(styles.subtext, {
-            [styles.remixDisabled]: isPremium
+            [styles.remixDisabled]: isHideRemixesDisabled
           })}
         >
           {messages.preventOtherRemixes}