complete forgot and reactivation smart otp

src/Screens/SmartOTP/EnterPasswordSmartOTP.js

@@ -6,12 +6,16 @@ import I18n from '../../helper/i18/i18n';
 import {connect} from 'react-redux';
 import {hideLoading, showLoading} from '../../actions/loadingAction';
 import {OTP_TYPE} from '../../Config/constants';
+import {useNavigation} from '@react-navigation/native';
+import {RESET_SMART_OTP} from '../../routers/ScreenNames';
 
 const EnterPasswordSmartOTP = (props) => {
     const [firstNumber, setFirstNumber] = useState(null);
     const [secondsNumber, setSecondsNumber] = useState(null);
     const [thirdNumber, setThirdNumber] = useState(null);
     const [fourNumber, setFourNumber] = useState(null);
+    const navigate = useNavigation();
+
     useEffect(() => {
         if (fourNumber) {
             onCheckPINSmartOTPPin();
@@ -61,11 +65,11 @@ const EnterPasswordSmartOTP = (props) => {
         }
     };
     const onReactivationSmartOTP = () => {
-
+        navigate.navigate(RESET_SMART_OTP, {title: 'ReactivationSmartOTP'})
     };
 
     const onForgotPINCode = () => {
-
+        navigate.navigate(RESET_SMART_OTP, {title: 'ForgotSmartOTP'})
     };
     return <EnterPasswordSmartOTPView
         firstNumber={firstNumber}

src/Screens/SmartOTP/ResetSmartOTP.js

+import React from 'react';
+import ResetSmartOTPView from './ResetSmartOTPView';
+import {connect} from 'react-redux';
+
+const ResetSmartOTP = (props) => {
+    return <ResetSmartOTPView
+        title={props.route.params.title}
+        companyInfo={props.user.company_info}/>;
+
+};
+const mapStateToProps = (state) => {
+    return {
+        user: state.userReducer,
+    };
+};
+export default connect(mapStateToProps, {})(
+    ResetSmartOTP,
+);
+

src/Screens/SmartOTP/ResetSmartOTPView.js

+import React, {useEffect, useState} from 'react';
+import {Linking, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+import AppText from '../../components/AppText';
+import {getFontXD, HEIGHTXD, WIDTHXD, callNumber} from '../../Config/Functions';
+import R from '../../assets/R';
+import I18n from '../../helper/i18/i18n';
+
+
+const ResetSmartOTPView = (props) => {
+    const [reRender, setReRender] = useState(false);
+    useEffect(() => {
+        setReRender(!reRender);
+    }, [props.companyInfo]);
+    return <View style={{flex: 1}}>
+        <HeaderBack title={props.title}/>
+        <View
+            style={{
+                flex: 1,
+                paddingHorizontal: WIDTHXD(50),
+                paddingTop: HEIGHTXD(40),
+            }}>
+            <Text>
+                <AppText i18nKey={'ResetSmartOTP'} style={styles.title}/>
+                <Text style={[styles.txtContent, {color: R.colors.main}]}
+                      onPress={() => callNumber(props.companyInfo?.hotline_call)}>
+                    {props.companyInfo?.hotline}
+                </Text>
+                <AppText i18nKey={'ResetSmartOTP2'} style={styles.title}/>
+            </Text>
+
+            <AppText i18nKey={'HaNoiOffice'} style={[styles.title, {color: R.colors.main, marginTop: HEIGHTXD(30)}]}/>
+            <Text style={styles.txtContent}>{props.companyInfo?.name}</Text>
+
+            <Text style={styles.txtContent}>{`${I18n.t('Address')} ${props.companyInfo?.address}`}</Text>
+
+            <View style={styles.row}>
+                <Text style={styles.title}>Email:</Text>
+                <TouchableOpacity
+                    onPress={async () => {
+                        const supported = await Linking.openURL(`mailto:${props.companyInfo?.email}`);
+                        if (supported) {
+                            Linking.openURL(`mailto:${props.companyInfo?.email}`);
+                        }
+                    }}>
+                    <Text style={styles.txtLink}> {props.companyInfo?.email}</Text>
+                </TouchableOpacity>
+            </View>
+            <TouchableOpacity
+                onPress={async () => {
+                    const supported = await Linking.canOpenURL(props.companyInfo?.website);
+                    if (supported) {
+                        Linking.openURL(props.companyInfo?.website);
+                    }
+                }}>
+                <View style={styles.row}>
+                    <Text style={styles.title}>Website: </Text>
+                    <Text style={styles.txtLink}>{props.companyInfo?.website}</Text>
+                </View>
+            </TouchableOpacity>
+
+        </View>
+    </View>;
+
+};
+const styles = StyleSheet.create({
+    title: {
+        fontSize: getFontXD(42),
+        color: R.colors.black,
+        marginTop: 5,
+    },
+    txtContent: {
+        fontSize: getFontXD(42),
+        marginTop: 5,
+    },
+    txtLink: {
+        fontSize: getFontXD(42),
+        marginTop: 5,
+        textDecorationLine: 'underline',
+        color: R.colors.main,
+    },
+    row: {
+        flexDirection: 'row',
+    },
+});
+export default ResetSmartOTPView;

src/helper/i18/locales/en.js

@@ -314,4 +314,7 @@ export default {
   ConfirmPassGetSmartOTP: 'Confirm password get Smart OTP',
 
   PopupSettingSmartOTP: 'Do you want setting Smart OTP?',
+  ResetSmartOTP: 'To ensure safety during application use, please contact the operator: ',
+  ResetSmartOTP2: ' press 3 to meet technical support staff.',
+  ForgotSmartOTP: 'Forgot Smart OTP',
 };

src/helper/i18/locales/vn.js

@@ -315,4 +315,8 @@ export default {
   ConfirmPassGetSmartOTP: 'Xác nhận mật khẩu lấy Smart OTP ',
 
   PopupSettingSmartOTP: 'Bạn có muốn cài đặt Smart OTP?',
+  ResetSmartOTP: 'Để đảm bảo an toàn trong quá trình sử dụng ứng dụng, bạn vui lòng liên hệ đến tổng đài: ',
+  ResetSmartOTP2: ' bấm phím 3 để gặp nhân viên hỗ trợ kỹ thuật.',
+  ForgotSmartOTP: 'Quên Smart OTP',
+
 };

src/routers/ScreenNames.js

@@ -84,3 +84,4 @@ export const SMARTOTPCONFIG = 'SMARTOTPCONFIG';
 export const UPDATEOTP = 'UPDATEOTP';
 
 export const CONFIRMOTPSMART = 'CONFIRMOTPSMART';
+export const RESET_SMART_OTP = 'RESET_SMART_OTP';

src/routers/StackNavigation.js

@@ -68,6 +68,7 @@ import * as ScreenName from './ScreenNames';
 const Stack = createStackNavigator();
 
 import {enableScreens} from 'react-native-screens';
+import ResetSmartOTP from '../Screens/SmartOTP/ResetSmartOTP';
 
 enableScreens();
 
@@ -164,6 +165,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.PRODUCTDETAIL} component={ProductDetail} />
       <Stack.Screen name={ScreenName.SMARTOTP} component={SmartOTP} />
       <Stack.Screen name={ScreenName.ENTER_PASSWORD_SMART_OTP} component={EnterPasswordSmartOTP} />
+      <Stack.Screen name={ScreenName.RESET_SMART_OTP} component={ResetSmartOTP} />
 
       <Stack.Screen
         name={ScreenName.FORGOTPASSWORD}