Merge pull request #1951 from anyproto/feature/JS-8832-update-onboarding-email-screen

Feature/JS-8832: Onboarding email screen update

Author: ra3orblade

src/json/text.json

@@ -451,6 +451,7 @@
 	"authSelectLogin": "I already have a Key",
 	"authSelectSignup": "I am new here",
 	"authDisclaimer": "By continuing you agree to our <a href=\"%s\">Terms of Use</a> and <a href=\"%s\">Privacy Policy</a>",
+	"onboardEmailDisclaimer": "By clicking Continue, you agree to receive emails from Anytype. You can unsubscribe at any time.",
 
 	"authLoginTitle": "Welcome back",
 	"authLoginLabel": "Enter your key to access your vault",
@@ -476,7 +477,7 @@
 	"authOnboardPhraseRevealAndCopy": "Reveal and Copy",
 
 	"authOnboardEmailTitle": "Stay in the loop",
-	"authOnboardEmailLabel": "We'd love to share tips, tricks and product updates with you. Your email is never linked to your identity. We won't share your data. Ever.",
+	"authOnboardEmailLabel": "We’d love to share product updates, tips, and community news.<br/>Your email is not linked to your data.",
 	"authOnboardEmailPlaceholder": "Enter your email...",
 
 	"authOnboardPersonaTitle": "Tell Us About Yourself",

src/ts/component/footer/auth/email.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { Label } from 'Component';
+import { I, U, J, translate } from 'Lib';
+
+const FooterAuthOnboardEmail = forwardRef<{}, I.FooterComponent>(() => {
+
+	return (
+		<Label 
+			className="disclaimer" 
+			text={translate('onboardEmailDisclaimer')}
+		/>
+	);
+
+});
+
+export default FooterAuthOnboardEmail;

src/ts/component/footer/index.tsx

@@ -3,6 +3,7 @@ import { I } from 'Lib';
 
 import FooterAuthIndex from './auth';
 import FooterAuthDisclaimer from './auth/disclaimer';
+import FooterAuthOnboardEmail from './auth/email';
 import FooterMainObject from './main/object';
 
 interface Props extends I.FooterComponent {
@@ -13,6 +14,7 @@ interface Props extends I.FooterComponent {
 const Components = {
 	authIndex:			 FooterAuthIndex,
 	authDisclaimer:		 FooterAuthDisclaimer,
+	authOnboardEmail:		 	 FooterAuthOnboardEmail,
 	mainObject:			 FooterMainObject,
 };
 
@@ -36,4 +38,4 @@ const Footer = forwardRef<{}, Props>((props, ref) => {
 
 });
 
-export default Footer;
+export default Footer;

src/ts/component/page/auth/onboard.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useState, useEffect, KeyboardEvent } from 'react';
 import { observer } from 'mobx-react';
-import { Frame, Title, Label, Button, Icon, Input, Error, Header, Phrase } from 'Component';
+import { Frame, Title, Label, Button, Icon, Input, Error, Header, Phrase, Footer } from 'Component';
 import { I, C, S, U, translate, Animation, analytics, keyboard, Renderer, Onboarding } from 'Lib';
 import { set } from 'lodash';
 
@@ -220,6 +220,7 @@ const PageAuthOnboard = observer(forwardRef<I.PageRef, I.PageComponent>((props,
 	let content = null;
 	let additional = null;
 	let buttons = null;
+	let footer = null;
 
 	switch (stage) {
 		case Stage.Phrase: {
@@ -290,6 +291,8 @@ const PageAuthOnboard = observer(forwardRef<I.PageRef, I.PageComponent>((props,
 					</div>
 				</>
 			);
+
+			footer = <Footer {...props} component="authOnboardEmail" />;
 			break;
 		};
 
@@ -385,6 +388,8 @@ const PageAuthOnboard = observer(forwardRef<I.PageRef, I.PageComponent>((props,
 				<Error className="animation" text={error} />
 				<div className="buttons">{buttons}</div>
 			</Frame>
+
+			{footer}
 		</div>
 	);