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

/**
 * 带OTP的注册页面
 * @邠心vbe on 2023/02/06
 */
import React from 'react';
import { View, Text, ScrollView, StyleSheet, TextInput, Pressable, Image } from 'react-native';
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 { host } from '../../api/http';
import { ModalProps } from '../../components/BottomModal';
import { CountryDropCode, CountryDropNum, GetCountryList } from '../../components/CountryIcon';
import StrengthView from './StrengthView';
import CheckBox from '../../components/CheckBox';
import { UploadThemes } from '../../components/ThemesConfig';
import TextView from '../../components/TextView';

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 RegisterV4 extends React.Component {
  constructor(props) {
    super(props);
    this.StrengthView = StrengthView.V4
    this.state = {
      agree: true,
      strength: 0,
      countryNum: '65',
      countryCode: "SG",
      userInfo: {
        email: "",
        verificationCode: ""
      },
      countryList: [],
      wrongCount: 0,
      params: {...this.props.route.params},
      email: '',
      password: '',
      fleetCompanyId: '',
      sendMinutes: 0,
      isFleetDriver: false,
      pdvImages: ['', ''],
      companyList: []
    };
    this.canChangeCalling = true;
  }

  componentDidMount() {
    //console.log(this.state.params);
    if (this.state.params.isFleetUser) {
      this.setState({
        isFleetDriver: true
      })
      this.props.navigation.setOptions({
        headerTitle: $t('route.driverRegister')
      })
    }
    this.getCountryList();
    this.getCompanyList();
  }

  applyStrength(text) {
    this.StrengthView.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
    });
  }

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

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

  sendVerification() {
    var info = this.state.userInfo;
    if (!info.email) {
      toastShort($t('sign.plsInputEmail'));
      return;
    }
    if (!/^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/.test(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      return;
    }
    Dialog.showProgressDialog()
    apiUser.sendVerificationCodeV2({email: info.email, type: "register"}).then(res => {
      Dialog.dismissLoading()
      //this.state.sendMinutes = 60;
      this.state.sendMinutes = res.data?.resendTime ?? 60;
      toastShort($t('sign.sendOTPSuccess'));
      this.contdownTime();
    }).catch(err => {
      Dialog.dismissLoading()
      toastShort(err);
    });
  }

  contdownTime() {
    if (this.state.sendMinutes > 0) {
      this.setState({
        sendMinutes: this.state.sendMinutes - 1
      })
      setTimeout(() => {
        this.contdownTime();
      }, 1000);
    }
  }

  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 (!/^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/.test(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      return;
    }
    if (!info.verificationCode) {
      toastShort($t('sign.plsInputOTP'));
      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 < this.StrengthView.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;
    param.countryCode = this.state.countryCode;
    if (this.state.isFleetDriver) {
      param.userType = 'Driver';
      param.pdvLicencePictures = this.state.pdvImages;
      param.fleetCompanyId = this.state.fleetCompanyId;
    } else {
      param.userType = 'Public';
    }
    param.otp = param.verificationCode;
    console.log('params', param);
    Dialog.showProgressDialog();
    apiUser.register(param).then(res => {
      Dialog.dismissLoading();
      //toastShort('Sign up successfully!');
      if (isIOS) {
        setTimeout(() => {
          this.showSuccessDialog();
        }, 600);
      } else {
        this.showSuccessDialog();
      }
    }).catch(err => {
      toastShort(err);
      Dialog.dismissLoading();
    });
  }

  showSuccessDialog() {
    Dialog.showResultDialog($t('sign.signUpSuccess'), $t('nav.ok'),
      () => {
        this.backToLogin();
      }
    )
  }
  
  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
    })
  }

  changeCountry(value, index) {
    this.setState({
      countryCode: value
    })
    if (this.canChangeCalling) {
      const country = this.state.countryList[index]
      this.changeCalling(country.countryNum, -1);
    }
  }

  changeCalling(value, index) {
    this.setState({
      countryNum: value
    })
    if (index >= 0) {
      this.canChangeCalling = false;
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.scollView}
          keyboardShouldPersistTaps={'handled'}>
          <View style={styles.signView}>
            {/* <View style={styles.tabView}>
              <Text 
                style={[
                  styles.tabText, 
                  this.state.isFleetDriver ? {} : styles.tabActive
                ]}
                onPress={() => this.changeTab(false)}
              >Public Users</Text>
              <Text
                style={[
                  styles.tabText,
                  this.state.isFleetDriver ? styles.tabActive: {}
                ]}
                onPress={() => this.changeTab(true)}
              >Fleet/PH Drivers</Text>
            </View> */}
            <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}
                keyboardType="email-address"
                textContentType='emailAddress'
                onChangeText={v => this.changeInfo('email', v)}
              />
            </View>
            <View style={styles.signInput}>
              <TextView style={[styles.inputLabel, {flex: 2}]}>{$t('sign.labelValidateEmail')}</TextView>
              <TextInput
                style={[styles.inputView, {flex: 2.2, marginLeft: 2}]}
                placeholder={$t('sign.labelOtp')}
                placeholderTextColor={textPlacehoder}
                maxLength={6}
                keyboardType="number-pad"
                textContentType="telephoneNumber"
                onChangeText={v => this.changeInfo('verificationCode', v)}
              />
              <Button
                text={this.state.sendMinutes > 0 ? (this.state.sendMinutes + " s") : $t('sign.btnSendOTP')}
                style={styles.sendBtn}
                disabled={this.state.sendMinutes > 0}
                viewStyle={styles.sendBtnView}
                textStyle={styles.sendBtnText}
                onClick={() => this.sendVerification()}
              />
            </View>
            <View style={styles.signInput}>
              <TextView style={styles.inputLabel}>{$t('sign.labelCountry')}</TextView>
              <Dropdown
                style={styles.selectView}
                title={$t('sign.labelCountry')}
                list={this.state.countryList}
                value={this.state.countryCode}
                nameKey='countryName'
                valueKey='countryCode'
                iconColor={colorDark}
                onChange={(value, index)=> this.changeCountry(value, index)}
                customerItemView={
                  (item, index, onClick) => 
                  <CountryDropCode
                    key={index} 
                    country={item}
                    value={this.state.countryCode}
                    onClick={onClick}/>
                }/>
            </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}
                    prefixText="+"
                    list={this.state.countryList}
                    value={this.state.countryNum}
                    nameKey='countryNum'
                    valueKey='countryNum'
                    onChange={(value, index)=> this.changeCalling(value, index)}
                    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}>
                <this.StrengthView.VIEW strength={this.state.strength}/>
              </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}>
              <Text style={styles.referTitle}>Have a referral code?</Text>
              <View style={styles.referText}>
                <Text>You'll get</Text>
                <Text style={styles.weight}>$5</Text>
                <Text>Credit as registration bonus!</Text>
              </View>
              <View style={styles.codeView}>
                <Text style={{ color: textPrimary, fontSize: 16 }}>Referral Code</Text>
                <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>
      </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: host + url}}/>
    }
  </Pressable>
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  header: {
    paddingTop: 56,
    backgroundColor: colorAccent
  },
  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: {
    paddingTop: 32,
    paddingBottom: 56,
    alignItems: 'center'
  },
  logoImg: {
    width:165.09,
    height: 51.94,
  },
  signView: {
    flex: 1,
    padding: 16,
    //marginTop: -30,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    backgroundColor: colorLight
  },
  tabView: {
    marginBottom: 4,
    borderWidth: 1,
    borderRadius: 6,
    overflow: 'hidden',
    alignItems: 'center',
    flexDirection: 'row',
    borderColor: colorAccent,
  },
  tabText: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    textAlign: 'center',
    ...$padding(10, 0),
  },
  tabActive: {
    fontWeight: 'bold',
    backgroundColor: colorAccent
  },
  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'
  },
  selectView: {
    flex: 2,
    fontSize: 14,
    borderRadius: 5,
    minHeight: 40,
    paddingTop: 6,
    paddingLeft: 12,
    paddingRight: 6,
    paddingBottom: 6,
    alignItems: 'center',
    flexDirection: 'row',
    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,
  },
  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'
  },
  sendBtn: {
    flex: 1.8,
    marginLeft: 6,
    marginRight: 0,
    borderRadius: 6
  },
  sendBtnView: {
    flex: 1,
    height: 40,
    paddingLeft: 4,
    paddingRight: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  sendBtnText: {
    color: colorLight,
    fontSize: 13,
    fontWeight: 'bold'
  },
});