@ -1,6 +1,6 @@
import classNames from 'clsx' ;
import React from 'react' ;
import { FormattedMessage } from 'react-intl' ;
import { defineMessages, FormattedMessage, useIntl } from 'react-intl' ;
import { useDispatch } from 'react-redux' ;
import { patchMe } from 'soapbox/actions/me' ;
@ -12,6 +12,11 @@ import resizeImage from 'soapbox/utils/resize-image';
import type { AxiosError } from 'axios' ;
const messages = defineMessages ( {
header : { id : 'account.header.alt' , defaultMessage : 'Profile header' } ,
error : { id : 'onboarding.error' , defaultMessage : 'An unexpected error occurred. Please try again or skip this step.' } ,
} ) ;
/** Default header filenames from various backends */
const DEFAULT_HEADERS = [
'/headers/original/missing.png' , // Mastodon
@ -24,6 +29,7 @@ const isDefaultHeader = (url: string) => {
} ;
const CoverPhotoSelectionStep = ( { onNext } : { onNext : ( ) = > void } ) = > {
const intl = useIntl ( ) ;
const dispatch = useDispatch ( ) ;
const account = useOwnAccount ( ) ;
@ -65,7 +71,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
if ( error . response ? . status === 422 ) {
dispatch ( snackbar . error ( ( error . response . data as any ) . error . replace ( 'Validation failed: ' , '' ) ) ) ;
} else {
dispatch ( snackbar . error ( 'An unexpected error occurred. Please try again or skip this step.' ) ) ;
dispatch ( snackbar . error ( messages . error ) ) ;
}
} ) ;
} ) . catch ( console . error ) ;
@ -90,7 +96,6 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
< div className = 'sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto' >
< Stack space = { 10 } >
< div className = 'border border-solid border-gray-200 dark:border-gray-800 rounded-lg' >
{ /* eslint-disable-next-line jsx-a11y/interactive-supports-focus */ }
< div
role = 'button'
className = 'relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
@ -98,7 +103,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
{ selectedFile || account ? . header && (
< StillImage
src = { selectedFile || account . header }
alt = 'Profile Header'
alt = { intl . formatMessage ( messages . header ) }
className = 'absolute inset-0 object-cover rounded-t-md'
/ >
) }
@ -138,7 +143,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
< Stack justifyContent = 'center' space = { 2 } >
< Button block theme = 'primary' type = 'button' onClick = { onNext } disabled = { isDefault && isDisabled || isSubmitting } >
{ isSubmitting ? 'Saving…' : 'Next' }
{ isSubmitting ? (
< FormattedMessage id = 'onboarding.saving' defaultMessage = 'Saving…' / >
) : (
< FormattedMessage id = 'onboarding.next' defaultMessage = 'Next' / >
) }
< / Button >
{ isDisabled && (