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

/**
 * V3版本Profile页面
 * @邠心vbe on 2024/05/30
 */
import React, { Component } from 'react';
import { View, StyleSheet, Image, ScrollView, StatusBar, Pressable } from 'react-native';
import Button, { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import Dialog from '../../components/Dialog';
import apiUser from '../../api/apiUser';
import { setAccessToken } from '../../api/http';
import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
import utils from '../../utils/utils';
import { PageList } from '../Router';
import app from '../../../app.json';
import Svg, { Defs, Ellipse, G, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
import ShadowView from '../../components/ShadowView';
import MyStatusBar from '../../components/MyStatusBar';

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

  componentDidMount() {
    this.init();
    this.props.navigation.addListener('focus', () => {
      this.init();
      this.setState({
        isHide: false
      }, () => {
        setTimeout(() => {
          MyStatusBar.setStatusBarTheme(MyStatusBar.LIGHT_STYLE);
        }, 100);
      });
      
    });
    this.props.navigation.addListener('blur', () => {
      this.setState({
        isHide: true
      })
      MyStatusBar.setStatusBarTheme(MyStatusBar.DARK_STYLE);
    });
  }

  init() {
    getUserInfo(info => {
      this.setState({
        userInfo: info
      });
    }, 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)
      setTimeout(() => {
        Dialog.showResultDialog(err.msg);
      }, 500);
    })
  }

  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} stickyHeaderIndices={[0]}>
        {/* <StatusBar backgroundColor={this.state.isHide ? colorLight : colorPrimary} /> */}
        <View style={styles.headerView}>
          <Pressable
            style={styles.titleBar}
            onPress={() => goBack()}>
            <MaterialIcons
              name={'arrow-back-ios'}
              size={20}
              color={textLight} />
            <TextView style={styles.titleText}>Profile</TextView>
          </Pressable>
          <View style={styles.profileHeader}>
            {this.state.userInfo.photoUrl
              ? <Image
                style={styles.avatarImage}
                source={{ uri: utils.getImageUrl(this.state.userInfo.photoUrl) }} />
              : <Image
                style={styles.avatarImage}
                source={require('../../images/user/ic-avatar-default.png')} />
            }
            <View style={styles.infoContent}>
              <View style={ui.flexc}>
                <TextView
                  style={styles.nickname}
                  ellipsizeMode='tail'
                  numberOfLines={1}>{this.state.userInfo.nickName}</TextView>
                <TextView
                  style={styles.countryLabel}>Singapore</TextView>
              </View>
              <TextView style={styles.userText}>{this.state.userInfo.email}</TextView>
              <View style={ui.flex}>
                <Button
                  text={"Edit"}
                  textSize={12}
                  textColor={colorPrimary}
                  style={styles.editButton}
                  viewStyle={styles.editButtonView}
                  iconRight={
                    <Feather
                      name="edit-3"
                      size={14}
                      color={colorPrimary} />
                  }
                  onClick={() => startPage(PageList.editProfile)}
                />
              </View>
            </View>
          </View>
        </View>
        <View style={styles.circleButtomView}>
          <Svg width={$vw(100)} height={$vw(42.13)} viewBox="0 0 375 158" fill="none">
            <Ellipse cx={187.5} cy={79} rx={238.5} ry={79} fill={colorPrimary} />
          </Svg>
        </View>
        <Pressable
          style={styles.walletView}
          onPress={() => startPage(PageList.transaction)}>
          <Image
            style={styles.walletIcon}
            source={require("../../images/wallet/lumi-logo.png")}/>
          <View style={styles.walletContent}>
            <TextView style={styles.walletTitle}>Available Credits:</TextView>
            <TextView style={styles.walletAmount}>{this.state.userInfo?.creditStr}</TextView>
          </View>
          <Button
            text={"Buy"}
            textSize={12}
            textColor={textLight}
            style={styles.topupButton}
            viewStyle={styles.topupButtonView}
            iconRight={
              <MaterialIcons
                name="chevron-right"
                size={16}
                color={textLight} />
            }
            onClick={() => startPage(PageList.topupNew)}/>
        </Pressable>
        <ShadowView/>
        <Button
          style={styles.cardView}
          viewStyle={styles.cardItem}
          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={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <Button
          style={styles.cardView}
          viewStyle={styles.cardItem}
          onClick={() => {}}>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{"Saved Cards"}</TextView>
          </View>
          <FontAwesome
            size={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <Button
          style={styles.cardView}
          viewStyle={styles.cardItem}
          onClick={() => startPage(PageList.settings)}>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{"App Settings"}</TextView>
          </View>
          <FontAwesome
            size={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <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={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <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={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <Button
          style={styles.cardView}
          viewStyle={styles.cardItem}
          onClick={() => {}}>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{"Contact Us"}</TextView>
          </View>
          <FontAwesome
            size={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <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={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <Button
          style={styles.cardView}
          viewStyle={styles.cardItem}
          onClick={() => startPage(PageList.profile)}>
          <View style={styles.cardInfo}>
            <TextView style={styles.cardLabel}>{"Check For Updates"}</TextView>
          </View>
          <FontAwesome
            size={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <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={24}
            color={textPrimary}
            name='angle-right'/>
        </Button>
        {/* <ShadowView/> */}
        <Button
          style={styles.deleteButton}
          text={'LOGOUT'}
          textColor={textLight}
          onClick={() => this.logout()}
        />
        <ShadowView/>
        <EndView/><EndView/>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  headerView: {
    zIndex: 2,
    paddingTop: statusHeight,
    backgroundColor: colorPrimary
  },
  titleBar: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  titleText: {
    color: textLight,
    fontSize: 20,
    fontWeight: 'bold'
  },
  profileHeader: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  avatarImage: {
    width: 80,
    height: 80,
    borderWidth: 2,
    borderRadius: 80,
    borderColor: colorLight,
    backgroundColor: colorLight
  },
  infoContent: {
    flex: 1,
    paddingLeft: 16
  },
  nickname: {
    color: textLight,
    fontSize: 20,
    fontWeight: 'bold',
    paddingTop: 1,
    paddingBottom: 1
  },
  userText: {
    color: textLight,
    fontSize: 13,
    paddingTop: 4
  },
  countryLabel: {
    color: textLight,
    fontSize: 10,
    ...$padding(2, 8),
    marginLeft: 8,
    borderRadius: 4,
    backgroundColor: "#f8a300"
  },
  editButton: {
    marginTop: 8,
    borderRadius: 4,
    backgroundColor: colorLight
  },
  editButtonView: {
    width: 65,
    ...$padding(4, 10),
    alignItems: 'center',
    flexDirection: 'row'
  },
  circleButtomView: {
    zIndex: 1,
    marginTop: -$vw(30)
  },
  walletView: {
    zIndex: 2,
    padding: 12,
    paddingRight: 6,
    marginTop: -$vw(12),
    marginLeft: 16,
    marginRight: 16,
    borderWidth: 2,
    borderColor: colorPrimary,
    borderRadius: 6,
    alignItems: "center",
    flexDirection: "row",
    backgroundColor: colorLight,
  },
  walletIcon: {
    width: 48,
    height: 48
  },
  walletContent: {
    flex: 1,
    paddingLeft: 8
  },
  walletTitle: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 3
  },
  walletAmount: {
    color: colorPrimary,
    fontSize: 20,
    fontWeight: "bold",
    paddingTop: 2
  },
  topupButton: {
    marginTop: 8,
    borderRadius: 4,
    backgroundColor: colorPrimary
  },
  topupButtonView: {
    width: 65,
    alignItems: 'center',
    flexDirection: 'row',
    ...$padding(4, 8, 4, 10)
  },
  cardView: {
    zIndex: 2,
    //padding: 16,
    marginTop: 8,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 10,
    overflow: 'hidden',
    alignItems: 'center',
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: "#DADADA",
    //...ElevationObject(2),
    backgroundColor: colorLight
  },
  cardItem: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  cardIcon: {
    width: 32,
    height: 32
  },
  cardInfo: {
    flex: 1,
    //paddingLeft: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  cardLabel: {
    color: textPrimary,
    fontSize: 12
  },
  deleteButton: {
    zIndex: 2,
    borderRadius: 4,
    backgroundColor: '#EA0A2A',
    ...$margin(16, 16, 0)
  }
})