From 5a97ce74bcc06b1ca3848865d0bb30c5ae8b11ab Mon Sep 17 00:00:00 2001
From: pedr <pedrlz.frn@gmail.com>
Date: Thu, 1 May 2025 12:22:00 -0300
Subject: [PATCH] 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                                 |  1 +
 .gitignore                                    |  1 +
 .../gui/JoplinCloudLoginScreen.tsx            |  2 ++
 .../gui/JoplinCloudSignUpCallToAction.tsx     | 20 +++++++++++++++++++
 .../app-desktop/gui/SyncWizard/Dialog.tsx     |  7 +++++++
 packages/app-desktop/gui/styles/index.scss    |  1 +
 .../gui/styles/joplin-cloud-sign-up.scss      |  4 ++++
 7 files changed, 36 insertions(+)
 create mode 100644 packages/app-desktop/gui/JoplinCloudSignUpCallToAction.tsx
 create mode 100644 packages/app-desktop/gui/styles/joplin-cloud-sign-up.scss

diff --git a/.eslintignore b/.eslintignore
index 02e776db31..cfc8f8b1fe 100644
--- a/.eslintignore
+++ b/.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
diff --git a/.gitignore b/.gitignore
index 2d76d7a3ac..d44e23eec1 100644
--- a/.gitignore
+++ b/.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
diff --git a/packages/app-desktop/gui/JoplinCloudLoginScreen.tsx b/packages/app-desktop/gui/JoplinCloudLoginScreen.tsx
index 6bb79d1318..4832bd2159 100644
--- a/packages/app-desktop/gui/JoplinCloudLoginScreen.tsx
+++ b/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>
diff --git a/packages/app-desktop/gui/JoplinCloudSignUpCallToAction.tsx b/packages/app-desktop/gui/JoplinCloudSignUpCallToAction.tsx
new file mode 100644
index 0000000000..308a6915d8
--- /dev/null
+++ b/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;
diff --git a/packages/app-desktop/gui/SyncWizard/Dialog.tsx b/packages/app-desktop/gui/SyncWizard/Dialog.tsx
index d1e3357cdb..ccb59d709b 100644
--- a/packages/app-desktop/gui/SyncWizard/Dialog.tsx
+++ b/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>
 		);
diff --git a/packages/app-desktop/gui/styles/index.scss b/packages/app-desktop/gui/styles/index.scss
index 1c061eff6e..4d0d543652 100644
--- a/packages/app-desktop/gui/styles/index.scss
+++ b/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';
diff --git a/packages/app-desktop/gui/styles/joplin-cloud-sign-up.scss b/packages/app-desktop/gui/styles/joplin-cloud-sign-up.scss
new file mode 100644
index 0000000000..302207cf00
--- /dev/null
+++ b/packages/app-desktop/gui/styles/joplin-cloud-sign-up.scss
@@ -0,0 +1,4 @@
+
+.joplin-cloud-sign-up {
+	margin-top: 1em;
+}
\ No newline at end of file