[QA-1473] Fix duplicate purchase button in TracksTable row (#9284)

packages/web/src/components/tracks-table/TracksTable.tsx

@@ -15,11 +15,10 @@ import {
   gatedContentSelectors,
   usePremiumContentPurchaseModal
 } from '@audius/common/store'
-import { formatCount, formatPrice, formatSeconds } from '@audius/common/utils'
+import { formatCount, formatSeconds } from '@audius/common/utils'
 import {
   IconVisibilityHidden,
   IconLock,
-  Button,
   Flex,
   IconSpecialAccess,
   IconCollectible,
@@ -98,7 +97,6 @@ type TracksTableProps = {
   isReorderable?: boolean
   isAlbumPage?: boolean
   isAlbumPremium?: boolean
-  isPremiumEnabled?: boolean
   shouldShowGatedType?: boolean
   loading?: boolean
   onClickFavorite?: (track: any) => void
@@ -148,19 +146,16 @@ export const TracksTable = ({
   isPaginated = false,
   isReorderable = false,
   isAlbumPage = false,
-  isAlbumPremium = false,
   fetchBatchSize,
   fetchMoreTracks,
   fetchPage,
   fetchThreshold,
   isVirtualized = false,
-  isPremiumEnabled = false,
   shouldShowGatedType = false,
   loading = false,
   onClickFavorite,
   onClickRemove,
   onClickRepost,
-  onClickPurchase,
   onClickRow,
   onReorderTracks,
   onShowMoreToggle,
@@ -203,12 +198,12 @@ export const TracksTable = ({
           paused={!playing}
           playing={active}
           hideDefault={false}
-          isTrackPremium={isTrackPremium && isPremiumEnabled}
+          isTrackPremium={isTrackPremium}
           isLocked={isLocked}
         />
       )
     },
-    [isPremiumEnabled, playing, playingIndex, trackAccessMap]
+    [playing, playingIndex, trackAccessMap]
   )
 
   const renderTrackNameCell = useCallback(
@@ -515,43 +510,6 @@ export const TracksTable = ({
     ]
   )
 
-  const renderPurchaseButton = useCallback(
-    (cellInfo: TrackCell) => {
-      const track = cellInfo.row.original
-      const { isFetchingNFTAccess, hasStreamAccess } = trackAccessMap[
-        track.track_id
-      ] ?? { isFetchingNFTAccess: false, hasStreamAccess: true }
-      const isLocked = !isFetchingNFTAccess && !hasStreamAccess
-      const isOwner = track.owner_id === userId
-      const deleted =
-        track.is_delete || track._marked_deleted || !!track.user?.is_deactivated
-      if (!isLocked || deleted || isOwner || !isPremiumEnabled) {
-        return null
-      }
-
-      if (isContentUSDCPurchaseGated(track.stream_conditions)) {
-        // Format the price as $$ with 2 digit decimal cents
-        const formattedPrice = formatPrice(
-          track.stream_conditions.usdc_purchase.price
-        )
-        return (
-          <Button
-            size='small'
-            color='lightGreen'
-            className={isAlbumPremium ? styles.purchaseButton : undefined}
-            onClick={(e) => {
-              e.stopPropagation()
-              onClickPurchase?.(track)
-            }}
-          >
-            ${formattedPrice}
-          </Button>
-        )
-      }
-    },
-    [isAlbumPremium, isPremiumEnabled, onClickPurchase, trackAccessMap, userId]
-  )
-
   const onClickPremiumPill = useCallback(
     (trackId: number) => {
       openPremiumContentPurchaseModal(
@@ -573,17 +531,55 @@ export const TracksTable = ({
     [dispatch, setGatedModalVisibility]
   )
 
-  const renderTrackActions = useCallback(
+  const renderLockedButtonCell = useCallback(
     (cellInfo: TrackCell) => {
       const track = cellInfo.row.original
-      const { is_delete: isDelete } = track
       const { isFetchingNFTAccess, hasStreamAccess } = trackAccessMap[
         track.track_id
       ] ?? { isFetchingNFTAccess: false, hasStreamAccess: true }
       const isLocked = !isFetchingNFTAccess && !hasStreamAccess
       const isLockedPremium =
         isLocked && isContentUSDCPurchaseGated(track.stream_conditions)
       const gatedTrackStatus = gatedTrackStatusMap[track.track_id]
+      const isOwner = track.owner_id === userId
+
+      const deleted =
+        track.is_delete || track._marked_deleted || !!track.user?.is_deactivated
+
+      if (!isLocked || deleted || isOwner) {
+        return null
+      }
+      return (
+        <GatedConditionsPill
+          streamConditions={track.stream_conditions!}
+          unlocking={gatedTrackStatus === 'UNLOCKING'}
+          onClick={() => {
+            isLockedPremium
+              ? onClickPremiumPill(track.track_id)
+              : onClickGatedPill(track.track_id)
+          }}
+          buttonSize='small'
+          showIcon={false}
+        />
+      )
+    },
+    [
+      gatedTrackStatusMap,
+      onClickGatedPill,
+      onClickPremiumPill,
+      trackAccessMap,
+      userId
+    ]
+  )
+
+  const renderTrackActions = useCallback(
+    (cellInfo: TrackCell) => {
+      const track = cellInfo.row.original
+      const { is_delete: isDelete } = track
+      const { isFetchingNFTAccess, hasStreamAccess } = trackAccessMap[
+        track.track_id
+      ] ?? { isFetchingNFTAccess: false, hasStreamAccess: true }
+      const isLocked = !isFetchingNFTAccess && !hasStreamAccess
 
       if (isDelete) return null
 
@@ -597,34 +593,18 @@ export const TracksTable = ({
           mh='l'
           className={styles.trackActionsContainer}
         >
-          {isLocked ? (
-            <GatedConditionsPill
-              streamConditions={track.stream_conditions!}
-              unlocking={gatedTrackStatus === 'UNLOCKING'}
-              onClick={() => {
-                isLockedPremium
-                  ? onClickPremiumPill(track.track_id)
-                  : onClickGatedPill(track.track_id)
-              }}
-              buttonSize='small'
-              showIcon={false}
-            />
-          ) : null}
+          {isLocked ? renderLockedButtonCell(cellInfo) : null}
           {!isLocked ? renderRepostButtonCell(cellInfo) : null}
           {!isLocked ? renderFavoriteButtonCell(cellInfo) : null}
-          {renderPurchaseButton(cellInfo)}
           {renderOverflowMenuCell(cellInfo)}
         </Flex>
       )
     },
     [
       trackAccessMap,
-      gatedTrackStatusMap,
-      onClickPremiumPill,
-      onClickGatedPill,
       renderFavoriteButtonCell,
       renderOverflowMenuCell,
-      renderPurchaseButton,
+      renderLockedButtonCell,
       renderRepostButtonCell
     ]
   )

packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx

@@ -11,7 +11,6 @@ import {
   ModalSource,
   Track
 } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import {
   CollectionTrack,
   CollectionsPageType,
@@ -32,7 +31,6 @@ import { SuggestedTracks } from 'components/suggested-tracks'
 import { Tile } from 'components/tile'
 import { TracksTable, TracksTableColumn } from 'components/tracks-table'
 import { useAuthenticatedCallback } from 'hooks/useAuthenticatedCallback'
-import { useFlag } from 'hooks/useRemoteConfig'
 import { smartCollectionIcons } from 'pages/collection-page/smartCollectionIcons'
 import { computeCollectionMetadataProps } from 'pages/collection-page/store/utils'
 
@@ -132,17 +130,13 @@ const CollectionPage = ({
   onClickRow,
   onClickSave,
   onClickRepostTrack,
-  onClickPurchaseTrack,
   onSortTracks,
   onReorderTracks,
   onClickRemove,
   onClickReposts,
   onClickFavorites
 }: CollectionPageProps) => {
   const { status, metadata, user } = collection
-  const { isEnabled: isPremiumAlbumsEnabled } = useFlag(
-    FeatureFlags.PREMIUM_ALBUMS_ENABLED
-  )
 
   // TODO: Consider dynamic lineups, esp. for caching improvement.
   const [dataSource, playingIndex] =
@@ -326,7 +320,7 @@ const CollectionPage = ({
         className={styles.bodyWrapper}
         size='large'
         elevation='mid'
-        dogEar={isPremiumAlbumsEnabled ? dogEarType : undefined}
+        dogEar={dogEarType}
       >
         <div className={styles.topSectionWrapper}>{topSection}</div>
         {!collectionLoading && isEmpty ? (
@@ -352,7 +346,6 @@ const CollectionPage = ({
               onClickRemove={isOwner ? onClickRemove : undefined}
               onClickRepost={onClickRepostTrack}
               onClickPurchase={openPurchaseModal}
-              isPremiumEnabled={isPremiumAlbumsEnabled}
               onReorderTracks={onReorderTracks}
               onSortTracks={onSortTracks}
               isReorderable={

packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx

@@ -122,6 +122,7 @@ const SavedPage = ({
 }: SavedPageProps) => {
   const { mainContentRef } = useContext(MainContentContext)
   const initFetch = useSelector(getInitialFetchStatus)
+
   const emptyTracksHeader = useSelector((state: CommonState) => {
     const selectedCategory = getCategory(state, {
       currentTab: SavedPageTabs.TRACKS