[C-4077] Migrate HelpCallout to Hint

packages/harmony/src/components/hint/Hint.tsx

@@ -4,17 +4,18 @@ import type { IconComponent } from 'components/icon'
 import { Flex } from 'components/layout'
 import { Paper, PaperProps } from 'components/layout/Paper'
 import { Text } from 'components/text'
+import { IconQuestionCircle } from 'icons'
 
 type HintProps = {
-  icon: IconComponent
+  icon?: IconComponent
   actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
-  const { icon: Icon, children, actions, ...other } = props
+  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
   return (
     <Paper
       role='alert'

packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx

@@ -3,13 +3,11 @@ import React from 'react'
 import { useLeavingAudiusModal } from '@audius/common/store'
 import { View } from 'react-native'
 
-import { IconExternalLink, IconInfo } from '@audius/harmony-native'
+import { Hint, IconExternalLink, IconInfo } from '@audius/harmony-native'
 import { Button, Text, useLink } from 'app/components/core'
 import Drawer from 'app/components/drawer/Drawer'
 import { makeStyles } from 'app/styles'
 
-import { HelpCallout } from '../help-callout/HelpCallout'
-
 const messages = {
   title: 'Are You Sure?',
   content: 'This link is taking you to the following website',
@@ -40,11 +38,7 @@ export const LeavingAudiusDrawer = () => {
     >
       <View style={styles.root}>
         <Text>{messages.content}</Text>
-        <HelpCallout
-          numberOfLines={10}
-          content={link}
-          icon={IconExternalLink}
-        />
+        <Hint icon={IconExternalLink}>{link}</Hint>
         <Button title={messages.visit} onPress={onLinkPress} fullWidth />
         <Button
           variant='common'

packages/mobile/src/components/wait-for-download-drawer/WaitForDownloadDrawer.tsx

@@ -102,19 +102,19 @@ export const WaitForDownloadDrawer = () => {
         </Flex>
         <Flex ph='l'>
           {downloadError ? (
-            <Hint icon={IconError}>
-              <Flex direction='column' gap='m'>
-                <Text variant='body' color='default'>
-                  {messages.somethingWrong}
-                </Text>
+            <Hint
+              icon={IconError}
+              actions={
                 <TextLink
                   variant='visible'
                   textVariant='body'
                   onPress={performDownload}
                 >
                   {messages.tryAgain}
                 </TextLink>
-              </Flex>
+              }
+            >
+              {messages.somethingWrong}
             </Hint>
           ) : (
             <LoadingSpinner

packages/mobile/src/harmony-native/components/Hint/Hint.tsx

@@ -1,32 +1,40 @@
-import type { IconComponent } from 'app/harmony-native/icons'
+import type { ReactNode } from 'react'
 
+import { IconQuestionCircle, type IconComponent } from '../../icons'
+import { Text } from '../Text/Text'
 import type { PaperProps } from '../layout'
-import { Paper } from '../layout'
+import { Flex, Paper } from '../layout'
 
 export type HintProps = {
-  icon: IconComponent
+  icon?: IconComponent
+  actions?: ReactNode
 } & PaperProps
 
 export const Hint = (props: HintProps) => {
-  const { icon: Icon, children, ...other } = props
+  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
   return (
     <Paper
       role='alert'
-      direction='row'
       gap='l'
       ph='l'
       pv='m'
       alignItems='flex-start'
       backgroundColor='surface2'
       shadow='flat'
       border='strong'
-      // Width 100% is necessary to allow for text wrapping inside
-      // the flex container that wraps children
-      style={{ width: '100%' }}
       {...other}
     >
-      <Icon size='l' color='default' />
-      {children}
+      <Flex gap='l' alignItems='center' direction='row'>
+        <Icon size='l' color='default' />
+        <Text variant='body' shrink>
+          {children}
+        </Text>
+      </Flex>
+      {actions ? (
+        <Flex pl='unit10' gap='l'>
+          {actions}
+        </Flex>
+      ) : null}
     </Paper>
   )
 }

packages/mobile/src/harmony-native/components/Text/Text.tsx

@@ -12,6 +12,8 @@ export type TextProps = NativeTextProps &
   Omit<BaseTextProps, 'textAlign'> & {
     textAlign?: TextStyle['textAlign']
     textTransform?: TextStyle['textTransform']
+    // Needed for proper text wrapping
+    shrink?: boolean
   }
 
 export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
@@ -24,6 +26,7 @@ export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
     textAlign,
     textTransform,
     shadow,
+    shrink,
     ...other
   } = props
   const theme = useTheme()
@@ -52,7 +55,8 @@ export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
     // Fixes demiBold text misalignment on iOS
     ...(fontWeight === 'demiBold' && Platform.OS === 'ios'
       ? { marginTop: 2 }
-      : {})
+      : {}),
+    ...(shrink ? { flexShrink: 1 } : {})
   })
 
   const isHeading = variant === 'display' || variant === 'heading'

packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx

@@ -9,12 +9,12 @@ import { View, Image, Dimensions } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
 import {
+  Hint,
   IconCaretRight,
   IconCollectible,
   IconExternalLink
 } from '@audius/harmony-native'
 import { Text, useLink } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
 import { flexRowCentered, makeStyles } from 'app/styles'
@@ -115,9 +115,6 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
     width: spacing(5),
     height: spacing(5)
   },
-  noCollectibles: {
-    marginTop: spacing(4)
-  },
   noCollectiblesText: {
     flex: 1,
     flexWrap: 'wrap'
@@ -194,10 +191,6 @@ export const CollectibleGatedAvailability = ({
     navigation.navigate('NFTCollections')
   }, [navigation])
 
-  const renderHelpCalloutContent = useCallback(() => {
-    return hasNoCollectibles ? messages.noCollectibles : null
-  }, [hasNoCollectibles])
-
   return (
     <View style={styles.root}>
       <View style={styles.titleContainer}>
@@ -213,12 +206,7 @@ export const CollectibleGatedAvailability = ({
           </Text>
         </View>
       ) : null}
-      {hasNoCollectibles ? (
-        <HelpCallout
-          style={styles.noCollectibles}
-          content={renderHelpCalloutContent()}
-        />
-      ) : null}
+      {hasNoCollectibles ? <Hint mt='l'>{messages.noCollectibles}</Hint> : null}
       <TouchableOpacity style={styles.learnMore} onPress={onLearnMorePress}>
         <Text weight='bold' color='neutralLight4' fontSize='large'>
           {messages.learnMore}

packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx

@@ -3,9 +3,8 @@ import { useEffect } from 'react'
 import { useField } from 'formik'
 import { Dimensions, View } from 'react-native'
 
-import { IconVisibilityHidden } from '@audius/harmony-native'
+import { Hint, IconVisibilityHidden } from '@audius/harmony-native'
 import { Text } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
@@ -72,9 +71,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   },
   switch: {
     marginTop: spacing(2)
-  },
-  noHidden: {
-    marginTop: spacing(4)
   }
 }))
 
