JS-5569: email collection tooltip

electron/js/lib/installNativeMessagingHost.js

@@ -17,7 +17,7 @@ const { fixPathForAsarUnpack, is } = require('electron-util');
 
 const APP_NAME = 'com.anytype.desktop';
 const MANIFEST_FILENAME = `${APP_NAME}.json`;
-const EXTENSION_IDS = [ 'jbnammhjiplhpjfncnlejjjejghimdkf', 'jkmhmgghdjjbafmkgjmplhemjjnkligf' ];
+const EXTENSION_IDS = [ 'jbnammhjiplhpjfncnlejjjejghimdkf', 'jkmhmgghdjjbafmkgjmplhemjjnkligf', 'lcamkcmpcofgmbmloefimnelnjpcdpfn' ];
 const USER_PATH = app.getPath('userData');
 const EXE_PATH = app.getPath('exe');
 
@@ -191,4 +191,4 @@ const writeManifest = (dst, data) => {
 
 };
 
-module.exports = { installNativeMessagingHost };
+module.exports = { installNativeMessagingHost };

src/json/extension.ts

@@ -1,8 +1,8 @@
 export default {
 	clipper: {
-		ids: 		[ 'jbnammhjiplhpjfncnlejjjejghimdkf', 'jkmhmgghdjjbafmkgjmplhemjjnkligf' ],
+		ids: 		[ 'jbnammhjiplhpjfncnlejjjejghimdkf', 'jkmhmgghdjjbafmkgjmplhemjjnkligf', 'lcamkcmpcofgmbmloefimnelnjpcdpfn' ],
 		name:		 'Anytype Webclipper',
 		prefix:		 'anytypeWebclipper',
 		emojiUrl:	 'https://anytype-static.fra1.cdn.digitaloceanspaces.com/emojies/'
 	}
-};
+};

src/json/text.json

@@ -170,6 +170,7 @@
 	"commonProgress": "Progress",
 	"commonMainChat": "Chat",
 	"commonMenu": "Menu",
+	"commonSignUp": "Sign Up",
 
 	"pluralDay": "day|days",
 	"pluralObject": "Object|Objects",
@@ -1849,6 +1850,18 @@
 	"onboardingObjectCreationStart21": "<b>Choose here from the most popular object types</b>, such as Page, Task, or Collection. You can also select an object from the Type menu.",
 	"onboardingObjectCreationStart2Button": "I got it!",
 
+	"emailCollectionStep0Title": "Want to stay in touch?",
+	"emailCollectionStep0Description": "Enter your email to receive tips and updates. We do not link your account with your email, ever. Cancel anytime.",
+	"emailCollectionStep1Title": "Just a moment",
+	"emailCollectionStep1Description": "Enter the code we’ve sent you to your email",
+	"emailCollectionStep2Title": "You’re Subscribed!",
+	"emailCollectionStep2Description": "You are now set to receive the latest updates and perks. Enjoy exploring!",
+
+	"emailCollectionCheckboxTipsLabel": "Insider tips & tutorials on using Anytype",
+	"emailCollectionCheckboxNewsLabel": "Product updates & company news",
+	"emailCollectionEnterEmail": "Enter email...",
+	"emailCollectionGreat": "Great!",
+
 	"onboardingObjectCreationFinish": "Creating Objects",
 	"onboardingObjectCreationFinish11": "<b>For the Object you created, you can adjust it using the top menu.</b> Change the cover, layout, or set up a relations to build the graph.",
 	"onboardingObjectCreationFinish1Button": "Ok! I like it",

src/scss/component/common.scss

@@ -30,4 +30,6 @@
 @import "./share";
 
 @import "./preview/common";
-@import "./media/common";
+@import "./media/common";
+
+@import "./emailCollectionForm";

src/scss/component/emailCollectionForm.scss

@@ -0,0 +1,38 @@
+@import "~scss/_mixins";
+
+.emailCollectionForm { display: flex; flex-direction: column; }
+.emailCollectionForm {
+    .statusBar { @include text-small; min-height: 18px; margin: 0px 0px 2px; padding-top: 4px; color: var(--color-text-secondary);  }
+    .statusBar.error { color: var(--color-red); }
+
+    .buttonWrapper { padding-top: 8px; }
+    .buttonWrapper {
+        .button { width: 100%; }
+    }
+
+    .step0 { padding-top: 16px; }
+    .step0 {
+        .check { @include text-small; }
+        .inputWrapper { padding-top: 16px; }
+        .inputWrapper {
+            .input { border-radius: 3px; height: 36px; }
+        }
+    }
+
+    .step1 { padding-top: 16px; text-align: center; }
+    .step1 {
+        .pin { margin-bottom: 8px; }
+        .pin {
+            .input { @include text-header1; width: 35px; height: 47px; border-radius: 6px; border-color: var(--color-shape-primary); }
+        }
+
+        .resend { font-weight: 500; color: var(--color-text-secondary); @include text-small; }
+        .resend.countdown { color: var(--color-text-primary); }
+        .resend:not(.countdown):hover { color: var(--color-control-active); }
+    }
+
+    .step2 { padding-top: 8px; }
+    .step2 {
+        .icon { width: 100%; height: 138px; background: url('~img/icon/payment/green.svg') 50% 50% no-repeat; background-size: 80px; }
+    }
+}

