ChargEco/Strides-APP/app/pages/sign/RegisterV2.js

/**
 * 带Public和PHV切换的注册页面V2
 * @邠心vbe on 2023/02/01
 */
import React from 'react';
import { View, ScrollView, StyleSheet, TextInput, Pressable, Image } from 'react-native';
import { BackButton, Styles } from '../../components/Toolbar';
import apiUser from '../../api/apiUser';
import Button from '../../components/Button';
import { PageList } from '../Router';
import Dialog from '../../components/Dialog';
import Modal from 'react-native-modal';
import { RegisterDialog } from '../charge/InfoDialog';
import Dropdown from '../../components/Dropdown';
import ImagePicker from 'react-native-image-crop-picker';
import apiUpload from '../../api/apiUpload';
import { ModalProps } from '../../components/BottomModal';
import { CountryDropNum, GetCountryList } from '../../components/CountryIcon';
import StrengthView from './StrengthView';
import CheckBox from '../../components/CheckBox';
import { UploadThemes } from '../../components/ThemesConfig';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

const options = {
  width: 300,
  height: 200,
  cropping: true,
  multiple: false,
  mediaType: 'photo',
  writeTempFile: false,
  compressImageQuality: 0.8,
  compressImageMaxWidth: 720,
  compressImageMaxHeight: 1280,
  ...UploadThemes
}