@@ -128,7 +124,7 @@ export const HiddenAvailability = ({
         </Text>
       </View>
       {isUnlisted && isScheduledRelease ? (
-        <HelpCallout style={styles.noHidden} content={messages.noHiddenHint} />
+        <Hint mt='l'>{messages.noHiddenHint}</Hint>
       ) : null}
       {selected ? (
         <>

packages/mobile/src/screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx

@@ -1,16 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
-import { useFeatureFlag } from '@audius/common/hooks'
-import { Name, isContentUSDCPurchaseGated } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
+import { isContentUSDCPurchaseGated } from '@audius/common/models'
 import { useField } from 'formik'
 import { Dimensions, View } from 'react-native'
 
-import { Flex, IconCart } from '@audius/harmony-native'
-import { Link, Tag, Text } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
+import { IconCart } from '@audius/harmony-native'
+import { Text } from 'app/components/core'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
-import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
 
@@ -19,8 +15,6 @@ import type { TrackAvailabilitySelectionProps } from '../../../components/types'
 import { TRACK_PREVIEW, TrackPreviewField } from './TrackPreviewField'
 import { TrackPriceField } from './TrackPriceField'
 
-const WAITLIST_TYPEFORM = 'https://link.audius.co/waitlist'
-
 type PremiumRadioFieldProps = TrackAvailabilitySelectionProps
 
 const screenWidth = Dimensions.get('screen').width
@@ -76,17 +70,10 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 }))
 
 export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
-  const { isEnabled: isUsdcUploadEnabled } = useFeatureFlag(
-    FeatureFlags.USDC_PURCHASES_UPLOAD
-  )
   const { selected, disabled, previousStreamConditions } = props
   const { set: setTrackAvailabilityFields } = useSetTrackAvailabilityFields()
   const styles = useStyles()
 
-  const handlePressWaitListLink = useCallback(() => {
-    track(make({ eventName: Name.TRACK_UPLOAD_CLICK_USDC_WAITLIST_LINK }))
-  }, [])
-
   const secondary = useColor('secondary')
   const neutral = useColor('neutral')
   const neutralLight4 = useColor('neutralLight4')
@@ -130,17 +117,6 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
     setTrackAvailabilityFields
   ])
 
-  const renderHelpCalloutContent = useCallback(() => {
-    return (
-      <Flex gap='l' alignItems='flex-start'>
-        <Text style={{ flex: 1 }}>{messages.waitlist}</Text>
-        <Link url={WAITLIST_TYPEFORM} onPress={handlePressWaitListLink}>
-          <Text style={styles.link}>{messages.join}</Text>
-        </Link>
-      </Flex>
-    )
-  }, [handlePressWaitListLink, styles.link])
-
   return (
     <View style={styles.root}>
       <View style={styles.titleContainer}>
@@ -156,12 +132,6 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
           </Text>
         </View>
       ) : null}
-      {!isUsdcUploadEnabled ? (
-        <>
-          <Tag style={styles.comingSoon}>{messages.comingSoon}</Tag>
-          <HelpCallout content={renderHelpCalloutContent()} />
-        </>
-      ) : null}
       {selected ? (
         <View style={styles.fields}>
           <TrackPriceField />