@tima2025/react-native-timalender 1.0.0

package/src/screens/Sign-in/index.tsx

@@ -0,0 +1,510 @@
+//@ts-nocheck
+import MD5 from 'md5';
+import React, { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  ImageBackground,
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import LinearGradient from 'react-native-linear-gradient';
+import Modal from 'react-native-modal';
+import Pdf from 'react-native-pdf';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useDispatch, useSelector } from 'react-redux';
+import { LoginIcon } from '../../assets/icons';
+import IntroImages from '../../assets/images/Splash';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import { actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { setUserLogin, signIn } from '../../components/Features/user/userSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import { load, save, SECURITY } from '../../components/Storage/storage';
+import KeyboardSpacer from '../../components/keyboardspacer';
+import { setClientToken } from '../../controllers/Client';
+import { subscribeTopicFCM } from '../../utils/notification';
+
+export const SignIn = ({ navigation }: any) => {
+  const dispatch = useDispatch<AppDispatch>();
+  const isLoading = useSelector(selectLoading);
+  const [phone, setPhone] = useState(__DEV__ ? '0783329999' : '');
+  const [password, setPassword] = useState(__DEV__ ? 'htkd@2022' : '');
+  const [dataShop, setDataShop] = useState<any>(null);
+  const [remember, setRemember] = useState(true);
+  const [showPass, setShowPass] = useState(false);
+
+  const [isShow, setIsShow] = useState(false);
+  const [check, setCheck] = useState(false);
+
+  console.log('dataShop', dataShop);
+
+  const onLogin = async () => {
+    const params = {
+      phone,
+      password: MD5(password),
+    };
+    if (phone.trim() === '' || password.trim() === '') {
+      // WToastShowError(`Vui lòng nhập đầy đủ số điện thoại và mật khẩu!`);
+      showMessage({
+        message: 'Thông báo',
+        description: 'Vui lòng nhập đầy đủ số điện thoại và mật khẩu!',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    } else {
+      const res: any = await dispatch(signIn(params));
+      console.log('res login----:::', res);
+      console.log('res login----:::', JSON.stringify(res));
+      switch (res.payload.meta.errCode) {
+        case 200:
+          dispatch(setUserLogin(res?.payload?.data));
+          subscribeTopicFCM(phone);
+          // if (res?.payload?.data?.typeDisbursement === 'NA') {
+          //   subscribeTopicNotification(phone);
+          //   save('enable_notifications', true);
+          // }
+          if (
+            res.payload.data.shops !== undefined &&
+            res.payload.data.shops !== null
+          ) {
+            if (res.payload.data.shops.length > 0) {
+              if (remember) {
+                save('LOGIN', {
+                  phone,
+                  password,
+                });
+              }
+              console.log('--------------------------');
+              setClientToken(res.payload.data.accessToken);
+              setDataShop(res?.payload?.data);
+              // changeToken(res?.payload?.data?.shops[0]).then((res) => {
+              //   console.log('ahihi: ', res);}).catch((err) => {
+              //   console.log('err: ', err);});
+              res.data.shop = res?.payload?.data.shops[0];
+              console.log('after change login----:::', JSON.stringify(res));
+            }
+          }
+
+          break;
+        case 222:
+          // WToastShowError('Có lỗi xảy ra,vui lòng thử lại sau!');
+          showMessage({
+            message: 'Thông báo',
+            description: 'Có lỗi xảy ra,vui lòng thử lại sau!',
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          break;
+        case 223:
+          // WToastShowError('Bạn nhập sai mật khẩu!');
+          showMessage({
+            message: 'Thông báo',
+            description: 'Bạn nhập sai mật khẩu!',
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          break;
+        case 230:
+          // WToastShowError('Vui lòng thay đổi mật khẩu!');
+          showMessage({
+            message: 'Thông báo',
+            description: 'Vui lòng thay đổi mật khẩu!',
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          navigation.navigate(Screens.ForgotPassword);
+          break;
+        case 241:
+          // WToastShowError(res?.payload?.meta?.errMessage);
+          showMessage({
+            message: 'Thông báo',
+            description: res?.payload?.meta?.errMessage,
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          break;
+        case 404:
+          // WToastShowError('Số điện thoại chưa được đăng ký!');
+          showMessage({
+            message: 'Thông báo',
+            description: 'Số điện thoại chưa được đăng ký!',
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          break;
+        default:
+          // WToastShowError('Có lỗi xảy ra,vui lòng thử lại sau!');
+          showMessage({
+            message: 'Thông báo',
+            description: 'Có lỗi xảy ra,vui lòng thử lại sau!',
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          break;
+      }
+    }
+  };
+
+  // const changeToken = async (shop: any) => {
+  //   console.log('-=-=-=-=-=-=-=-=-=-=-=');
+  //   console.log('shop params:', shop);
+  //   const resp: any = await dispatch(ChangeToken({ shop_id: shop?.shopId }));
+  //   console.log('resp change token---:::', resp);
+  //   console.log('error Code: ', resp.payload.meta.errCode);
+  //   switch (resp.payload.meta.errCode) {
+  //     case 403:
+  //       // WToastShowError('Bạn không có quyền truy cập');
+  //       showMessage({
+  //         message: 'Thông báo',
+  //         description: 'Bạn không có quyền truy cập',
+  //         type: 'danger',
+  //         icon: 'warning',
+  //         backgroundColor: Colors.DANGER,
+  //       });
+  //       break;
+  //     case 401:
+  //       // WToastShowError('Vui lòng đăng nhập lại');
+  //       showMessage({
+  //         message: 'Thông báo',
+  //         description: 'Vui lòng đăng nhập lại',
+  //         type: 'danger',
+  //         icon: 'warning',
+  //         backgroundColor: Colors.DANGER,
+  //       });
+  //       break;
+  //     case 200:
+  //       dataShop.accessToken = resp.payload.data;
+  //       dataShop.regFromApp = shop.regFromApp;
+  //       dataShop.shop = shop;
+  //       console.log('================');
+  //       console.log('dataShop LOGIN: ', dataShop);
+  //       showMessage({
+  //         message: 'Thông báo',
+  //         description: 'Đổi token thành công',
+  //         type: 'success',
+  //         icon: 'success',
+  //         backgroundColor: Colors.SUCCESS,
+  //       });
+  //       dispatch(setUserLogin(dataShop));
+  //       break;
+  //     default:
+  //       break;
+  //   }
+  // };
+
+  const loadRemember = async () => {
+    await load('LOGIN').then((res) => {
+      if (res) {
+        setPassword(res.phone);
+        setPassword(res.password);
+      }
+    });
+  };
+
+  const getSecurity = async () => {
+    const security = await load(SECURITY);
+    if (!security) {
+      setIsShow(true);
+    }
+  };
+
+  useEffect(() => {
+    loadRemember();
+    getSecurity();
+  }, []);
+
+  return (
+    <Container>
+      <StatusBar barStyle="light-content" />
+      <ImageBackground source={IntroImages.splash} style={{ flex: 1 }}>
+        <SafeAreaView
+          style={{
+            backgroundColor: 'white',
+            marginTop: actuatedNormalize(48),
+            flex: 1,
+            borderTopLeftRadius: 30,
+            borderTopRightRadius: 30,
+          }}
+        >
+          <ScrollView>
+            <LoginIcon />
+            <View
+              style={{
+                paddingHorizontal: actuatedNormalize(16),
+              }}
+            >
+              <RText
+                style={{
+                  fontSize: 24,
+                  fontWeight: 'bold',
+                  textAlign: 'center',
+                  marginVertical: actuatedNormalize(16),
+                }}
+              >
+                Đăng nhập
+              </RText>
+              <View
+                style={[
+                  {
+                    paddingHorizontal: 16,
+                    paddingVertical: 8,
+                    borderRadius: 8,
+                    backgroundColor: 'white',
+                    shadowColor: '#000000',
+                    shadowOffset: {
+                      width: 1,
+                      height: 1,
+                    },
+                    shadowOpacity: 0.2,
+                    elevation: 2,
+                  },
+                ]}
+              >
+                <RText style={{ color: '#4F4F4F' }}>Số điện thoại/ Email</RText>
+                <TextInput
+                  style={styleCustoms.input}
+                  value={phone}
+                  onChangeText={(text: string) => setPhone(text)}
+                />
+              </View>
+              <View
+                style={[
+                  {
+                    paddingHorizontal: 16,
+                    paddingVertical: 8,
+                    borderRadius: 8,
+                    backgroundColor: 'white',
+                    shadowColor: '#000000',
+                    shadowOffset: {
+                      width: 1,
+                      height: 1,
+                    },
+                    shadowOpacity: 0.2,
+                    marginTop: actuatedNormalize(16),
+                    elevation: 4,
+                  },
+                ]}
+              >
+                <RText style={{ color: '#4F4F4F' }}>Mật khẩu</RText>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <TextInput
+                    secureTextEntry={!showPass}
+                    style={[styleCustoms.input, { flex: 1 }]}
+                    value={password}
+                    onChangeText={(text: string) => setPassword(text)}
+                  />
+                  <TouchableOpacity onPress={() => setShowPass(!showPass)}>
+                    {showPass ? (
+                      <Icon name="eye-off" size={20} color="#BDBDBD" />
+                    ) : (
+                      <Icon name="eye" size={20} color="#BDBDBD" />
+                    )}
+                  </TouchableOpacity>
+                </View>
+              </View>
+              <View
+                style={[
+                  {
+                    justifyContent: 'space-between',
+                    marginTop: 16,
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                  },
+                ]}
+              >
+                <View style={[{ alignItems: 'center', flexDirection: 'row' }]}>
+                  <TouchableOpacity onPress={() => setRemember(!remember)}>
+                    {remember ? (
+                      <Icon name="checkbox" size={24} color={Colors.ORANGE} />
+                    ) : (
+                      <Icon name="square-outline" size={24} color="#BDBDBD" />
+                    )}
+                  </TouchableOpacity>
+                  <RText
+                    style={{
+                      fontWeight: '300',
+                      color: '#4F4F4F',
+                      paddingLeft: actuatedNormalize(4),
+                    }}
+                  >
+                    Nhớ mật khẩu
+                  </RText>
+                </View>
+                <TouchableOpacity
+                  onPress={() => navigation.navigate(Screens.ForgotPassword)}
+                >
+                  <RText style={{ fontWeight: '300', color: '#4F4F4F' }}>
+                    Quên mật khẩu?
+                  </RText>
+                </TouchableOpacity>
+              </View>
+              <TouchableOpacity
+                style={{ marginTop: 16 }}
+                disabled={isLoading}
+                onPress={() => onLogin()}
+              >
+                <LinearGradient
+                  colors={['#FF8E4F', '#EF592E']}
+                  style={{
+                    height: 40,
+                    borderRadius: 30,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  {isLoading ? (
+                    <ActivityIndicator color={'white'} />
+                  ) : (
+                    <RText style={{ color: 'white', fontWeight: '600' }}>
+                      Đăng nhập
+                    </RText>
+                  )}
+                </LinearGradient>
+              </TouchableOpacity>
+            </View>
+            <KeyboardSpacer />
+          </ScrollView>
+
+          <FlexRow style={{ alignSelf: 'center' }}>
+            <RText>Bạn chưa có tài khoản ?</RText>
+            <TouchableOpacity
+              onPress={() => navigation.navigate(Screens.SignUp)}
+              style={{
+                marginLeft: 6,
+              }}
+            >
+              <RText
+                textStyle={{
+                  color: Colors.ORANGE,
+                }}
+              >
+                Đăng ký
+              </RText>
+            </TouchableOpacity>
+          </FlexRow>
+        </SafeAreaView>
+      </ImageBackground>
+      {/* {loading ? <Loading /> : <View />} */}
+      <Modal isVisible={isShow}>
+        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+          <View
+            style={{
+              alignItems: 'center',
+              paddingVertical: 16,
+              paddingHorizontal: 16,
+            }}
+          >
+            <RText style={{ fontWeight: '600', textAlign: 'center' }}>
+              ĐIỀU KHOẢN BẢO MẬT VÀ BẢO VỆ{'\n'} DỮ LIỆU CÁ NHÂN
+            </RText>
+          </View>
+          <View style={{ flex: 1 }}>
+            <Pdf
+              source={{
+                uri: 'https://upl.tima.vn/uploads/tima/TC.pdf',
+                cache: true,
+              }}
+              showsVerticalScrollIndicator={false}
+              style={{ flex: 1 }}
+              trustAllCerts={false}
+            />
+          </View>
+          <View style={{ alignItems: 'center', padding: 16 }}>
+            <View
+              style={{
+                height: 30,
+                width: '100%',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}
+            >
+              <TouchableOpacity onPress={() => setCheck(!check)}>
+                {check ? (
+                  <Icon name="checkbox" size={24} color={Colors.ORANGE} />
+                ) : (
+                  <Icon name="square-outline" size={24} color="#BDBDBD" />
+                )}
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{ flexDirection: 'row' }}
+                onPress={() => setCheck(!check)}
+              >
+                <RText
+                  style={{
+                    marginLeft: 10,
+                    color: '#1D1B1B',
+                    fontSize: 14,
+                    fontWeight: '400',
+                  }}
+                >
+                  Tôi đồng ý với các điều khoản của Tima
+                </RText>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity
+              disabled={!check}
+              style={{ width: '100%', marginTop: 16 }}
+              onPress={() => {
+                save(SECURITY, true);
+                setIsShow(false);
+              }}
+            >
+              <LinearGradient
+                style={{
+                  height: 40,
+                  borderRadius: 30,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                colors={check ? ['#FF7A00', '#EF4123'] : ['#BDBDBD', '#BDBDBD']}
+              >
+                <RText
+                  style={[
+                    {
+                      color: check ? 'white' : '#333333',
+                      textAlign: 'center',
+                      fontWeight: '600',
+                    },
+                  ]}
+                >
+                  {'xác nhận'.toUpperCase()}
+                </RText>
+              </LinearGradient>
+            </TouchableOpacity>
+          </View>
+        </SafeAreaView>
+      </Modal>
+    </Container>
+  );
+};
+
+const styleCustoms = StyleSheet.create({
+  input: {
+    fontWeight: 'bold',
+    color: '#333333',
+    fontSize: 16,
+    marginTop: 4,
+  },
+});

package/src/screens/Sign-in/styles.ts

@@ -0,0 +1,29 @@
+import { Dimensions, StyleSheet } from 'react-native';
+import Colors from '../../common/Colors';
+import { actuatedNormalize } from '../../common/Metrics';
+
+const styles = StyleSheet.create({
+  txtLogin: {
+    fontSize: 18,
+    borderBottomWidth: 1,
+    paddingBottom: actuatedNormalize(8),
+    borderColor: Colors.BORDER,
+    marginBottom: actuatedNormalize(32),
+    color: 'black',
+  },
+
+  logo: {
+    width: '100%',
+    height: Dimensions.get('window').width * 0.2,
+    resizeMode: 'contain',
+    marginBottom: actuatedNormalize(48),
+  },
+
+  btnForgot: {
+    marginTop: actuatedNormalize(16),
+    marginLeft: actuatedNormalize(16),
+    alignSelf: 'center',
+  },
+});
+
+export default styles;