export default class RegisterV2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      agree: true,
      strength: 0,
      countryNum: '65',
      countryShow: false,
      userInfo: {
        email: ""
      },
      countryNums: [],
      wrongCount: 0,
      params: {...this.props.route.params},
      email: '',
      password: '',
      fleetCompanyId: '',
      visible: false,
      isFleetDriver: false,
      pdvImages: ['', ''],
      companyList: []
    };
  }

  componentDidMount() {
    //console.log(this.state.params);
    this.getCountryList();
    this.getCompanyList();
  }

  applyStrength(text) {
    StrengthView.V4.apply(text, strength => {
      if (this.state.strength != strength) {
        this.setState({
          password: text,
          strength: strength
        });
      } else {
        this.setState({
          password: text
        });
      }
    });
  }

  changeInfo(key, value) {
    var info = this.state.userInfo;
    info[key] = value;
    this.setState({
      'userInfo': info
    });
  }

  changeTab(type) {
    this.setState({
      isFleetDriver: type
    })
  }

  getCountryList() {
    GetCountryList(list => {
      this.setState({
        countryNums: list
      })
    })
  }

  getCompanyList() {
    apiUser.getConmpany().then(res => {
      if (res.data) {
        this.setState({
          companyList: res.data
        })
      }
    }).catch(err => [
      toastShort(err)
    ])
  }

  onRegister() {
    //console.log('sign up', this.state);
    var info = this.state.userInfo;
    if (!info.nickName) {
      toastShort($t('sign.plsInputDiaplayName'));
      return;
    }
    if (!info.email) {
      toastShort($t('sign.plsInputEmail'));
      return;
    }
    if (!utils.isValidEmail(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      return;
    }
    if (!info.phone) {
      toastShort($t('sign.plsInputContactNo'));
      return;
    }
    if (!/^\d{6,15}$/.test(info.phone)) {
      toastShort($t('sign.errContactNoFormat'));
      return;
    }
    if (!this.state.password) {
      toastShort($t('sign.plsInputPassword'));
      return;
    }
    if (this.state.strength < StrengthView.V4.maxStrength) {
      toastShort($t('sign.errPasswordStrong'));
      return;
    }
    if (!info.password) {
      toastShort($t('sign.plsInputPassword2'));
      return;
    }
    if (info.password != this.state.password) {
      toastShort($t('sign.errPasswordConfirm'));
      if (this.state.wrongCount < 3) {
        this.setState({
          wrongCount: this.state.wrongCount + 1
        })
      }
      return;
    }
    if (this.state.isFleetDriver) {
      if (!info.pdvLicence) {
        toastShort($t('sign.plsInputPDVLicence'));
        return;
      }
      if (this.state.pdvImages[0] == '' || this.state.pdvImages[1] == '') {
        toastShort($t('sign.plsUploadLicencePhotos'));
        return;
      }
    }
    let param = Object.assign({}, info);
    //param.phone = this.state.countryNum + info.phone
    param.callingCode = this.state.countryNum;
    if (this.state.isFleetDriver) {
      param.userType = 'Driver';
      param.pdvLicencePictures = this.state.pdvImages;
      param.fleetCompanyId = this.state.fleetCompanyId;
    } else {
      param.userType = 'Public';
    }
    console.log('params', param);
    Dialog.showProgressDialog();
    apiUser.register(param).then(res => {
      Dialog.dismissLoading();
      //toastShort('Sign up successfully!');
      if (isIOS) {
        setTimeout(() => {
          this.setState({
            email: param.email,
            visible: true
          });
        }, 500);
      } else {
        this.setState({
          email: param.email,
          visible: true
        });
      }
      //this.backToLogin();
    }).catch(err => {
      toastShort(err);
      Dialog.dismissLoading();
    });
  }
  
  getBackTopPosition() {
    return isIOS ? statusHeight - 16 : 8;
  }
  
  backToLogin() {
    if (this.state.params.actionLogin) {
      goBack()
      startPage(PageList.login);
    } else {
      goBack();
    }
  }

  uploadImage(index) {
    ImagePicker.openPicker({
      ...options,
      cropperToolbarTitle: $t('common.cropperTitle')
    }).then(image => {
      if (image.path) {
        apiUpload.uploadImage(image.path, image.mime, 'PDVL').then(res => {
          if (res.success && res.data.picturePath) {
            let imageUrl = this.state.pdvImages;
            imageUrl[index] = res.data.picturePath;
            this.setState({
              pdvImages: imageUrl
            });
            toastShort($t('common.uploadSuccess'));
          } else {
            toastShort($t('common.updateFailed'));
          }
        }).catch(err => {
          toastShort(err);
        });
      }
    }).catch(err1 => {
      //console.log(err1);
    });
  }

  changeAgree(ag) {
    this.setState({
      agree: ag
    })
  }

  hideDialog() {
    this.setState({
      visible: false
    });
    this.backToLogin();
  }

  render() {
    return (
      <View style={ui.container}>
        <View style={Styles.toolbar}>
          <BackButton/>
          <View style={styles.logoView}>
            <Image
              source={require('../../images/app-logo.png')}
              style={Styles.logo}
              resizeMode='contain'
            />
          </View>
        </View>
        <ScrollView
          style={styles.scollView}
          keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}>
          <View style={styles.signView}>
            <View style={styles.tabView}>
              <TextView 
                style={[
                  styles.tabText, 
                  this.state.isFleetDriver ? {} : styles.tabActive
                ]}
                onPress={() => this.changeTab(false)}
              >Public Users</TextView>
              <TextView
                style={[
                  styles.tabText,
                  this.state.isFleetDriver ? styles.tabActive: {}
                ]}
                onPress={() => this.changeTab(true)}
              >Fleet/PH Drivers</TextView>
            </View>
            {/* <Text style={styles.title}>Registration</Text> */}
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}>{$t('sign.labelDisplayName')}</TextView>
              <TextInput
                style={styles.inputView} 
                placeholder={$t('sign.labelDisplayName')}
                placeholderTextColor={textPlacehoder}
                maxLength={50}
                onChangeText={v => this.changeInfo('nickName', v)}
              />
            </View>
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}>{$t('sign.labelEmail')}</TextView>
              <TextInput
                style={styles.inputView}
                placeholder={$t('sign.labelEmail')}
                placeholderTextColor={textPlacehoder}
                maxLength={50}
                onChangeText={v => this.changeInfo('email', v)}
              />
            </View>
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}>{$t('sign.labelPhoneNumber')}</TextView>
              <View style={styles.mobileView}>
                <View style={styles.dropView}>
                  <TextInput style={styles.dropInput} editable={false}/>
                  <TextView style={styles.countryText}>{"+" + this.state.countryNum}</TextView>
                  <MaterialIcons name={'arrow-drop-down'} size={24} color={colorDark}/>
                  <Dropdown
                    style={styles.dropLayer}
                    title={$t('sign.labelCountry')}
                    prefixText="+"
                    list={this.state.countryNums}
                    value={this.state.countryNum}
                    nameKey='countryNum'
                    valueKey='countryNum'
                    onChange={(value, index)=> {
                      this.setState({
                        countryNum: value
                      })
                    }}
                    customerItemView={
                      (item, index, onClick) => 
                      <CountryDropNum
                        key={index} 
                        country={item}
                        value={this.state.countryNum}
                        onClick={onClick}/>
                    }/>
                </View>
                <TextInput
                  style={styles.contactView}
                  placeholder={$t('sign.labelMobileNumber')}
                  placeholderTextColor={textPlacehoder}
                  keyboardType='phone-pad'
                  maxLength={15}
                  onChangeText={v => this.changeInfo('phone', v)}
                />
              </View>
            </View>
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}>{$t('sign.labelCreatePassword')}</TextView>
              <TextInput
                secureTextEntry={this.state.wrongCount < 3}
                style={styles.inputView}
                placeholder={$t('sign.labelPassword')}
                placeholderTextColor={textPlacehoder}
                maxLength={20}
                onChangeText={(value) => {
                  this.applyStrength(value);
                }}
              />
            </View>
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}></TextView>
              <View style={styles.passwordView}>
                <StrengthView.V4.VIEW {...this.state}/>
              </View>
            </View>
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}>{$t('sign.labelConfirmPassword')}</TextView>
              <TextInput
                secureTextEntry={this.state.wrongCount < 3}
                style={styles.inputView}
                placeholder={$t('sign.labelPassword')}
                placeholderTextColor={textPlacehoder}
                maxLength={20}
                onChangeText={v => this.changeInfo('password', v)}
              />
            </View>
            { this.state.isFleetDriver &&
              <>
              <View style={styles.signInput}>
                <TextView style={styles.inputLabel}>{$t('sign.labelYourCompany')}</TextView>
                <Dropdown
                  style={[styles.inputView, ui.flexc]}
                  title={$t('sign.labelCompany')}
                  list={this.state.companyList}
                  value={this.state.fleetCompanyId}
                  valueKey='fleetCompanyId'
                  nameKey='fleetCompanyName'
                  onChange={(value, index)=> {
                    this.setState({
                      fleetCompanyId: value
                    })
                  }}/>
              </View>
              <View style={styles.signInput}>
                <TextView style={styles.inputLabel}>{$t('sign.labelPDVLicence')}</TextView>
                <TextInput
                  style={styles.inputView}
                  placeholder={$t('sign.hintPDVLicence')}
                  placeholderTextColor={textPlacehoder}
                  maxLength={20}
                  onChangeText={v => this.changeInfo('pdvLicence', v)}
                />
              </View>
              <View style={styles.signInput}>
                <TextView style={styles.inputLabel}>{$t('sign.labelPDVPhotos')}</TextView>
                <View style={styles.uploadGroup}>
                  { this.state.pdvImages.map((item, index) => (
                    <UploadView
                      key={index}
                      onPress={() => this.uploadImage(index)}
                      url={item}/>
                    )) 
                  }
                </View>
              </View>
              </>
            }
            <View style={styles.referView}>
              <TextView style={styles.referTitle}>Have a referral code?</TextView>
              <View style={styles.referText}>
                <TextView>You'll get</TextView>
                <TeTextViewxt style={styles.weight}>$5</TeTextViewxt>
                <TextView>Credit as registration bonus!</TextView>
              </View>
              <View style={styles.codeView}>
                <TextView style={{ color: textPrimary, fontSize: 16 }}>Referral Code</TextView>
                <TextInput
                  style={styles.codeText}
                  maxLength={6}
                  placeholder='Referral Code'
                  placeholderTextColor={textPlacehoder}
                  onChangeText={v => this.changeInfo('referralCode', v)}
                />
              </View>
            </View>
            <View style={styles.agreeView}>
              <CheckBox
                value={this.state.agree}
                onValueChange={v => this.changeAgree(v)}
              />
              <View style={styles.agreeTextRow}>
                <TextView style={styles.agreeText} onPress={() => this.changeAgree(!this.state.agree)}>
                  {$t('sign.iHaveReadAndAgree')}
                </TextView>
                <TextView style={styles.agreeLink} onPress={() => startPage(PageList.condition)}>{$t('drawer.termsOfUse')}</TextView>
                <TextView style={styles.agreeText}>{' '}</TextView>
                <TextView style={styles.agreeText}>{$t('sign.linkAndLink')}</TextView>
                <TextView style={styles.agreeLink} onPress={() => startPage(PageList.privacy)}>{$t('drawer.privacyPolicy')}</TextView>
                <TextView style={styles.agreeText}>{$t('sign.linkAndLinkEnd')}</TextView>
              </View>
            </View>
            <Button
              style={styles.signButton}
              elevation={1.5}
              disabled={!this.state.agree}
              text={$t('sign.btnSignUp')}
              fontSize={14}
              onClick={() => {
                this.onRegister();
              }}
            />
          </View>
        </ScrollView>
        <Modal
          isVisible={this.state.visible}
          onBackButtonPress={() => this.hideDialog()}
          {...ModalProps}>
          <RegisterDialog
            address={this.state.email}
            onClose={() => this.hideDialog()}
          />
        </Modal>
      </View>
    );
  }
}

