[PAY-3408][PAY-3409][PAY-3408][PAY-3405][PAY-3413] Update Sales/Purchase Modal

packages/web/src/components/summary-table/SummaryTable.tsx

@@ -33,7 +33,7 @@ export type SummaryTableProps = {
   hideExtraItemsCopy?: string
   disableExtraItemsToggle?: boolean
   summaryItem?: SummaryTableItem
-  title: ReactNode
+  title?: ReactNode
   secondaryTitle?: ReactNode
   summaryLabelColor?: TextColors
   summaryValueColor?: TextColors
@@ -156,7 +156,10 @@ export const SummaryTable = ({
                   justifyContent='space-between'
                   pv='m'
                   ph='xl'
-                  css={{ opacity: disabled ? 0.5 : 1 }}
+                  css={{
+                    opacity: disabled ? 0.5 : 1,
+                    '&:first-child': { borderTop: '0' }
+                  }}
                   borderTop='default'
                 >
                   <Flex
@@ -196,7 +199,7 @@ export const SummaryTable = ({
         borderRadius='s'
         css={{ overflow: 'hidden' }}
       >
-        {renderHeader()}
+        {title || secondaryTitle ? renderHeader() : null}
         {collapsible ? (
           <Expandable expanded={isExpanded}>{renderContent()}</Expandable>
         ) : (

packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 
 import { USDCPurchaseDetails } from '@audius/common/models'
+import { makeSolanaTransactionLink } from '@audius/common/utils'
 import {
   ModalContent,
   ModalHeader,
@@ -9,12 +10,13 @@ import {
   Button,
   Text,
   Flex,
-  IconArrowRight
+  IconArrowRight,
+  IconExternalLink
 } from '@audius/harmony'
 import moment from 'moment'
 
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import { UserLink } from 'components/link'
+import { ExternalLink, UserLink } from 'components/link'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 
 import { ContentLink } from './ContentLink'
@@ -85,7 +87,23 @@ export const PurchaseModalContent = ({
               onClick={onClose}
             />
           </DetailSection>
-          <DetailSection label={messages.transactionDate}>
+          <DetailSection
+            label={messages.transactionDate}
+            actionButton={
+              <Button
+                iconLeft={IconExternalLink}
+                variant='secondary'
+                size='small'
+                asChild
+              >
+                <ExternalLink
+                  to={makeSolanaTransactionLink(purchaseDetails.signature)}
+                >
+                  {messages.transaction}
+                </ExternalLink>
+              </Button>
+            }
+          >
             <Text variant='body' size='l'>
               {moment(purchaseDetails.createdAt).format('MMM DD, YYYY')}
             </Text>

packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx

@@ -8,6 +8,7 @@ import {
   useInboxUnavailableModal,
   type CommonState
 } from '@audius/common/store'
+import { makeSolanaTransactionLink } from '@audius/common/utils'
 import {
   ModalContent,
   ModalHeader,
@@ -16,13 +17,14 @@ import {
   Button,
   Text,
   Flex,
-  IconMessage
+  IconMessage,
+  IconExternalLink
 } from '@audius/harmony'
 import moment from 'moment'
 import { useDispatch, useSelector } from 'react-redux'
 
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import { UserLink } from 'components/link'
+import { ExternalLink, UserLink } from 'components/link'
 
 import { ContentLink } from './ContentLink'
 import { DetailSection } from './DetailSection'
@@ -113,7 +115,23 @@ export const SaleModalContent = ({
               onClick={onClose}
             />
           </DetailSection>
-          <DetailSection label={messages.transactionDate}>
+          <DetailSection
+            label={messages.transactionDate}
+            actionButton={
+              <Button
+                iconLeft={IconExternalLink}
+                variant='secondary'
+                size='small'
+                asChild
+              >
+                <ExternalLink
+                  to={makeSolanaTransactionLink(purchaseDetails.signature)}
+                >
+                  {messages.transaction}
+                </ExternalLink>
+              </Button>
+            }
+          >
             <Text variant='body' size='l'>
               {moment(purchaseDetails.createdAt).format('MMM DD, YYYY')}
             </Text>

packages/web/src/components/usdc-purchase-details-modal/components/TransactionSummary.tsx

@@ -1,10 +1,4 @@
-import { useGetTrackById } from '@audius/common/api'
-import { useCurrentStems } from '@audius/common/hooks'
-import {
-  PurchaseAccess,
-  USDCContentPurchaseType,
-  USDCPurchaseDetails
-} from '@audius/common/models'
+import { USDCPurchaseDetails } from '@audius/common/models'
 import { USDC } from '@audius/fixed-decimal'
 import { Flex, IconInfo, Text } from '@audius/harmony'
 
@@ -15,9 +9,9 @@ import styles from './styles.module.css'
 
 const messages = {
   payExtra: 'Pay Extra',
-  downloadable: (count: number) => `Downloadable Files (${count})`,
   total: 'Total',
   subtotal: 'Subtotal',
+  paidToArtist: 'Paid to Artist',
   networkFee: 'Network Fee',
   networkFeeRate: '(10%)',
   networkFeeHelp:
@@ -33,15 +27,6 @@ export const TransactionSummary = ({
 }) => {
   const amount = BigInt(transaction.amount)
   const extraAmount = BigInt(transaction.extraAmount)
-  const { contentId, contentType } = transaction
-  const isTrack = contentType === USDCContentPurchaseType.TRACK
-  const { data: track } = useGetTrackById({ id: contentId })
-  const { stemTracks } = useCurrentStems({
-    trackId: isTrack && track ? track.track_id : 0
-  })
-  const downloadableCount =
-    stemTracks.length + (track?.is_original_available ? 1 : 0)
-
   let creatorTotal = BigInt(0)
   let networkFee = BigInt(0)
   for (const split of transaction.splits) {
@@ -55,29 +40,13 @@ export const TransactionSummary = ({
   const total = isSale ? extraAmount + creatorTotal : extraAmount + amount
 
   const items: SummaryTableItem[] = []
-  if (transaction.access === PurchaseAccess.STREAM) {
-    items.push({
-      id: 'cost',
-      label: messages.subtotal,
-      value: USDC(subtotal).toLocaleString('en-US', {
-        roundingMode: isSale ? 'floor' : 'ceil'
-      })
-    })
-  } else if (transaction.access === PurchaseAccess.DOWNLOAD) {
-    items.push({
-      id: 'download',
-      label: messages.downloadable(downloadableCount),
-      value: USDC(subtotal).toLocaleString('en-US', { roundingMode: 'floor' })
-    })
-  }
-
-  if (extraAmount !== BigInt(0)) {
-    items.push({
-      id: 'payExtra',
-      label: messages.payExtra,
-      value: USDC(extraAmount).toLocaleString()
+  items.push({
+    id: 'cost',
+    label: isSale ? messages.subtotal : messages.paidToArtist,
+    value: USDC(subtotal).toLocaleString('en-US', {
+      roundingMode: isSale ? 'floor' : 'ceil'
     })
-  }
+  })
 
   if (networkFee > 0) {
     items.push({
@@ -110,15 +79,25 @@ export const TransactionSummary = ({
     })
   }
 
+  if (extraAmount !== BigInt(0)) {
+    items.push({
+      id: 'payExtra',
+      label: messages.payExtra,
+      value: USDC(extraAmount).toLocaleString()
+    })
+  }
+
   return (
     <SummaryTable
-      collapsible={true}
-      title={messages.total}
-      secondaryTitle={
-        <Text tag='span' color='accent'>
-          {USDC(total).toLocaleString()}
-        </Text>
-      }
+      summaryItem={{
+        id: 'total',
+        label: messages.total,
+        value: (
+          <Text tag='span' color='accent'>
+            {USDC(total).toLocaleString()}
+          </Text>
+        )
+      }}
       items={items}
     />
   )