ChargEco/Strides-APP/app/pages/my/ProfileV2.js

/**
 * Profile Settings页面
 * @邠心vbe on 2021/04/27
 */
import React, { Component } from 'react';
import { View, StyleSheet, Image, ScrollView } from 'react-native';
import apiUser from '../../api/apiUser';
import { setAccessToken } from '../../api/http';
import Button, { ElevationObject } from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
import utils from '../../utils/utils';
import { PageList } from '../Router';
import app from '../../../app.json';

export default class ProfileV2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: userInfo,
      refreshId: 0,
      totalVehicle: 0
    };
  }

  componentDidMount() {
    this.init();
    this.props.navigation.addListener('focus', () => {
      this.init();
    });
  }

  init() {
    getUserInfo(info => {
      this.setState({
        userInfo: info,
        refreshId: this.state.refreshId + 1
      });
    }, true);
  }

  deleteAccount() {
    Dialog.showDialog({
      title: $t('profile.deleteAccount'),
      message: $t('profile.confirmDeleteAccount'),
      ok: $t('nav.confirm'),
      callback: button => {
        if (button == Dialog.BUTTON_OK) {
          this.deleteMyAccount();
        }
      }
    })
  }

  deleteMyAccount() {
    Dialog.showProgressDialog();
    apiUser.deleteAccount().then(res => {
      toastShort($t('profile.deleteAccountSuccess'))
      Dialog.dismissLoading();
      this.requestLogout();
      /*setTimeout(() => {
        startPage(PageList.login);
      }, 500);*/
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err)
    })
  }

  logout() {
    Dialog.showDialog({
      title: $t('profile.signOut'),
      message: $t('profile.tipSignOut'),
      callback: btn => {
        if (btn == Dialog.BUTTON_OK) {
          Dialog.showProgressDialog();
          setTimeout(() => {
            this.requestLogout();
          }, 500);
        }
      }
    })
  }

  async requestLogout() {
    const data = await getStorageJsonSync('loginData');
    if (data && data.email) {
      delete data.password
      setStorageJson('loginData', data);
      setStorage('RegisterTokenDate', "");
    }
    global.userInfo = {}
    /*this.setState({
      isLogin: false,
      userInfo: {}
    });*/
    setAccessToken('');
    goBack();
    Dialog.dismissLoading();
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        {/* Profile Info */}
        <Button
          style={styles.cardView}
          viewStyle={styles.profileView}
          android_ripple={ripple}
          onClick={() => startPage(PageList.editProfile)}>
          { this.state.userInfo.photoUrl
          ? <Image
              style={styles.avatar}
              source={{uri: utils.getImageUrl(this.state.userInfo.photoUrl)}}/>
          : <Image
              style={styles.avatar}
              source={require('../../images/user/ic-avatar-default.png')}/>
          }
          <View style={styles.infoContent}>
            <TextView
              style={styles.nickname}
              ellipsizeMode='tail'
              numberOfLines={1}>{this.state.userInfo.nickName}</TextView>
            <TextView style={styles.userText}>{this.state.userInfo.email}</TextView>
            <TextView style={styles.userText}>{(utils.isNotEmpty(this.state.userInfo.callingCode) && "+" + this.state.userInfo.callingCode + " ") + this.state.userInfo.phone}</TextView>
            <View style={styles.userTypeView}>
              { this.state.userInfo.userType?.split(";").map((item, index) => {
                  return <TextView key={index} style={styles.userTypeText}>{item}</TextView>
                })
              }
            </View>
          </View>
          <FontAwesome
            size={34}
            color={textCancel}
            name='angle-right'/>
        </Button>
        {/* Wallet Info */}
        <Button 
          style={styles.cardView}
          viewStyle={styles.profileItem}
          onClick={() => startPage(PageList.wallet)}>
          <Image
            style={styles.cardIcon}
            source={require('../../images/user/card-wallet.png')}/>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{$t('wallet.creditWalletLabel')}</TextView>
            <TextView style={styles.cardPrimary}>{this.state.userInfo.creditStr}</TextView>
          </View>
          <FontAwesome
            size={28}
            color={textCancel}
            name='angle-right'/>
        </Button>
        {/* Vehicle Info */}
        <Button
          style={styles.cardView}
          viewStyle={styles.profileItem}
          onClick={() => startPage(app.vehicle.newVersionPage ? PageList.vehiclesListV2 : PageList.myVehicles)}>
          <Image
            style={styles.cardIcon}
            source={require('../../images/user/card-vehicle.png')}/>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{$t('profile.myVehicles')}</TextView>
            <TextView style={styles.cardPrimary}>{this.state.userInfo.countVehicle}</TextView>
          </View>
          <FontAwesome
            size={28}
            color={textCancel}
            name='angle-right'/>
        </Button>
        {/* Vehicle List */}
        {/* <View style={styles.titleView}>
          <Text style={styles.title}>{$t('profile.myVehicles')}</Text>
          <Button
            style={{backgroundColor: colorLight}}
            borderRadius={3}
            viewStyle={styles.titleAdd}
            onClick={() => {
              startPage(PageList.addVehicle)
            }}>
            <Entypo name='plus' size={14} color={colorDark}/>
            <Text style={{fontSize: 12, paddingLeft: 1, color: textPrimary}}>Add Vehicle</Text>
          </Button>
        </View> */}
        {/* <View style={styles.verhicleList}>
          <VehicleList
            refreshId={this.state.refreshId}
            onResult={count => {
              this.setState({
                totalVehicle: count
              })
            }}
            onDelete={id => this.removeVehicle(id)}
          />
        </View> */}
        {/* Account List */}
        {/* <View style={styles.titleView}>
          <Text style={styles.title}>My Cards</Text>
          <Button
            textColor={textPrimary}
            style={styles.titleAdd}
            onClick={() => {
              startPage(PageList.addCard)
            }}>
            <Entypo name='plus' size={14} color={colorDark}/>
            <Text style={{fontSize: 12, paddingLeft: 1}}>Add Card</Text>
          </Button>
        </View>
        <View style={styles.accountList}>
          <CardList refreshId={this.state.refreshId}/>
        </View> */}
        <Button
          style={styles.cardView}
          viewStyle={styles.profileItem}
          onClick={() => startPage(PageList.changePassword, {action: "change"})}>
          <Image
            style={styles.cardIcon}
            source={require('../../images/user/card-account.png')}/>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{$t('route.changePassword')}</TextView>
          </View>
          <FontAwesome
            size={28}
            color={textCancel}
            name='angle-right'/>
        </Button>
        {/* Notifications */}
        { !app.v3.drawer &&
          <Button
            style={styles.cardView}
            viewStyle={styles.profileItem}
            onClick={() => startPage(PageList.settings)}>
            <Image
              style={styles.cardIcon}
              source={require('../../images/user/card-notification.png')}/>
            <View style={styles.cardInfo}>
              <TextView style={styles.cardLabel}>{$t('profile.notificationSettings')}</TextView>
            </View>
            <FontAwesome
              size={28}
              color={textCancel}
              name='angle-right'/>
          </Button>
        }
        { (app.modules.apply_phv && this.state.userInfo.userType.toLowerCase() == "public") &&
          <Button
            style={styles.cardView}
            viewStyle={styles.profileItem}
            onClick={() => startPage(PageList.registerFleet)}>
            <MaterialCommunityIcons
              style={styles.cardIcon}
              name="credit-card-edit"
              size={32}
              color="#00638C"/>
            <View style={styles.cardInfo}>
              <TextView style={styles.cardLabel}>{$t('profile.apply2Fleet')}</TextView>
            </View>
            <FontAwesome
              size={28}
              color={textCancel}
              name='angle-right'/>
          </Button>
        }
        <Button
          style={styles.cardView}
          viewStyle={styles.profileItem}
          onClick={() => this.deleteAccount()}>
          <MaterialCommunityIcons
            style={styles.cardIcon}
            name="account-remove"
            size={32}
            color="#00638C"/>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{$t('profile.deleteAccount')}</TextView>
          </View>
          <FontAwesome
            size={28}
            color={textCancel}
            name='angle-right'/>
        </Button>
        { app.v3.drawer && <>
          <Button
            style={styles.cardView}
            viewStyle={styles.profileItem}
            onClick={() => startPage(PageList.feedback)}>
            <MaterialCommunityIcons
              style={styles.cardIcon}
              name="message-alert-outline"
              color="#00638C"
              size={32}
            />
            <View style={styles.cardInfo}>
              <TextView style={styles.cardLabel}>{$t('drawer.feedback')}</TextView>
            </View>
            <FontAwesome
              size={28}
              color={textCancel}
              name='angle-right'/>
          </Button>
          <Button
            style={styles.cardView}
            viewStyle={styles.profileItem}
            onClick={() => startPage(PageList.settings)}>
            <MaterialIcons
              style={styles.cardIcon}
              name="settings"
              color="#00638C"
              size={32}
            />
            <View style={styles.cardInfo}>
              <TextView style={styles.cardLabel}>{$t('drawer.settings')}</TextView>
            </View>
            <FontAwesome
              size={28}
              color={textCancel}
              name='angle-right'/>
          </Button>
          <Button
            style={styles.cardView}
            viewStyle={styles.profileItem}
            onClick={() => startPage(PageList.about)}>
            <MaterialCommunityIcons
              style={styles.cardIcon}
              name="information-outline"
              color="#00638C"
              size={32}
            />
            <View style={styles.cardInfo}>
              <TextView style={styles.cardLabel}>{$t('drawer.about')}</TextView>
            </View>
            <FontAwesome
              size={28}
              color={textCancel}
              name='angle-right'/>
          </Button>
        </>}
        {/* <Button
          style={styles.deleteButton}
          text="DELETE MY ACCOUNT"
          textColor={textButton}
          onClick={() => this.deleteAccount()}
        /> */}
        <Button
          style={styles.deleteButton}
          text={$t('profile.logout')}
          textColor={textLight}
          onClick={() => this.logout()}
        />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  headerView: {
    paddingBottom: 72
  },
  background: {
    left: 0,
    right: 0,
    bottom: 0,
    height: $vw(62.4),
    alignItems: 'center',
    position: 'absolute'
  },
  profileView: {
    zIndex: 10,
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  avatar: {
    width: 66,
    height: 66,
    borderWidth: 2,
    borderRadius: 80,
    borderColor: "#00638C"
  },
  infoContent: {
    flex: 1,
    paddingLeft: 16,
  },
  nickname: {
    color: '#000',
    fontSize: 20,
    fontWeight: 'bold',
    paddingTop: 1,
    paddingBottom: 1,
  },
  userText: {
    color: textPrimary,
    fontSize: 13,
    paddingTop: 1.5
  },
  cardView: {
    //padding: 16,
    marginTop: 16,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 10,
    overflow: 'hidden',
    ...ElevationObject(5),
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight,
  },
  profileItem: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  cardItem: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  cardDivide: {
    borderLeftWidth: 1,
    borderLeftColor: '#EEE'
  },
  cardIcon: {
    width: 32,
    height: 32
  },
  cardInfo: {
    flex: 1,
    paddingLeft: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  cardPrimary: {
    color: textPrimary,
    fontSize: 18
  },
  cardLabel: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  titleView: {
    padding: 12,
    alignItems: 'center',
    flexDirection: 'row'
  },
  title: {
    flex: 1,
    padding: 8,
    color: '#000',
    fontSize: 16,
  },
  titleAdd: {
    padding: 8,
    color: textPrimary,
    alignItems: 'center',
    flexDirection: 'row'
  },
  verhicleList: {
    paddingLeft: 16,
    paddingRight: 16,
    marginBottom: -16
  },
  accountList: {
    paddingLeft: 16,
    paddingRight: 16,
    marginBottom: -16
  },
  notificationView: {
    marginLeft: 16,
    marginRight: 16,
    marginBottom: 20,
    borderRadius: 10,
    overflow: 'hidden',
    paddingLeft: 16,
    paddingRight: 16,
    borderColor: '#f5f5f5',
    borderWidth: 1,
    backgroundColor: colorLight,
    ...ElevationObject(1.5)
  },
  notificationItem: {
    paddingTop: 16,
    paddingBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  notiLabel: {
    flex: 1,
    color: textPrimary,
    fontSize: 14
  },
  divide: {
    borderTopWidth: 1,
    borderTopColor: '#eee'
  },
  deleteButton: {
    ...$margin(48, 16, 16),
    backgroundColor: '#EA0A2A'
  },
  userTypeView: {
    paddingTop: 2,
    alignItems: 'center',
    flexDirection: 'row'
  },
  userTypeText: {
    color: textLight,
    fontSize: 8,
    marginRight: 4,
    borderRadius: 2,
    textAlign: "center",
    ...$padding(2, 4),
    backgroundColor: colorAccent
  }
})