const UploadView = ({url, onPress}) => (
  <Pressable
    style={styles.uploadView}
    onPress={onPress}>
    { url == ''
    ? <Image
        style={styles.uploadIcon}
        source={require('../../images/icon/ic-add-photo.png')}/>
    : <Image
        style={styles.uploadIcon}
        defaultSource={require('../../images/icon/icon-upload-default.png')}
        source={{uri: utils.getImageUrl(url)}}/>
    }
  </Pressable>
)

const styles = StyleSheet.create({
  header: {
    paddingTop: 56,
    backgroundColor: colorThemes
  },
  backView: {
    top: 12,
    zIndex: 5,
    padding: 16,
    position: 'absolute',
    flexDirection: 'row'
  },
  backButton: {
    borderRadius: 60,
    backgroundColor: colorLight
  },
  backButtonView: {
    height: 43,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  scollView: {
    flex: 1
  },
  logoView: {
    flex: 1,
    paddingRight: 48,
    alignItems: 'center',
    justifyContent: 'center'
  },
  logoImg: {
    width:165.09,
    height: 51.94,
  },
  signView: {
    flex: 1,
    padding: 16,
    marginTop: 0,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    backgroundColor: colorLight
  },
  tabView: {
    marginBottom: 4,
    borderWidth: 1,
    borderRadius: 60,
    overflow: 'hidden',
    alignItems: 'center',
    flexDirection: 'row',
    borderColor: colorPrimary,
  },
  tabText: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    textAlign: 'center',
    ...$padding(10, 0),
  },
  tabActive: {
    color: textLight,
    fontWeight: 'bold',
    backgroundColor: colorPrimary
  },
  title: {
    color: textPrimary,
    fontSize: 18,
    fontWeight: '700',
    paddingTop: 4,
    paddingBottom: 6,
  },
  signInput: {
    marginTop: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  inputLabel: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
    marginRight: 4
  },
  inputView: {
    flex: 2,
    color: textPrimary,
    fontSize: 14,
    borderRadius: 5,
    minHeight: 40,
    paddingTop: 6,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 6,
    backgroundColor: '#F5F5F5'
  },
  mobileView: {
    flex: 2,
    marginLeft: -12,
    alignItems: 'center',
    flexDirection: 'row'
  },
  dropView: {
    fontSize: 16,
    borderRadius: 4,
    paddingRight: 4,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F5F5F5'
  },
  dropInput: {
    width: 12,
    padding: 6,
    color: textPrimary,
    minHeight: 40,
  },
  countryText: {
    color: textPrimary,
    fontSize: 14,
    paddingRight: 4
  },
  dropLayer: {
    left: 0,
    right: 0,
    opacity: 0,
    position: 'absolute'
  },
  contactView: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    borderRadius: 4,
    minHeight: 40,
    paddingTop: 6,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 6,
    marginLeft: 10,
    backgroundColor: '#F5F5F5'
  },
  passwordView: {
    flex: 2,
    marginTop: -8,
  },
  strengthView: {
    marginTop: -4,
    alignItems: 'center',
    paddingBottom: 4,
    flexDirection: 'row'
  },
  passwordRole: {
    color: '#999',
    fontSize: 10,
    lineHeight: 13
  },
  strengthItem: {
    width: 14,
    height: 2.5,
    marginLeft: 8,
    borderRadius: 3,
    backgroundColor: '#CCC'
  },
  referView: {
    padding: 16,
    marginTop: 24,
    borderRadius: 6,
    alignItems: 'center',
    backgroundColor: '#F5F5F5'
  },
  referTitle: {
    color: textPrimary,
    fontSize: 18,
    fontWeight: 'bold'
  },
  referText: {
    color: textPrimary,
    paddingTop: 4,
    alignItems: 'flex-end',
    flexDirection: 'row'
  },
  weight: {
    fontSize: 18,
    paddingLeft: 4,
    paddingRight: 4,
    color: colorAccent,
    fontWeight: 'bold'
  },
  codeView: {
    paddingTop: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  codeText: {
    color: textPrimary,
    fontSize: 16,
    paddingTop: 6,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 6,
    minHeight: 40,
    marginLeft: 16,
    borderRadius: 6,
    textAlign: 'center',
    backgroundColor: colorLight
  },
  signButton: {
    marginTop: 24,
    marginBottom: 8,
  },
  uploadGroup: {
    flex: 2,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  uploadView: {
    flex: 1,
    alignItems: 'center'
  },
  uploadIcon: {
    width: $vw(28),
    height: $vw(28),
    borderRadius: 6
  },
  agreeView: {
    marginTop: 24,
    marginBottom: 16,
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  agreeTextRow: {
    flex: 1,
    paddingTop: 4,
    paddingLeft: 8,
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  agreeText: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 2,
    paddingBottom: 2
  },
  agreeLink: {
    ...ui.link,
    fontSize: 14,
    paddingTop: 2,
    paddingBottom: 2,
    textDecorationLine: 'underline'
  }
});