[PAY-1763][PAY-1810] Wire up links to Purchases/Sales pages (#4042)

packages/web/src/pages/artist-dashboard-page/components/USDCCard.tsx

@@ -21,6 +21,8 @@ import BN from 'bn.js'
 
 import { Icon } from 'components/Icon'
 import { Text } from 'components/typography'
+import { useGoToRoute } from 'hooks/useGoToRoute'
+import { SALES_PAGE } from 'utils/route'
 
 import styles from './USDCCard.module.css'
 
@@ -34,6 +36,7 @@ const messages = {
 }
 
 export const USDCCard = ({ balance }: { balance: BNUSDC }) => {
+  const goToRoute = useGoToRoute()
   const { onOpen: openWithdrawUSDCModal } = useWithdrawUSDCModal()
 
   const balanceNumber = formatUSDCWeiToNumber((balance ?? new BN(0)) as BNUSDC)
@@ -43,7 +46,7 @@ export const USDCCard = ({ balance }: { balance: BNUSDC }) => {
     {
       text: messages.salesSummary,
       // TODO: link to sales page https://linear.app/audius/issue/PAY-1763/wire-up-salespurchases-pages-on-artist-dashboard
-      onClick: () => {}
+      onClick: () => goToRoute(SALES_PAGE)
     },
     {
       text: messages.withdrawalHistory,
@@ -95,7 +98,7 @@ export const USDCCard = ({ balance }: { balance: BNUSDC }) => {
             variant={HarmonyButtonType.SECONDARY}
             text={messages.withdraw}
             fullWidth
-            iconLeft={() => <Icon icon={IconWithdraw} size='medium' />}
+            iconLeft={IconWithdraw}
             onClick={() =>
               openWithdrawUSDCModal({
                 page: WithdrawUSDCModalPages.ENTER_TRANSFER_DETAILS

packages/web/src/pages/artist-dashboard-page/store/sagas.ts

@@ -11,6 +11,7 @@ import {
 } from '@audius/common'
 import { each } from 'lodash'
 import moment from 'moment'
+import { EventChannel } from 'redux-saga'
 import { all, call, fork, put, take, takeEvery } from 'typed-redux-saga'
 
 import { retrieveUserTracks } from 'common/store/pages/profile/lineups/tracks/retrieveUserTracks'
@@ -167,11 +168,11 @@ function* pollForBalance() {
   const pollingFreq = remoteConfigInstance.getRemoteVar(
     IntKeys.DASHBOARD_WALLET_BALANCE_POLLING_FREQ_MS
   )
-  const chan = yield* call(doEvery, pollingFreq || 1000, function* () {
+  const chan = (yield* call(doEvery, pollingFreq || 1000, function* () {
     yield* put(getBalance())
-  })
+  })) as unknown as EventChannel<any>
   yield* take(dashboardActions.reset.type)
-  ;(yield* chan).close()
+  chan.close()
 }
 
 function* watchFetchDashboardTracks() {

packages/web/src/pages/purchases-and-sales/PurchasesPage.tsx

@@ -100,7 +100,9 @@ const RenderPurchasesPage = () => {
     { userId, sortMethod, sortDirection },
     { disabled: !userId, pageSize: TRANSACTIONS_BATCH_SIZE }
   )
-  const { status: countStatus, data: count } = useGetPurchasesCount({ userId })
+  const { status: countStatus, data: count } = useGetPurchasesCount({
+    userId
+  })
 
   const status = combineStatuses([dataStatus, countStatus])
 

packages/web/src/pages/purchases-and-sales/PurchasesTable.tsx

@@ -172,7 +172,7 @@ export const PurchasesTable = ({
       onSort={onSort}
       fetchMore={fetchMore}
       isVirtualized={isVirtualized}
-      totalRowCount={totalRowCount}
+      totalRowCount={totalRowCount ?? 0}
       scrollRef={scrollRef}
       fetchBatchSize={fetchBatchSize}
     />

packages/web/src/pages/purchases-and-sales/SalesTable.tsx

@@ -169,7 +169,7 @@ export const SalesTable = ({
       onSort={onSort}
       fetchMore={fetchMore}
       isVirtualized={isVirtualized}
-      totalRowCount={totalRowCount}
+      totalRowCount={totalRowCount ?? 0}
       scrollRef={scrollRef}
       fetchBatchSize={fetchBatchSize}
     />

packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx

@@ -28,7 +28,8 @@ import {
   IconMessage,
   SegmentedControl,
   IconDesktop,
-  IconRobot
+  IconRobot,
+  IconCart
 } from '@audius/stems'
 import cn from 'classnames'
 import { Link } from 'react-router-dom'
@@ -46,7 +47,7 @@ import DownloadApp from 'services/download-app/DownloadApp'
 import { isMobile, isElectron, getOS } from 'utils/clientUtil'
 import { COPYRIGHT_TEXT } from 'utils/copyright'
 import { useSelector } from 'utils/reducer'
-import { PRIVACY_POLICY, TERMS_OF_SERVICE } from 'utils/route'
+import { PRIVACY_POLICY, PURCHASES_PAGE, TERMS_OF_SERVICE } from 'utils/route'
 
 import packageInfo from '../../../../../package.json'
 
@@ -90,6 +91,7 @@ const messages = {
   changePasswordCardTitle: 'Change Password',
   verificationCardTitle: 'Verification',
   desktopAppCardTitle: 'Download the Desktop App',
+  purchasesCardTitle: 'Your Purchases',
 
   aiGeneratedCardDescription:
     'Opt in to allow AI models to be trained on your likeness, and to let users credit you in their AI generated works.',
@@ -105,14 +107,16 @@ const messages = {
     'Verify your Audius profile by linking a verified account from Twitter, Instagram, or TikTok.',
   desktopAppCardDescription:
     'For the best experience, we reccomend downloading the Audius Desktop App.',
+  purchasesCardDescription: 'Review your purchased content',
 
   aiGeneratedEnabled: 'Enabled',
   aiGeneratedButtonText: 'AI Generated Music Settings',
   inboxSettingsButtonText: 'Inbox Settings',
   notificationsButtonText: 'Configure Notifications',
   accountRecoveryButtonText: 'Resend Email',
   changePasswordButtonText: 'Change Password',
-  desktopAppButtonText: 'Get The App'
+  desktopAppButtonText: 'Get The App',
+  purchasesButtonText: 'View Purchase History'
 }
 
 export type SettingsPageProps = {
@@ -254,6 +258,11 @@ export const SettingsPage = (props: SettingsPageProps) => {
     setIsAIAttributionSettingsModalVisible(true)
   }, [setIsAIAttributionSettingsModalVisible])
 
+  const handleViewPurchasesClicked = useCallback(
+    () => goToRoute(PURCHASES_PAGE),
+    [goToRoute]
+  )
+
   const appearanceOptions = useMemo(() => {
     const options = [
       {
@@ -276,6 +285,7 @@ export const SettingsPage = (props: SettingsPageProps) => {
   }, [showMatrix])
 
   const { isEnabled: isChatEnabled } = useFlag(FeatureFlags.CHAT_ENABLED)
+  const { isEnabled: isUSDCEnabled } = useFlag(FeatureFlags.USDC_PURCHASES)
   const allowAiAttribution = useSelector(getAllowAiAttribution)
   const { isEnabled: isAiAttributionEnabled } = useFlag(
     FeatureFlags.AI_ATTRIBUTION
@@ -287,9 +297,12 @@ export const SettingsPage = (props: SettingsPageProps) => {
   const isDownloadDesktopEnabled = !isMobile() && !isElectron()
 
   const hasOddCardCount = Boolean(
-    [isChatEnabled, isAiAttributionEnabled, areDeveloperAppsEnabled].filter(
-      removeNullable
-    ).length % 2
+    [
+      isChatEnabled,
+      isUSDCEnabled,
+      isAiAttributionEnabled,
+      areDeveloperAppsEnabled
+    ].filter(removeNullable).length % 2
   )
 
   const header = <Header primary={messages.pageTitle} />
@@ -346,6 +359,21 @@ export const SettingsPage = (props: SettingsPageProps) => {
             text={messages.notificationsButtonText}
           />
         </SettingsCard>
+        {isUSDCEnabled ? (
+          <SettingsCard
+            icon={<IconCart />}
+            title={messages.purchasesCardTitle}
+            description={messages.purchasesCardDescription}
+          >
+            <Button
+              onClick={handleViewPurchasesClicked}
+              className={styles.cardButton}
+              textClassName={styles.settingButtonText}
+              type={ButtonType.COMMON_ALT}
+              text={messages.purchasesButtonText}
+            />
+          </SettingsCard>
+        ) : null}
         <SettingsCard
           icon={<IconMail />}
           title={messages.accountRecoveryCardTitle}