src/scss/menu/onboarding.scss

@@ -74,6 +74,8 @@
 		}
 	}
 
+	.menu.menuOnboarding.invertedColor { box-shadow: inset 0px 0px 0px 1px var(--color-control-inactive), 0px 4px 12px 0px rgba(37, 37, 37, 0.20); background-color: var(--color-bg-primary); color: var(--color-text-primary); }
+
 	.menu.menuOnboarding.isWizard { min-height: 458px; }
 	.menu.menuOnboarding.isWizard {
 		.bottom { position: absolute; bottom: 16px; width: calc(100% - 32px); margin: 0px; }

src/ts/app.tsx

@@ -220,6 +220,10 @@ class App extends React.Component<object, State> {
 
 	componentDidMount () {
 		this.init();
+
+		window.setTimeout(() => {
+			Onboarding.start('emailCollection', false, true);
+		}, 1500);
 	};
 
 	init () {

src/ts/component/index.tsx

@@ -94,6 +94,8 @@ import ShareTooltip from './util/share/tooltip';
 import ShareBanner from './util/share/banner';
 import FooterAuthDisclaimer from './footer/auth/disclaimer';
 
+import EmailCollectionForm from './util/emailCollectionForm';
+
 export {
 	Page,
 	EditorPage,
@@ -184,5 +186,7 @@ export {
 	ProgressBar,
 	ShareTooltip,
 	ShareBanner,
-	FooterAuthDisclaimer
+	FooterAuthDisclaimer,
+
+	EmailCollectionForm,
 };

src/ts/component/menu/onboarding.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import $ from 'jquery';
 import raf from 'raf';
 import { observer } from 'mobx-react';
-import { Button, Icon, Label } from 'Component';
+import { Button, Icon, Label, EmailCollectionForm } from 'Component';
 import { I, C, S, U, J, Onboarding, analytics, keyboard, translate } from 'Lib';
 import ReactCanvasConfetti from 'react-canvas-confetti';
 
@@ -37,6 +37,7 @@ const MenuOnboarding = observer(class MenuSelect extends React.Component<I.Menu,
 		const item = items[current];
 		const l = items.length;
 		const withSteps = l > 1;
+		const withEmailForm = key == 'emailCollection';
 
 		let buttons = [];
 		let category = '';
@@ -88,6 +89,9 @@ const MenuOnboarding = observer(class MenuSelect extends React.Component<I.Menu,
 						loop={true} 
 					/>
 				) : ''}
+				{withEmailForm ? (
+					<EmailCollectionForm onStepChange={this.props.position} onComplete={() => this.props.close()} />
+				) : ''}
 
 				<div className={[ 'bottom', withSteps ? 'withSteps' : '' ].join(' ')}>
 					{withSteps ? (

src/ts/component/popup/page/membership/current.tsx

@@ -188,7 +188,7 @@ const PopupMembershipPageCurrent = observer(class PopupMembershipPageCurrent ext
 
 		this.refButton.setLoading(true);
 
-		C.MembershipGetVerificationEmail(this.refEmail.getValue(), true, (message) => {
+		C.MembershipGetVerificationEmail(this.refEmail.getValue(), true, false, false, (message) => {
 			this.refButton.setLoading(false);
 
 			if (message.error.code) {

src/ts/component/popup/page/membership/free.tsx

@@ -138,7 +138,7 @@ const PopupMembershipPageFree = observer(class PopupMembershipPageFree extends R
 
 		this.refButton.setLoading(true);
 
-		C.MembershipGetVerificationEmail(this.refEmail.getValue(), this.refCheckbox?.getValue(), (message) => {
+		C.MembershipGetVerificationEmail(this.refEmail.getValue(), this.refCheckbox?.getValue(), false, false, (message) => {
 			this.refButton.setLoading(false);
 
 			if (message.error.code) {