react-native-timacare 1.0.0 → 1.0.2

package/src/screens/digital-lending/Step5.tsx

@@ -0,0 +1,350 @@
+//@ts-nocheck
+import React, { useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  TextInput,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  Back2Icon,
+  StepIcon,
+  NextIcon,
+  Line2Icon,
+  WarningIcon,
+} from '../../assets/icons';
+import { MText } from '../../components/MText';
+import { Formik } from 'formik';
+import digitalLendingStore from './store';
+import KeyboardSpacer from '../../components/keyboardspace';
+import { useNavigation } from '@react-navigation/native';
+
+export const Step5 = observer(function Step5() {
+  const navigation = useNavigation();
+  const ref = useRef(null);
+
+  const onSubmit = (values) => {
+    digitalLendingStore.body = {
+      ...digitalLendingStore.body,
+      bankId: values.bankId?.id,
+      bankAccountName: values?.bankAccountName,
+      bankAccountNumber: values?.bankAccountNumber,
+      bankBranch: values?.bankBranch,
+    };
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ paddingHorizontal: 12 }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 16,
+          }}
+        >
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: '#FF8E4F' }}>01</MText>
+          </View>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>02</MText>
+          </View>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>03</MText>
+          </View>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: '#FFF3E9',
+              borderWidth: 1,
+              borderColor: '#FF8E4F',
+            }}
+          >
+            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>04</MText>
+          </View>
+
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: 'white' }}>05</MText>
+          </LinearGradient>
+          <Line2Icon />
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              alignItems: 'center',
+              justifyContent: 'center',
+              shadowRadius: 40,
+              backgroundColor: 'white',
+              shadowOffset: {
+                width: 2,
+                height: 1,
+              },
+              ...Platform.select({
+                ios: {
+                  shadowColor: 'rgba(0, 0, 0, 0.10)',
+                  shadowOpacity: 0.2,
+                },
+                android: {
+                  elevation: 10,
+                },
+              }),
+            }}
+          >
+            <MText style={{ fontWeight: 'bold', color: '#333333' }}>06</MText>
+          </View>
+        </View>
+        <MText style={{ fontWeight: 'bold' }}>
+          THÔNG TIN SỐ TÀI KHOẢN NHẬN TIỀN
+        </MText>
+        <View
+          style={{ height: 1, backgroundColor: '#BDBDBD', marginTop: 16 }}
+        />
+        <View
+          style={{
+            backgroundColor: '#EB5757',
+            flexDirection: 'row',
+            padding: 8,
+            alignItems: 'center',
+            borderRadius: 8,
+            marginTop: 12,
+          }}
+        >
+          <WarningIcon />
+          <MText style={{ flex: 1, color: 'white', marginLeft: 8 }}>
+            Kiểm tra lại thông tin của bạn, nếu chưa chính xác hoặc đã cũ, hãy
+            cập nhật lại thông tin mới nhất nhé!
+          </MText>
+        </View>
+        <Formik
+          innerRef={ref}
+          onSubmit={onSubmit}
+          initialValues={{
+            bankAccountName: digitalLendingStore?.data?.bankAccountName,
+            bankId: digitalLendingStore?.data?.bankId
+              ? {
+                  id: digitalLendingStore.data?.bankId,
+                  name: digitalLendingStore.data?.bankName,
+                }
+              : null,
+            bankAccountNumber: digitalLendingStore?.data?.bankAccountNumber,
+            bankBranch: digitalLendingStore?.data?.bankBranch,
+          }}
+        >
+          {({ values, handleSubmit, handleChange, setFieldValue }) => (
+            <View style={{ marginVertical: 16 }}>
+              <View>
+                <MText style={{ color: '#8A8A8A' }}>Tên chủ thẻ</MText>
+                <TextInput
+                  value={values?.bankAccountName}
+                  onChangeText={handleChange('bankAccountName')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Ngân hàng</MText>
+                <TouchableOpacity
+                  onPress={() => {
+                    navigation.push('CommonSelect', {
+                      title: 'Ngân hàng',
+                      data: digitalLendingStore?.listBank,
+                      callback: (item) => {
+                        setFieldValue('bankId', item);
+                      },
+                    });
+                  }}
+                  style={{
+                    height: 30,
+                    flex: 1,
+                    marginTop: 5,
+                  }}
+                >
+                  <MText>{values.bankId ? values.bankId?.name : ''}</MText>
+                </TouchableOpacity>
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Số tài khoản</MText>
+                <TextInput
+                  keyboardType="number-pad"
+                  value={values.bankAccountNumber}
+                  onChangeText={handleChange('bankAccountNumber')}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
+              <View style={{ marginTop: 12 }}>
+                <MText style={{ color: '#8A8A8A' }}>Chi nhánh</MText>
+                <TextInput
+                  value={values.bankBranch}
+                  onChangeText={handleChange('bankBranch')}
+                  placeholder="Vui lòng điền chi nhánh ngân hàng"
+                  placeholderTextColor={'#BDBDBD'}
+                  style={{
+                    color: '#33333',
+                    height: 30,
+                    marginVertical: 0,
+                    flex: 1,
+                    padding: 0,
+                  }}
+                />
+              </View>
+              <KeyboardSpacer />
+            </View>
+          )}
+        </Formik>
+      </ScrollView>
+      <View
+        style={{
+          backgroundColor: 'white',
+          shadowOffset: {
+            width: 2,
+            height: 1,
+          },
+          ...Platform.select({
+            ios: {
+              shadowColor: 'rgba(0, 0, 0, 0.10)',
+              shadowOpacity: 0.2,
+            },
+            android: {
+              elevation: 10,
+            },
+          }),
+          paddingTop: 12,
+          paddingHorizontal: 12,
+          flexDirection: 'row',
+          paddingBottom: 16,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => (digitalLendingStore.step = 4)}
+          style={{
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            borderRadius: 40,
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderWidth: 1,
+            borderColor: '#FF8E4F',
+          }}
+        >
+          <Back2Icon />
+          <MText
+            style={{
+              marginLeft: 5,
+              color: '#FF8E4F',
+              fontSize: 16,
+              fontWeight: '500',
+            }}
+          >
+            Trở lại
+          </MText>
+        </TouchableOpacity>
+        <StepIcon />
+        <TouchableOpacity
+          onPress={() => {
+            digitalLendingStore.step = 6;
+            ref.current.handleSubmit();
+          }}
+        >
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              borderRadius: 40,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <MText
+              style={{
+                color: 'white',
+                fontSize: 16,
+                fontWeight: '500',
+                marginRight: 5,
+              }}
+            >
+              Tiếp tục
+            </MText>
+            <NextIcon />
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  input: {},
+});