[C-2995] Add hint to modal radio items (#3990)

packages/web/src/components/modal-radio/ModalRadioItem.tsx

@@ -5,6 +5,7 @@ import { ResizeObserver } from '@juggle/resize-observer'
 import cn from 'classnames'
 import useMeasure from 'react-use-measure'
 
+import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 import { Text } from 'components/typography'
 
@@ -14,15 +15,24 @@ type ModalRadioItemProps = {
   label: string
   title?: ReactNode
   description?: ReactNode
+  hintText?: string
   value: any
   disabled?: boolean
   icon?: ReactNode
   checkedContent?: ReactNode
 }
 
 export const ModalRadioItem = (props: ModalRadioItemProps) => {
-  const { icon, label, title, description, value, disabled, checkedContent } =
-    props
+  const {
+    icon,
+    label,
+    hintText,
+    title,
+    description,
+    value,
+    disabled,
+    checkedContent
+  } = props
   const [isCollapsed, setIsCollapsed] = useState(true)
   const radioGroup = useContext(RadioGroupContext)
 
@@ -55,6 +65,7 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
           <span>{title ?? label}</span>
         </Text>
       </div>
+      {hintText ? <HelpCallout content={hintText} /> : null}
       {checkedContent || description ? (
         <div
           className={cn(styles.collapsibleContainer, {

packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx

@@ -586,6 +586,7 @@ export const AccessAndSaleMenuFields = (props: AccesAndSaleMenuFieldsProps) => {
             label={messages.collectibleGated}
             value={TrackAvailabilityType.COLLECTIBLE_GATED}
             disabled={noCollectibleGate}
+            hintText={noCollectibleGate ? messages.noCollectibles : undefined}
             description={
               <CollectibleGatedDescription
                 hasCollectibles={hasCollectibles}