{withSteps ? (
diff --git a/src/ts/component/popup/page/membership/current.tsx b/src/ts/component/popup/page/membership/current.tsx
index c63ac3376b..037bc0fa59 100644
--- a/src/ts/component/popup/page/membership/current.tsx
+++ b/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) {
diff --git a/src/ts/component/popup/page/membership/free.tsx b/src/ts/component/popup/page/membership/free.tsx
index 70a520dbe2..ac566b67a5 100644
--- a/src/ts/component/popup/page/membership/free.tsx
+++ b/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) {
diff --git a/src/ts/component/util/emailCollectionForm.tsx b/src/ts/component/util/emailCollectionForm.tsx
new file mode 100644
index 0000000000..9ffeda44fb
--- /dev/null
+++ b/src/ts/component/util/emailCollectionForm.tsx
@@ -0,0 +1,249 @@
+import * as React from 'react';
+import { Label, Checkbox, Input, Button, Icon, Pin } from 'Component';
+import { analytics, C, I, J, S, translate, U } from 'Lib';
+
+interface Props {
+ onStepChange: () => void;
+ onComplete: () => void;
+};
+
+interface State {
+ countdown: number;
+ status: string;
+ statusText: string;
+ email: string,
+ subscribeNews: boolean,
+ subscribeTips: boolean,
+};
+
+class EmailCollectionForm extends React.Component
{
+
+ state = {
+ status: '',
+ statusText: '',
+ countdown: 60,
+ email: '',
+ subscribeNews: false,
+ subscribeTips: false,
+ };
+
+ step = 0;
+ node: any = null;
+ refCheckboxTips: any = null;
+ refCheckboxNews: any = null;
+ refEmail: any = null;
+ refButton: any = null;
+ refCode: any = null;
+
+ interval = null;
+ timeout = null;
+
+ constructor (props: Props) {
+ super(props);
+
+ this.onCheck = this.onCheck.bind(this);
+ this.onSubmitEmail = this.onSubmitEmail.bind(this);
+ this.verifyEmail = this.verifyEmail.bind(this);
+ this.onConfirmEmailCode = this.onConfirmEmailCode.bind(this);
+ this.onResend = this.onResend.bind(this);
+ this.validateEmail = this.validateEmail.bind(this);
+ };
+
+ render () {
+ const { status, statusText, countdown } = this.state;
+
+ let content = null;
+
+ switch (this.step) {
+ case 0: {
+ content = (
+
+ );
+ break;
+ };
+
+ case 1: {
+ content = (
+
+
this.refCode = ref}
+ pinLength={4}
+ isVisible={true}
+ onSuccess={this.onConfirmEmailCode}
+ />
+
+ {status ? {statusText}
: ''}
+
+
+ {translate('popupMembershipResend')}
+ {countdown ? U.Common.sprintf(translate('popupMembershipCountdown'), countdown) : ''}
+
+
+
+
+
+ {content}
+
+ );
+ };
+
+ componentDidMount () {
+ this.refButton?.setDisabled(true);
+ };
+
+ onCheck (ref) {
+ ref.toggle();
+ };
+
+ setStatus (status: string, statusText: string) {
+ this.setState({ status, statusText });
+
+ window.clearTimeout(this.timeout);
+ this.timeout = window.setTimeout(() => this.clearStatus(), 4000);
+ };
+
+ clearStatus () {
+ this.setState({ status: '', statusText: '' });
+ };
+
+ validateEmail () {
+ this.clearStatus();
+
+ window.clearTimeout(this.timeout);
+ this.timeout = window.setTimeout(() => {
+ const value = this.refEmail?.getValue();
+ const isValid = U.Common.checkEmail(value);
+
+ if (value && !isValid) {
+ this.setStatus('error', translate('errorIncorrectEmail'));
+ };
+
+ this.refButton?.setDisabled(!isValid);
+ }, J.Constant.delay.keyboard);
+ };
+
+ onSubmitEmail (e: any) {
+ if (!this.refButton || !this.refEmail) {
+ return;
+ };
+
+ if (this.refButton.isDisabled()) {
+ return;
+ };
+
+ this.setState({
+ email: this.refEmail.getValue(),
+ subscribeNews: this.refCheckboxNews?.getValue(),
+ subscribeTips: this.refCheckboxTips?.getValue(),
+ }, () => {
+ this.refButton.setLoading(true);
+ this.verifyEmail(e)
+ });
+ };
+
+ verifyEmail (e: any) {
+ e.preventDefault();
+
+ const { email, subscribeNews, subscribeTips } = this.state;
+
+ C.MembershipGetVerificationEmail(email, subscribeNews, subscribeTips, true, (message) => {
+ this.refButton?.setLoading(false);
+
+ if (message.error.code) {
+ this.setStatus('error', message.error.description);
+ return;
+ };
+
+ this.step = 1;
+ this.startCountdown(60);
+ this.forceUpdate();
+ this.props.onStepChange();
+ });
+ };
+
+ onConfirmEmailCode () {
+ const code = this.refCode.getValue();
+
+ C.MembershipVerifyEmailCode(code, (message) => {
+ if (message.error.code) {
+ this.setStatus('error', message.error.description);
+ this.refCode.reset();
+ return;
+ };
+
+ this.step = 2;
+ this.forceUpdate();
+ this.props.onStepChange();
+ });
+ };
+
+ onResend (e: any) {
+ if (!this.state.countdown) {
+ this.verifyEmail(e);
+ };
+ };
+
+ startCountdown (seconds) {
+ const { emailConfirmationTime } = S.Common;
+
+ if (!emailConfirmationTime) {
+ S.Common.emailConfirmationTimeSet(U.Date.now());
+ };
+
+ this.setState({ countdown: seconds });
+ this.interval = window.setInterval(() => {
+ let { countdown } = this.state;
+
+ countdown--;
+ this.setState({ countdown });
+
+ if (!countdown) {
+ S.Common.emailConfirmationTimeSet(0);
+ window.clearInterval(this.interval);
+ this.interval = null;
+ };
+ }, 1000);
+ };
+
+};
+
+export default EmailCollectionForm;
diff --git a/src/ts/docs/help/onboarding.ts b/src/ts/docs/help/onboarding.ts
index 18dfe8ef0d..4cce54a52b 100644
--- a/src/ts/docs/help/onboarding.ts
+++ b/src/ts/docs/help/onboarding.ts
@@ -24,6 +24,25 @@ export default {
},
}),
+ emailCollection: () => ({
+ items: [
+ {
+ noButton: true
+ },
+ ],
+ param: {
+ element: '#page.isFull #footer #button-help',
+ classNameWrap: 'fixed',
+ className: 'invertedColor',
+ vertical: I.MenuDirection.Top,
+ horizontal: I.MenuDirection.Right,
+ noArrow: true,
+ noClose: true,
+ passThrough: true,
+ offsetY: -4,
+ },
+ }),
+
objectCreationStart: () => ({
category: translate('onboardingObjectCreationStart'),
items: [
diff --git a/src/ts/lib/api/command.ts b/src/ts/lib/api/command.ts
index d67b73e220..5bafdb5c9d 100644
--- a/src/ts/lib/api/command.ts
+++ b/src/ts/lib/api/command.ts
@@ -1998,11 +1998,13 @@ export const MembershipGetPortalLinkUrl = (callBack?: (message: any) => void) =>
dispatcher.request(MembershipGetPortalLinkUrl.name, request, callBack);
};
-export const MembershipGetVerificationEmail = (email: string, isSubscribed: boolean, callBack?: (message: any) => void) => {
+export const MembershipGetVerificationEmail = (email: string, subscribeNews: boolean, subscribeTips: boolean, isOnboardingList: boolean, callBack?: (message: any) => void) => {
const request = new Rpc.Membership.GetVerificationEmail.Request();
request.setEmail(email);
- request.setSubscribetonewsletter(isSubscribed);
+ request.setSubscribetonewsletter(subscribeNews);
+ request.setInsidertipsandtutorials(subscribeTips);
+ request.setIsonboardinglist(isOnboardingList);
dispatcher.request(MembershipGetVerificationEmail.name, request, callBack);
};