Desktop: Resolves #11774: Add Sign Up call to Joplin Cloud (#12025)

Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

.eslintignore

@@ -209,6 +209,7 @@ packages/app-desktop/gui/InlineCombobox.js
 packages/app-desktop/gui/ItemList.js
 packages/app-desktop/gui/JoplinCloudConfigScreen.js
 packages/app-desktop/gui/JoplinCloudLoginScreen.js
+packages/app-desktop/gui/JoplinCloudSignUpCallToAction.js
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.js
 packages/app-desktop/gui/KeymapConfig/ShortcutRecorder.js
 packages/app-desktop/gui/KeymapConfig/styles/index.js

.gitignore

@@ -183,6 +183,7 @@ packages/app-desktop/gui/InlineCombobox.js
 packages/app-desktop/gui/ItemList.js
 packages/app-desktop/gui/JoplinCloudConfigScreen.js
 packages/app-desktop/gui/JoplinCloudLoginScreen.js
+packages/app-desktop/gui/JoplinCloudSignUpCallToAction.js
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.js
 packages/app-desktop/gui/KeymapConfig/ShortcutRecorder.js
 packages/app-desktop/gui/KeymapConfig/styles/index.js

packages/app-desktop/gui/JoplinCloudLoginScreen.tsx

@@ -10,6 +10,7 @@ import { reducer, defaultState, generateApplicationConfirmUrl, checkIfLoginWasSu
 import { AppState } from '../app.reducer';
 import Logger from '@joplin/utils/Logger';
 import { reg } from '@joplin/lib/registry';
+import JoplinCloudSignUpCallToAction from './JoplinCloudSignUpCallToAction';
 
 const logger = Logger.create('JoplinCloudLoginScreen');
 const { connect } = require('react-redux');
@@ -105,6 +106,7 @@ const JoplinCloudScreenComponent = (props: Props) => {
 					) : null}
 				</p>
 				{state.active === 'LINK_USED' ? <div id="loading-animation" /> : null}
+				<JoplinCloudSignUpCallToAction />
 			</div>
 			<ButtonBar onCancelClick={() => props.dispatch({ type: 'NAV_BACK' })} />
 		</div>

packages/app-desktop/gui/JoplinCloudSignUpCallToAction.tsx

@@ -0,0 +1,20 @@
+import { _ } from '@joplin/lib/locale';
+import * as React from 'react';
+import bridge from '../services/bridge';
+
+const JoplinCloudSignUpCallToAction = () => {
+
+	const onJoplinCloudSignUpClick = async () => {
+		await bridge().openExternal('https://joplinapp.org/plans/');
+	};
+
+	return <div className="joplin-cloud-sign-up">
+		<a
+			href="#"
+			onClick={onJoplinCloudSignUpClick}
+		>{_('Sign up to Joplin Cloud')}</a>
+	</div>;
+
+};
+
+export default JoplinCloudSignUpCallToAction;

packages/app-desktop/gui/SyncWizard/Dialog.tsx

@@ -10,6 +10,7 @@ import useElementSize from '@joplin/lib/hooks/useElementSize';
 import Button, { ButtonLevel } from '../Button/Button';
 import bridge from '../../services/bridge';
 import Setting from '@joplin/lib/models/Setting';
+import JoplinCloudSignUpCallToAction from '../JoplinCloudSignUpCallToAction';
 
 interface Props {
 	themeId: number;
@@ -210,6 +211,11 @@ export default function(props: Props) {
 		);
 	}
 
+	function renderSignUpArea(info: SyncTargetInfo) {
+		if (info.name !== 'joplinCloud') return null;
+		return <JoplinCloudSignUpCallToAction/>;
+	}
+
 	function renderSyncTarget(info: SyncTargetInfo) {
 		const key = `syncTarget_${info.name}`;
 		const height = info.name !== 'joplinCloud' ? descriptionHeight : null;
@@ -238,6 +244,7 @@ export default function(props: Props) {
 				{descriptionComp}
 				{featuresComp}
 				{renderSelectArea(info, headerId)}
+				{renderSignUpArea(info)}
 				{renderSlowSyncWarning()}
 			</SyncTargetBox>
 		);

packages/app-desktop/gui/styles/index.scss

@@ -15,5 +15,6 @@
 @use './combobox-wrapper.scss';
 @use './combobox-suggestion-option.scss';
 @use './change-app-layout-dialog.scss';
+@use './joplin-cloud-sign-up.scss';
 @use './popup-notification-list.scss';
 @use './popup-notification-item.scss';

packages/app-desktop/gui/styles/joplin-cloud-sign-up.scss

@@ -0,0 +1,4 @@
+
+.joplin-cloud-sign-up {
+	margin-top: 1em;
+}