Desktop, Mobile: Display a message when Joplin Cloud user don't have access to email to note feature (#10322)

packages/app-desktop/gui/JoplinCloudConfigScreen.scss

@@ -1,3 +1,12 @@
 .inbox-email-value {
 	font-weight: bold;
+}
+
+.alert-warn {
+	background-color: var(--joplin-background-color);
+	width: fit-content;
+
+	p {
+		padding: calc(var(--joplin-font-size) * 0.8);
+	}
 }

packages/app-desktop/gui/JoplinCloudConfigScreen.tsx

@@ -3,9 +3,11 @@ import { AppState } from '../app.reducer';
 import { _ } from '@joplin/lib/locale';
 import { clipboard } from 'electron';
 import Button from './Button/Button';
+import { Fragment } from 'react';
 
 type JoplinCloudConfigScreenProps = {
 	inboxEmail: string;
+	joplinCloudAccountType: number;
 };
 
 const JoplinCloudConfigScreen = (props: JoplinCloudConfigScreenProps) => {
@@ -13,12 +15,21 @@ const JoplinCloudConfigScreen = (props: JoplinCloudConfigScreenProps) => {
 		clipboard.writeText(props.inboxEmail);
 	};
 
+	const isEmailToNoteAvailableInAccount = props.joplinCloudAccountType !== 1;
+
 	return (
 		<div>
 			<h2>{_('Email to note')}</h2>
 			<p>{_('Any email sent to this address will be converted into a note and added to your collection. The note will be saved into the Inbox notebook')}</p>
-			<p className='inbox-email-value'>{props.inboxEmail}</p>
-			<Button onClick={copyToClipboard} title={_('Copy to clipboard')} />
+			{
+				isEmailToNoteAvailableInAccount ? <Fragment>
+					<p className='inbox-email-value'>{props.inboxEmail}</p>
+					<Button onClick={copyToClipboard} title={_('Copy to clipboard')} />
+				</Fragment>
+					: <div className='alert-warn'>
+						<p>{_('Your account doesn\'t have access to this feature')}</p>
+					</div>
+			}
 		</div>
 	);
 };
@@ -26,6 +37,7 @@ const JoplinCloudConfigScreen = (props: JoplinCloudConfigScreenProps) => {
 const mapStateToProps = (state: AppState) => {
 	return {
 		inboxEmail: state.settings['sync.10.inboxEmail'],
+		joplinCloudAccountType: state.settings['sync.10.accountType'],
 	};
 };
 

packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx

@@ -345,6 +345,7 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
 				description={options?.description}
 				statusComponent={options?.statusComp}
 				styles={this.styles()}
+				disabled={options?.disabled}
 			/>
 		);
 	}
@@ -513,18 +514,27 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
 		if (section.name === 'joplinCloud') {
 			const label = _('Email to note');
 			const description = _('Any email sent to this address will be converted into a note and added to your collection. The note will be saved into the Inbox notebook');
+			const isEmailToNoteAvailableInAccount = this.props.settings['sync.10.accountType'] !== 1;
+			const inboxEmailValue = isEmailToNoteAvailableInAccount ? this.props.settings['sync.10.inboxEmail'] : '-';
 			addSettingComponent(
 				<View key="joplinCloud">
 					<View style={this.styles().styleSheet.settingContainerNoBottomBorder}>
 						<Text style={this.styles().styleSheet.settingText}>{label}</Text>
-						<Text style={this.styles().styleSheet.settingTextEmphasis}>{this.props.settings['sync.10.inboxEmail']}</Text>
+						<Text style={this.styles().styleSheet.settingTextEmphasis}>{inboxEmailValue}</Text>
 					</View>
+					{
+						!isEmailToNoteAvailableInAccount && (
+							<View style={this.styles().styleSheet.settingContainerNoBottomBorder}>
+								<Text style={this.styles().styleSheet.descriptionAlert}>{_('Your account doesn\'t have access to this feature')}</Text>
+							</View>
+						)
+					}
 					{
 						this.renderButton(
 							'sync.10.inboxEmail',
 							_('Copy to clipboard'),
-							() => Clipboard.setString(this.props.settings['sync.10.inboxEmail']),
-							{ description },
+							() => isEmailToNoteAvailableInAccount && Clipboard.setString(this.props.settings['sync.10.inboxEmail']),
+							{ description, disabled: !isEmailToNoteAvailableInAccount },
 						)
 					}
 				</View>,

packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts

@@ -15,6 +15,7 @@ export interface ConfigScreenStyleSheet {
 	settingTextEmphasis: TextStyle;
 	linkText: TextStyle;
 	descriptionText: TextStyle;
+	descriptionAlert: TextStyle;
 	warningText: TextStyle;
 
 	sliderUnits: TextStyle;
@@ -119,6 +120,11 @@ const configScreenStyles = (themeId: number): ConfigScreenStyles => {
 			fontSize: theme.fontSizeSmaller,
 			flex: 1,
 		},
+		descriptionAlert: {
+			color: theme.color,
+			fontSize: theme.fontSizeSmaller,
+			flex: 1,
+		},
 		linkText: {
 			...settingTextStyle,
 			borderBottomWidth: 1,