Merge pull request #2577 from ecency/nt/register-flow-refine

Nt/register flow refine

ios/Ecency/Info.plist

@@ -116,6 +116,21 @@
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
 	</array>
+	<key>LSApplicationQueriesSchemes</key>
+<array>
+    <string>message</string>
+    <string>readdle-spark</string>
+    <string>airmail</string>
+    <string>ms-outlook</string>
+    <string>googlegmail</string>
+    <string>inbox-gmail</string>
+    <string>ymail</string>
+    <string>superhuman</string>
+    <string>yandexmail</string>
+    <string>fastmail</string>
+    <string>protonmail</string>
+    <string>szn-email</string>
+</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 	<key>bugsnag</key>

package.json

@@ -108,6 +108,7 @@
     "react-native-date-picker": "^4.2.0",
     "react-native-device-info": "^10.2.1",
     "react-native-dynamic": "^1.0.0",
+    "react-native-email-link": "^1.14.3",
     "react-native-extended-stylesheet": "^0.10.0",
     "react-native-fast-image": "^8.3.2",
     "react-native-fingerprint-scanner": "hieuvp/react-native-fingerprint-scanner",

src/components/organisms/quickProfileModal/children/actionPanel.tsx

@@ -37,7 +37,7 @@ export const ActionPanel = ({
       ) : (
         <IconButton
           iconType="MaterialCommunityIcons"
-          name={'account-plus'}
+          name="account-plus"
           size={26}
           color={EStyleSheet.value(followColor)}
           disabled={isFollowing || isLoading}

src/components/sideMenu/view/sideMenuStyles.js

@@ -87,7 +87,7 @@ export default EStyleSheet.create({
   },
   itemWrapper: {
     flexDirection: 'row',
-    alignItems:'center',
+    alignItems: 'center',
     marginLeft: 55,
   },
   versionText: {

src/config/locales/en-US.json

@@ -305,9 +305,11 @@
     "mail": "Enter your email address",
     "ref_user": "Referred user (Optional)",
     "500_error": "Your request could not be processed, signup queue is likely full! Try again in few minutes...",
+    "error_message": "{message}\nTry again or try purchasing account instead",
     "title_description": "One account to manage everything",
     "form_description": "By signing up with us, you agree to our Terms of Service and Privacy Policies.",
-    "registering":"Registering Your Account..."
+    "registering":"Registering Your Account...",
+    "registered":"Registration Successful\nCheck your email for instruction"
   },
   "home": {
     "feed": "Feed",
@@ -467,6 +469,7 @@
     "claim_reward_balance_ok": "Reward balance claimed",
     "fail": "Fail!",
     "move": "Move",
+    "continue": "Continue",
     "move_question": "Are you sure to move to drafts?",
     "success_shared": "Success! Content submitted!",
     "success_moved": "Moved to draft",

src/screens/register/children/registerAccountModal.tsx

@@ -6,9 +6,10 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import EStyleSheet from 'react-native-extended-stylesheet';
+import {openInbox} from "react-native-email-link";
 import styles from '../styles/registerAccountModalStyles';
 import { InAppPurchaseContainer } from '../../../containers';
-import { BoostPlaceHolder, Modal, ProductItemLine } from '../../../components';
+import { Icon, MainButton, Modal, PostCardPlaceHolder } from '../../../components';
 import LOGO_ESTM from '../../../assets/esteemcoin_boost.png';
 import { signUp } from '../../../providers/ecency/ecency';
 import ROUTES from '../../../constants/routeNames';
@@ -31,6 +32,7 @@ export const RegisterAccountModal = forwardRef(({ username, email, refUsername }
   const [showModal, setShowModal] = useState(false);
   const [disableFree, setDisableFree] = useState(false);
   const [isRegistering, setIsRegistering] = useState(false);
+  const [isRegistered, setIsRegistered] = useState(false);
 
   useImperativeHandle(ref, () => ({
     showModal: ({ purchaseOnly }: { purchaseOnly: boolean } = { purchaseOnly: false }) => {
@@ -39,9 +41,10 @@ export const RegisterAccountModal = forwardRef(({ username, email, refUsername }
     },
   }));
 
-  const _handleOnRegisterSuccess = () => {
+  const _onContinuePress = () => {
     navigation.navigate(ROUTES.DRAWER.MAIN);
-    Alert.alert('Success', 'Hurrah, you did it! Expect email from us with further instructions.');
+    openInbox();
+
   };
 
   const _handleOnPressRegister = () => {
@@ -50,41 +53,32 @@ export const RegisterAccountModal = forwardRef(({ username, email, refUsername }
     signUp(username, email, refUsername)
       .then((result) => {
         if (result) {
-          _handleOnRegisterSuccess();
+          setIsRegistered(true);
         }
         setIsRegistering(false);
       })
       .catch((err) => {
+        let title = intl.formatMessage({ id: 'alert.fail' });
+        let body = intl.formatMessage({ id: 'alert.unknow_error' });
+
         if (get(err, 'response.status') === 500) {
-          Alert.alert(
-            intl.formatMessage({ id: 'alert.fail' }),
-            intl.formatMessage({ id: 'register.500_error' }),
-          );
+          title = intl.formatMessage({ id: 'alert.fail' });
+          body = intl.formatMessage({ id: 'register.500_error' });
+
         } else if (get(err, 'response.data.message')) {
-          Alert.alert(
-            intl.formatMessage({ id: 'alert.fail' }),
-            `${err.response.data.message}\nTry buying account instead`,
-            [
-              {
-                text: 'Okay',
-              },
-              {
-                text: 'Cancel',
-              },
-            ],
-          );
-        } else {
-          Alert.alert(
-            intl.formatMessage({ id: 'alert.fail' }),
-            intl.formatMessage({ id: 'alert.unknow_error' }),
+          title = intl.formatMessage({ id: 'alert.fail' });
+          body = intl.formatMessage(
+            { id: 'register.error_message' },
+            { message: err.response.data.message },
           );
         }
+        Alert.alert(title, body);
         setIsRegistering(false);
       });
   };
 
   const _handleOnPurchaseSuccess = () => {
-    _handleOnRegisterSuccess();
+    setIsRegistered(true);
     setIsRegistering(false);
   };
 
@@ -92,6 +86,45 @@ export const RegisterAccountModal = forwardRef(({ username, email, refUsername }
     setIsRegistering(false);
   };
 
+  const _renderIntermediateComponent = () => {
+    if (!isRegistering && !isRegistered) {
+      return null;
+    }
+
+    const _textId = isRegistered ? 'register.registered' : 'register.registering';
+    const _indicator = isRegistered ? (
+      <Icon
+        size={56}
+        color={EStyleSheet.value('$primaryGreen')}
+        name="check-circle"
+        iconType="MaterialIcons"
+      />
+    ) : (
+      <ActivityIndicator size="large" color={EStyleSheet.value('$primaryBlack')} />
+    );
+
+    const _action = isRegistered && (
+      <MainButton
+        onPress={_onContinuePress}
+        text={intl.formatMessage({ id: 'alert.continue' })}
+        style={styles.actionButton}
+      />;
+    );
+
+    return (
+      <View style={styles.registeringContainer}>
+        {_indicator}
+        <Text style={styles.registeringText}>
+          {intl.formatMessage({
+            id: _textId,
+          })}
+        </Text>
+        {_action}
+      </View>
+    );
+
+  };
+
   const _renderUserInfo = (text: string, style: TextStyle) => (
     <View style={styles.userInfoContainer}>
       <View style={styles.userInfoWrapper}>
@@ -125,72 +158,66 @@ export const RegisterAccountModal = forwardRef(({ username, email, refUsername }
   };
 
   const _renderRegisterOptions = ({ productList, buyItem }) => {
-    return (
-      <View style={styles.contentContainer}>
-        <View style={styles.headerContainer}>
-          <View>
-            {_renderUserInfo(username, styles.usernameStyle)}
-            {_renderUserInfo(email + email, styles.emailStyle)}
-          </View>
-          <Image style={styles.logoEstm} source={LOGO_ESTM} />
-        </View>
+    return isRegistered || isRegistering ? (
+      _renderIntermediateComponent()
+    ) : (
+      <ScrollView style={styles.productsWrapper}>
+        {!disableFree &&
+          _renderCard({
+            titleId: 'free_account.title',
+            descriptionId: 'free_account.desc',
 
-        {isRegistering ? (
-          <View style={styles.registeringContainer}>
-            <ActivityIndicator size="large" color={EStyleSheet.value('$primaryBlue')} />
-            <Text style={styles.registeringText}>
-              {intl.formatMessage({
-                id: 'register.registering',
-              })}
-            </Text>
-          </View>
-        ) : (
-          <ScrollView style={styles.productsWrapper}>
-            {!disableFree &&
-              _renderCard({
-                titleId: 'free_account.title',
-                descriptionId: 'free_account.desc',
-                
-                btnTitle: intl.formatMessage({ id: 'free_account.btn_register' }),
-                onPress: _handleOnPressRegister,
-              })}
-            {productList.map((product) =>
-              _renderCard({
-                titleId: 'buy_account.title',
-                descriptionId: 'buy_account.desc',
-                
-                btnTitle: intl.formatMessage(
-                  { id: 'buy_account.btn_register' },
-                  { price: product.localizedPrice },
-                ),
-                onPress: () => {
-                  setIsRegistering(true);
-                  buyItem(product.productId);
-                },
-              }),
-            )}
-          </ScrollView>
+            btnTitle: intl.formatMessage({ id: 'free_account.btn_register' }),
+            onPress: _handleOnPressRegister,
+          })}
+        {productList.map((product) =>
+          _renderCard({
+            titleId: 'buy_account.title',
+            descriptionId: 'buy_account.desc',
+
+            btnTitle: intl.formatMessage(
+              { id: 'buy_account.btn_register' },
+              { price: product.localizedPrice },
+            ),
+            onPress: () => {
+              setIsRegistering(true);
+              buyItem(product.productId);
+            },
+          }),
         )}
-      </View>
+      </ScrollView>
     );
   };
 
   const _renderContent = () => {
     return (
-      <InAppPurchaseContainer
-        skus={ITEM_SKUS}
-        username={username}
-        email={email}
-        isNoSpin
-        handleOnPurchaseSuccess={_handleOnPurchaseSuccess}
-        handleOnPurchaseFailure={_handleOnPurchaseFailure}
-      >
-        {({ buyItem, productList, isLoading }) => (
-          <SafeAreaView style={styles.container}>
-            {isLoading ? <BoostPlaceHolder /> : _renderRegisterOptions({ productList, buyItem })}
-          </SafeAreaView>
-        )}
-      </InAppPurchaseContainer>
+      <View style={styles.contentContainer}>
+        <View style={styles.headerContainer}>
+          <View>
+            {_renderUserInfo(username, styles.usernameStyle)}
+            {_renderUserInfo(email, styles.emailStyle)}
+          </View>
+          <Image style={styles.logoEstm} source={LOGO_ESTM} />
+        </View>
+        <InAppPurchaseContainer
+          skus={ITEM_SKUS}
+          username={username}
+          email={email}
+          isNoSpin
+          handleOnPurchaseSuccess={_handleOnPurchaseSuccess}
+          handleOnPurchaseFailure={_handleOnPurchaseFailure}
+        >
+          {({ buyItem, productList, isLoading }) => (
+            <SafeAreaView style={styles.container}>
+              {isLoading ? (
+                <PostCardPlaceHolder />
+              ) : (
+                _renderRegisterOptions({ productList, buyItem })
+              )}
+            </SafeAreaView>
+          )}
+        </InAppPurchaseContainer>
+      </View>
     );
   };
 

src/screens/register/registerScreen.js

@@ -127,6 +127,11 @@ const RegisterScreen = ({ navigation, route }) => {
     });
   };
 
+  const _onContinuePress = () => {
+    Keyboard.dismiss();
+    registerAccountModalRef.current?.showModal();
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar hidden translucent />
@@ -227,11 +232,11 @@ const RegisterScreen = ({ navigation, route }) => {
             })}
           />
           <MainButton
-            onPress={() => registerAccountModalRef.current?.showModal()}
+            onPress={_onContinuePress}
             iconName="arrow-forward"
             iconColor="white"
             iconPosition="right"
-            text="Continue"
+            text={intl.formatMessage({ id: 'alert.continue' })}
             isDisable={!isUsernameValid || !isRefUsernameValid || !isEmailValid}
             style={styles.mainButton}
           />

src/screens/register/styles/registerAccountModalStyles.tsx

@@ -105,7 +105,13 @@ export default EStyleSheet.create({
   registeringText:{
     fontWeight:'600',
     fontSize: 18,
-    marginTop:32
+    marginTop:16,
+    color: '$primaryBlack',
+    textAlign:'center',
+  },
+  actionButton:{
+    marginTop:44,
+    paddingHorizontal:16
   }
 
 });

yarn.lock

@@ -9173,6 +9173,11 @@ react-native-dynamic@^1.0.0:
     "@types/react-native" ">=0.62.0"
     toolkit.ts "^0.0.2"
 
+react-native-email-link@^1.14.3:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/react-native-email-link/-/react-native-email-link-1.14.3.tgz#188d501ab9cbbee9c6aa5d1190149b071f7c51d2"
+  integrity sha512-3biiaDKjJft6/13cYQkh/CmVae+pU7j+ThX7lFDu7eR6iRrMf9mTXyjejSboWr/M+xE34Vm0bKy8R1tXKjC2zQ==
+
 react-native-extended-stylesheet@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/react-native-extended-stylesheet/-/react-native-extended-stylesheet-0.10.0.tgz#bc77caf7494dcc67f681128dd8cb5e07dacef9dd"