From 971e3b42ceee6f93cbbf8808a0cd63fe5a57def4 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Fri, 9 Feb 2024 18:05:49 -0500 Subject: [PATCH 1/3] [PAY-2482] Purchase details modal downloadable content UI --- packages/common/src/api/purchases.ts | 6 ++- .../common/src/models/USDCTransactions.ts | 2 + .../cache/tracks/utils/retrieveTracks.ts | 8 ++-- .../components/TransactionSummary.tsx | 41 ++++++++++++++++--- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/common/src/api/purchases.ts b/packages/common/src/api/purchases.ts index c8c70a082a4..5cc60b360fc 100644 --- a/packages/common/src/api/purchases.ts +++ b/packages/common/src/api/purchases.ts @@ -1,7 +1,7 @@ import type { full } from '@audius/sdk' import { createApi } from '~/audius-query' -import { ID } from '~/models' +import { ID, PurchaseAccess } from '~/models' import { USDCContentPurchaseType, USDCPurchaseDetails @@ -28,6 +28,7 @@ const parsePurchase = (purchase: full.Purchase): USDCPurchaseDetails => { amount, buyerUserId, sellerUserId, + access, ...rest } = purchase return { @@ -37,7 +38,8 @@ const parsePurchase = (purchase: full.Purchase): USDCPurchaseDetails => { amount: amount as StringUSDC, extraAmount: extraAmount as StringUSDC, buyerUserId: HashId.parse(buyerUserId), - sellerUserId: HashId.parse(sellerUserId) + sellerUserId: HashId.parse(sellerUserId), + access: access as PurchaseAccess } } diff --git a/packages/common/src/models/USDCTransactions.ts b/packages/common/src/models/USDCTransactions.ts index 5e982d723cf..c7811975a5a 100644 --- a/packages/common/src/models/USDCTransactions.ts +++ b/packages/common/src/models/USDCTransactions.ts @@ -1,4 +1,5 @@ import { Nullable } from '../utils/typeUtils' +import { PurchaseAccess } from './PurchaseContent' import { StringUSDC } from './Wallet' @@ -27,6 +28,7 @@ export type USDCPurchaseDetails = { contentType: USDCContentPurchaseType contentId: number createdAt: string + access: PurchaseAccess } export type USDCTransactionDetails = { diff --git a/packages/web/src/common/store/cache/tracks/utils/retrieveTracks.ts b/packages/web/src/common/store/cache/tracks/utils/retrieveTracks.ts index 110a9b29e75..b6624607bde 100644 --- a/packages/web/src/common/store/cache/tracks/utils/retrieveTracks.ts +++ b/packages/web/src/common/store/cache/tracks/utils/retrieveTracks.ts @@ -247,10 +247,10 @@ export function* retrieveTracks({ const trackId = ids[0] const track = tracks.entries[trackId] - if (canBeUnlisted && withStems) { + if (withStems) { yield* spawn(function* () { if (ids.length > 1 && track) { - console.warn('Stems endpoint only supports fetching single tracks') + console.error('Stems endpoint only supports fetching single tracks') return } yield* call(fetchAndProcessStems, trackId) @@ -260,7 +260,7 @@ export function* retrieveTracks({ if (withRemixes) { yield* spawn(function* () { if (ids.length > 1 && track) { - console.warn('Remixes endpoint only supports fetching single tracks') + console.error('Remixes endpoint only supports fetching single tracks') return } yield* call(fetchAndProcessRemixes, trackId) @@ -270,7 +270,7 @@ export function* retrieveTracks({ if (withRemixParents) { yield* spawn(function* () { if (ids.length > 1 && track) { - console.warn( + console.error( 'Remix parents endpoint only supports fetching single tracks' ) return diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx index 3b3a2bb0de4..2a47913a4e4 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx @@ -1,12 +1,21 @@ -import { USDCPurchaseDetails } from '@audius/common/models' +import { PurchaseAccess, USDCPurchaseDetails } from '@audius/common/models' import { formatUSDCWeiToUSDString } from '@audius/common/utils' +import { cacheTracksSelectors, trackPageActions } from '@audius/common/store' import BN from 'bn.js' import { SummaryTable, SummaryTableItem } from 'components/summary-table' +import { useCurrentStems } from '@audius/common/hooks' +import { shallowEqual, useDispatch, useSelector } from 'react-redux' +import { CommonState } from '@audius/common/store' +import { useEffect } from 'react' + +const { getTrack } = cacheTracksSelectors +const { fetchTrack } = trackPageActions const messages = { cost: 'Cost of Track', payExtra: 'Pay Extra', + downloadable: (count: number) => `Downloadable Files (${count})`, title: 'Transaction Summary', total: 'Total' } @@ -16,14 +25,36 @@ export const TransactionSummary = ({ }: { transaction: USDCPurchaseDetails }) => { + const dispatch = useDispatch() const amountBN = new BN(transaction.amount) - const items: SummaryTableItem[] = [ - { + const trackId = transaction.contentId + const track = useSelector( + (state: CommonState) => getTrack(state, { id: trackId }), + shallowEqual + ) + const { stemTracks } = useCurrentStems({ trackId: track!.track_id }) + const downloadableCount = + stemTracks.length + (track?.is_original_available ? 1 : 0) + + useEffect(() => { + dispatch(fetchTrack(trackId, undefined, undefined, false)) + }, [dispatch]) + + const items: SummaryTableItem[] = [] + if (transaction.access === PurchaseAccess.STREAM) { + items.push({ id: 'cost', label: messages.cost, value: `$${formatUSDCWeiToUSDString(amountBN)}` - } - ] + }) + } else if (transaction.access === PurchaseAccess.DOWNLOAD) { + items.push({ + id: 'download', + label: messages.downloadable(downloadableCount), + value: `$${formatUSDCWeiToUSDString(amountBN)}` + }) + } + const extraAmountBN = new BN(transaction.extraAmount) if (!extraAmountBN.isZero()) { items.push({ From 7b9374891a9f6dcfa53a3d5f52a85acedaaaa37b Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Fri, 9 Feb 2024 18:23:48 -0500 Subject: [PATCH 2/3] lint --- .../components/TransactionSummary.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx index 2a47913a4e4..57cdd5602c7 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx @@ -1,13 +1,17 @@ +import { useEffect } from 'react' + +import { useCurrentStems } from '@audius/common/hooks' import { PurchaseAccess, USDCPurchaseDetails } from '@audius/common/models' +import { + cacheTracksSelectors, + trackPageActions, + CommonState +} from '@audius/common/store' import { formatUSDCWeiToUSDString } from '@audius/common/utils' -import { cacheTracksSelectors, trackPageActions } from '@audius/common/store' import BN from 'bn.js' +import { shallowEqual, useDispatch, useSelector } from 'react-redux' import { SummaryTable, SummaryTableItem } from 'components/summary-table' -import { useCurrentStems } from '@audius/common/hooks' -import { shallowEqual, useDispatch, useSelector } from 'react-redux' -import { CommonState } from '@audius/common/store' -import { useEffect } from 'react' const { getTrack } = cacheTracksSelectors const { fetchTrack } = trackPageActions @@ -38,7 +42,7 @@ export const TransactionSummary = ({ useEffect(() => { dispatch(fetchTrack(trackId, undefined, undefined, false)) - }, [dispatch]) + }, [dispatch, trackId]) const items: SummaryTableItem[] = [] if (transaction.access === PurchaseAccess.STREAM) { From 132d408e0b0853f0bb9a7d9d054fdf4c2c4e1fa3 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Sat, 10 Feb 2024 14:58:45 -0500 Subject: [PATCH 3/3] lint --- packages/common/src/models/USDCTransactions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/src/models/USDCTransactions.ts b/packages/common/src/models/USDCTransactions.ts index c7811975a5a..e8564aecc85 100644 --- a/packages/common/src/models/USDCTransactions.ts +++ b/packages/common/src/models/USDCTransactions.ts @@ -1,6 +1,6 @@ import { Nullable } from '../utils/typeUtils' -import { PurchaseAccess } from './PurchaseContent' +import { PurchaseAccess } from './PurchaseContent' import { StringUSDC } from './Wallet' export enum USDCTransactionType {