Merge remote-tracking branch 'origin/main' into pay-1631-post-purchas…

…e-page * origin/main: [PAY-1720] Implements PlainButton (#3897) Fix minor bugs for multi-track upload demo (#3854) Limit lines in Leaving Audius Modal (#3896) [C-2681, C-2682, C-2683] Add new upload finish page (#3890) [C-2914] USDC purchase options for new upload UI (web) (#3888) Minor UI fixes for leaving audius modal (#3895) Fix OAuth login page width (#3894) Fix playlist form from crashing after double save (#3893) Update seo h1 to be accessibly hidden vs visually hidden (#3892) Move setCollectionPermalink within fetchCollectionSucceeded action (#3867) [plat-1055] revert legacy playlist route formatting in embed player to use permalink (#3824) [PAY-1717] Make sign in/sign up page overlap banner (#3886) [PAY-1658] Artist pick, hidden track tile tags moved to mid-left (#3889) [C-2957] Add h1 tag for SEO (#3887) [C-2685 C-2686] Implement collection upload form (#3870) [PAY-1702] Use existing chats as default user list when sharing to DMs (#3877) [PAY-1701] Fix "Share to DMs" on mobile to go through InboxUnavailable modal (#3878) [PAY-1700] Replace navigation if coming from ChatUserListScreen (#3879) [PAY-1588] Use existing balance in purchase flow on mobile (#3885)
AudiusProject · Aug 17, 2023 · e88bc55 · e88bc55
2 parents d9d58ae + 3138da3
commit e88bc55
Show file tree

Hide file tree

Showing 91 changed files with 2,174 additions and 600 deletions.
diff --git a/packages/common/src/models/Analytics.ts b/packages/common/src/models/Analytics.ts
@@ -575,7 +575,8 @@ export enum ShareSource {
   PAGE = 'page',
   NOW_PLAYING = 'now playing',
   OVERFLOW = 'overflow',
-  LEFT_NAV = 'left-nav'
+  LEFT_NAV = 'left-nav',
+  UPLOAD = 'upload'
 }
 export enum RepostSource {
   TILE = 'tile',

diff --git a/packages/common/src/models/Track.ts b/packages/common/src/models/Track.ts
@@ -199,6 +199,7 @@ export type TrackMetadata = {
     category: StemCategory
   }
   remix_of: Nullable<RemixOf>
+  preview_start_seconds?: number
 
   // Added fields
   dateListened?: string

diff --git a/packages/common/src/models/TrackAvailabilityType.ts b/packages/common/src/models/TrackAvailabilityType.ts
@@ -1,5 +1,6 @@
 export enum TrackAvailabilityType {
   PUBLIC = 'PUBLIC',
+  USDC_PURCHASE = 'USDC_PURCHASE',
   SPECIAL_ACCESS = 'SPECIAL_ACCESS',
   COLLECTIBLE_GATED = 'COLLECTIBLE_GATED',
   HIDDEN = 'HIDDEN'

diff --git a/packages/common/src/store/pages/chat/sagas.ts b/packages/common/src/store/pages/chat/sagas.ts
@@ -373,7 +373,8 @@ function* doSetMessageReaction(action: ReturnType<typeof setMessageReaction>) {
 }
 
 function* doCreateChat(action: ReturnType<typeof createChat>) {
-  const { userIds, skipNavigation, presetMessage } = action.payload
+  const { userIds, skipNavigation, presetMessage, replaceNavigation } =
+    action.payload
   const { track, make } = yield* getContext('analytics')
   try {
     const audiusSdk = yield* getContext('audiusSdk')
@@ -387,7 +388,7 @@ function* doCreateChat(action: ReturnType<typeof createChat>) {
 
     // Optimistically go to the chat. If we fail to create it, we'll toast
     if (!skipNavigation) {
-      yield* put(goToChat({ chatId, presetMessage }))
+      yield* put(goToChat({ chatId, presetMessage, replaceNavigation }))
     }
 
     try {

diff --git a/packages/common/src/store/pages/chat/selectors.ts b/packages/common/src/store/pages/chat/selectors.ts
@@ -7,8 +7,8 @@ import { User } from 'models/User'
 import { accountSelectors } from 'store/account'
 import { cacheUsersSelectors } from 'store/cache'
 import { CommonState } from 'store/reducers'
-import { decodeHashId } from 'utils/hashIds'
-import { Maybe } from 'utils/typeUtils'
+import { decodeHashId, encodeHashId } from 'utils/hashIds'
+import { Maybe, removeNullable } from 'utils/typeUtils'
 
 import { chatMessagesAdapter, chatsAdapter } from './slice'
 import { ChatPermissionAction } from './types'
@@ -168,6 +168,30 @@ export const getSingleOtherChatUser = (
   return getOtherChatUsers(state, chatId)[0]
 }
 
+/**
+ * Gets a list of the users the current user has chats with.
+ * Note that this only takes the first user of each chat that doesn't match the current one,
+ * so this will need to be adjusted when we do group chats.
+ */
+export const getUserList = createSelector(
+  [getUserId, getChats, getHasMoreChats, getChatsStatus],
+  (currentUserId, chats, hasMore, chatsStatus) => {
+    const chatUserListIds = chats
+      .map(
+        (c) =>
+          c.chat_members
+            .filter((u) => decodeHashId(u.user_id) !== currentUserId)
+            .map((u) => decodeHashId(u.user_id))[0]
+      )
+      .filter(removeNullable)
+    return {
+      userIds: chatUserListIds,
+      hasMore,
+      loading: chatsStatus === Status.LOADING
+    }
+  }
+)
+
 export const getChatMessageByIndex = (
   state: CommonState,
   chatId: string,
@@ -228,6 +252,7 @@ export const getCanCreateChat = createSelector(
     getBlockees,
     getBlockers,
     getChatPermissions,
+    getChats,
     (state: CommonState, { userId }: { userId: Maybe<ID> }) => {
       if (!userId) return null
       const usersMap = getUsers(state, { ids: [userId] })
@@ -239,6 +264,7 @@ export const getCanCreateChat = createSelector(
     blockees,
     blockers,
     chatPermissions,
+    chats,
     user
   ): { canCreateChat: boolean; callToAction: ChatPermissionAction } => {
     if (!currentUserId) {
@@ -254,13 +280,24 @@ export const getCanCreateChat = createSelector(
       }
     }
 
+    // Check for existing chat, since unblocked users with existing chats
+    // don't need permission to continue chatting.
+    // Use a callback fn to prevent iteration until necessary to improve perf
+    // Note: this only works if the respective chat has been fetched already, like in chatsUserList
+    const encodedUserId = encodeHashId(user.user_id)
+    const hasExistingChat = () =>
+      !!chats.find((c) =>
+        c.chat_members.find((u) => u.user_id === encodedUserId)
+      )
+
     const userPermissions = chatPermissions[user.user_id]
     const isBlockee = blockees.includes(user.user_id)
     const isBlocker = blockers.includes(user.user_id)
     const canCreateChat =
       !isBlockee &&
       !isBlocker &&
-      (userPermissions?.current_user_has_permission ?? true)
+      ((userPermissions?.current_user_has_permission ?? true) ||
+        hasExistingChat())
 
     let action = ChatPermissionAction.NOT_APPLICABLE
     if (!canCreateChat) {

diff --git a/packages/common/src/store/pages/chat/slice.ts b/packages/common/src/store/pages/chat/slice.ts
@@ -132,6 +132,7 @@ const slice = createSlice({
         userIds: ID[]
         skipNavigation?: boolean
         presetMessage?: string
+        replaceNavigation?: boolean
       }>
     ) => {
       // triggers saga
@@ -159,7 +160,11 @@ const slice = createSlice({
     fetchUnreadMessagesCountFailed: (_state) => {},
     goToChat: (
       _state,
-      _action: PayloadAction<{ chatId?: string; presetMessage?: string }>
+      _action: PayloadAction<{
+        chatId?: string
+        presetMessage?: string
+        replaceNavigation?: boolean
+      }>
     ) => {
       // triggers saga
     },

diff --git a/packages/common/src/store/pages/collection/actions.ts b/packages/common/src/store/pages/collection/actions.ts
@@ -8,12 +8,6 @@ export const RESET_COLLECTION = 'RESET_COLLECTION'
 export const RESET_AND_FETCH_COLLECTION_TRACKS =
   'RESET_AND_FETCH_COLLECTION_TRACKS'
 export const SET_SMART_COLLECTION = 'SET_SMART_COLLECTION'
-export const SET_COLLECTION_PERMALINK = 'SET_COLLECTION_PERMALINK'
-
-export const setCollectionPermalink = (permalink: string) => ({
-  type: SET_COLLECTION_PERMALINK,
-  permalink
-})
 
 export const fetchCollection = (
   id: Nullable<number>,
@@ -29,11 +23,13 @@ export const fetchCollection = (
 export const fetchCollectionSucceeded = (
   collectionId: ID,
   collectionUid: string,
+  collectionPermalink: string,
   userUid: string
 ) => ({
   type: FETCH_COLLECTION_SUCCEEDED,
   collectionId,
   collectionUid,
+  collectionPermalink,
   userUid
 })
 

diff --git a/packages/common/src/store/pages/collection/reducer.ts b/packages/common/src/store/pages/collection/reducer.ts
@@ -11,8 +11,7 @@ import {
   FETCH_COLLECTION_SUCCEEDED,
   FETCH_COLLECTION_FAILED,
   RESET_COLLECTION,
-  SET_SMART_COLLECTION,
-  SET_COLLECTION_PERMALINK
+  SET_SMART_COLLECTION
 } from './actions'
 import { PREFIX as tracksPrefix } from './lineup/actions'
 
@@ -22,7 +21,8 @@ export const initialState = {
   userUid: null,
   status: null,
   smartCollectionVariant: null,
-  tracks: initialLineupState
+  tracks: initialLineupState,
+  collectionPermalink: null
 }
 
 const actionsMap = {
@@ -33,19 +33,14 @@ const actionsMap = {
       smartCollectionVariant: null
     }
   },
-  [SET_COLLECTION_PERMALINK](state, action) {
-    return {
-      ...state,
-      permalink: action.permalink
-    }
-  },
   [FETCH_COLLECTION_SUCCEEDED](state, action) {
     return {
       ...state,
       collectionId: action.collectionId,
       collectionUid: action.collectionUid,
       userUid: action.userUid,
-      status: Status.SUCCESS
+      status: Status.SUCCESS,
+      collectionPermalink: action.collectionPermalink
     }
   },
   [FETCH_COLLECTION_FAILED](state, action) {

diff --git a/packages/common/src/store/pages/collection/selectors.ts b/packages/common/src/store/pages/collection/selectors.ts
@@ -17,7 +17,7 @@ export const getCollectionStatus = (state: CommonState) =>
 export const getSmartCollectionVariant = (state: CommonState) =>
   state.pages.collection.smartCollectionVariant
 export const getCollectionPermalink = (state: CommonState) =>
-  state.pages.collection.permalink
+  state.pages.collection.collectionPermalink
 export const getCollection = (state: CommonState, params?: { id: ID }) => {
   const smartCollectionVariant = getSmartCollectionVariant(state)
   if (smartCollectionVariant) {

diff --git a/packages/common/src/store/pages/collection/types.ts b/packages/common/src/store/pages/collection/types.ts
@@ -15,7 +15,7 @@ export type CollectionTrack = LineupTrack & { dateAdded: Moment } & {
 }
 
 export type CollectionsPageState = {
-  permalink: string
+  collectionPermalink: string
   collectionId: ID | null
   collectionUid: UID | null
   status: Status | null

diff --git a/packages/common/src/store/purchase-content/utils.ts b/packages/common/src/store/purchase-content/utils.ts
@@ -1,9 +1,50 @@
+import BN from 'bn.js'
+
+import { BNUSDC } from 'models/Wallet'
+import { BN_USDC_CENT_WEI, ceilingBNUSDCToNearestCent } from 'utils/wallet'
+
 import { PurchaseContentStage } from './types'
 
+export const zeroBalance = () => new BN(0) as BNUSDC
+
 export const isContentPurchaseInProgress = (stage: PurchaseContentStage) => {
   return [
     PurchaseContentStage.BUY_USDC,
     PurchaseContentStage.PURCHASING,
     PurchaseContentStage.CONFIRMING_PURCHASE
   ].includes(stage)
 }
+
+type PurchaseSummaryValues = {
+  amountDue: number
+  existingBalance: number | undefined
+  basePrice: number
+  artistCut: number
+}
+
+export const getPurchaseSummaryValues = (
+  price: number,
+  currentBalance: BNUSDC = zeroBalance()
+): PurchaseSummaryValues => {
+  let amountDue = price
+  let existingBalance
+  const priceBN = new BN(price).mul(BN_USDC_CENT_WEI)
+
+  if (currentBalance.gte(priceBN)) {
+    amountDue = 0
+    existingBalance = price
+  }
+  // Only count the balance if it's greater than 1 cent
+  else if (currentBalance.gt(BN_USDC_CENT_WEI)) {
+    // Note: Rounding amount due *up* to nearest cent for cases where the balance
+    // is between cents so that we aren't advertising *lower* than what the user
+    // will have to pay.
+    const diff = priceBN.sub(currentBalance)
+    amountDue = ceilingBNUSDCToNearestCent(diff as BNUSDC)
+      .div(BN_USDC_CENT_WEI)
+      .toNumber()
+    existingBalance = price - amountDue
+  }
+
+  return { amountDue, existingBalance, basePrice: price, artistCut: price }
+}
diff --git a/packages/common/src/store/ui/create-chat-modal/index.ts b/packages/common/src/store/ui/create-chat-modal/index.ts
@@ -3,14 +3,16 @@ import { Action } from '@reduxjs/toolkit'
 import { createModal } from '../modals/createModal'
 
 export type CreateChatModalState = {
+  defaultUserList?: 'followers' | 'chats'
   presetMessage?: string
   onCancelAction?: Action
 }
 
 const createChatModal = createModal<CreateChatModalState>({
   reducerPath: 'createChatModal',
   initialState: {
-    isOpen: false
+    isOpen: false,
+    defaultUserList: 'followers'
   },
   sliceSelector: (state) => state.ui.modalsWithState
 })

diff --git a/packages/common/src/store/upload/selectors.ts b/packages/common/src/store/upload/selectors.ts
@@ -6,3 +6,16 @@ export const getUploadProgress = (state: CommonState) =>
 export const getUploadSuccess = (state: CommonState) => state.upload.success
 export const getTracks = (state: CommonState) => state.upload.tracks
 export const getIsUploading = (state: CommonState) => state.upload.uploading
+
+export const getUploadPercentage = (state: CommonState) => {
+  const uploadProgress = getUploadProgress(state)
+  const fullProgress = uploadProgress
+    ? uploadProgress.reduce((acc, progress) => acc + progress.loaded, 0)
+    : 0
+
+  const totalProgress = uploadProgress
+    ? uploadProgress.reduce((acc, progress) => acc + progress.total, 0)
+    : 1
+
+  return (fullProgress / totalProgress) * 100
+}
diff --git a/packages/common/src/store/upload/types.ts b/packages/common/src/store/upload/types.ts
@@ -41,7 +41,8 @@ export interface ExtendedCollectionMetadata extends CollectionMetadata {
 export enum ProgressStatus {
   UPLOADING = 'UPLOADING',
   PROCESSING = 'PROCESSING',
-  COMPLETE = 'COMPLETE'
+  COMPLETE = 'COMPLETE',
+  ERROR = 'ERROR'
 }
 
 export type Progress = {

diff --git a/packages/embed/src/components/app.jsx b/packages/embed/src/components/app.jsx
@@ -435,15 +435,9 @@ const App = (props) => {
 
     const artworkURL = getArtworkUrl(tracksResponse || collectionsResponse)
     const artworkClickURL =
-      tracksResponse?.permalink ||
-      `${collectionsResponse?.permalink}-${decodeHashId(
-        collectionsResponse?.id
-      )}`
+      tracksResponse?.permalink || collectionsResponse?.permalink
         ? stripLeadingSlash(
-            tracksResponse?.permalink ||
-              `${collectionsResponse?.permalink}-${decodeHashId(
-                collectionsResponse?.id
-              )}`
+            tracksResponse?.permalink || collectionsResponse?.permalink
           )
         : null
     const listenOnAudiusURL = artworkClickURL

diff --git a/packages/embed/src/components/collection/CollectionHelmet.jsx b/packages/embed/src/components/collection/CollectionHelmet.jsx
@@ -2,7 +2,6 @@ import { h } from 'preact'
 import { Helmet } from 'react-helmet'
 
 import { getAudiusHostname } from '../../util/getEnv'
-import { decodeHashId } from '../../util/hashIds'
 
 const CollectionHelmet = ({ collection }) => {
   if (!collection) {
@@ -12,9 +11,7 @@ const CollectionHelmet = ({ collection }) => {
   const title = `${collection.playlistName} by ${collection.user.name} • Audius`
   const description = `Listen on Audius: ${collection.playlistName}`
   const hostname = getAudiusHostname()
-  const url = `https://${hostname}${collection.permalink}-${decodeHashId(
-    collection.id
-  )}`
+  const url = `https://${hostname}${collection.permalink}`
   const isAlbum = collection.isAlbum
   const type = isAlbum ? 'MusicAlbum' : 'MusicPlaylist'
   const structuredData = {

diff --git a/packages/embed/src/components/collection/CollectionPlayerCard.jsx b/packages/embed/src/components/collection/CollectionPlayerCard.jsx
@@ -6,7 +6,6 @@ import 'simplebar/dist/simplebar.min.css'
 import IconVerified from '../../assets/img/iconVerified.svg'
 import { isBItem } from '../../util/bitems'
 import { getArtworkUrl } from '../../util/getArtworkUrl'
-import { decodeHashId } from '../../util/hashIds'
 import { stripLeadingSlash } from '../../util/stringUtil'
 import Artwork from '../artwork/Artwork'
 import AudiusLogoButton from '../button/AudiusLogoButton'
@@ -93,9 +92,7 @@ const CollectionPlayerCard = ({
   isTwitter
 }) => {
   const makeOnTogglePlay = (index) => () => onTogglePlay(index)
-  const permalink = `${stripLeadingSlash(collection.permalink)}-${decodeHashId(
-    collection?.id
-  )}`
+  const permalink = `${stripLeadingSlash(collection.permalink)}`
   return (
     <Card
       isTwitter={isTwitter}