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

/**
 * 删除账号页面
 * @邠心vbe on 2025/06/27
 */
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import CheckBoxText from '../../components/CheckBoxText';
import Button from '../../components/Button';
import apiUser from '../../api/apiUser';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';
import TextView from '../../components/TextView';
import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
import { setAccessToken } from '../../api/http';

export default class DeleteAccount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkValue1: false,
      checkValue2: false,
      checkValue3: false
    };
  }

  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(again=false) {
    Dialog.showProgressDialog();
    apiUser.deleteAccount({
      secondConfirm: again
    }).then(res => {
      toastShort($t('profile.deleteAccountSuccess'))
      Dialog.dismissLoading();
      this.requestLogout();
      /*setTimeout(() => {
        startPage(PageList.login);
      }, 500);*/
    }).catch(err => {
      Dialog.dismissLoading();
      //toastShort(err)
      setTimeout(() => {
        if (err.code == 5334) {
          Dialog.showDialog({
            title: $t('profile.deleteAccount'),
            message: err.msg,
            ok: $t("nav.confirm"),
            callback: button => {
              if (button == Dialog.BUTTON_OK) {
                setTimeout(() => {
                  this.deleteMyAccount(true);
                }, 500)
              }
            }
          })
        } else {
          Dialog.showResultDialog(err.msg);
        }
      }, 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: {}
    });*/
    Dialog.dismissLoading();
    setAccessToken('');
    startPage(PageList.home);
  }

  render() {
    const styles = delStyle();
    return (
      <ScrollView
        style={styles.container}
        contentContainerStyle={$padding(16)}>
        <View style={styles.cardView}>
          <TextView style={styles.textTitle}>We’re sorry to see you go.</TextView>
          <TextView style={styles.textMessage}>Please be aware that any remaining credits in your account will be forfeited and are non-refundable if you choose to delete your account.</TextView>
          <TextView style={styles.textMessage}>To proceed with account deletion, please confirm your decision by pressing the "Delete Account" button.</TextView>
          <TextView style={styles.textMessage}>Once confirmed, your account and all associated data will be permanently deleted and can not be recovered.</TextView>
          <TextView style={styles.textMessage}>This action is irreversible.</TextView>
          <View style={styles.confirmView}>
            <TextView style={styles.textConfirm}>Please Confirm The Following</TextView>
            <View>
              <CheckBoxText
                value={this.state.checkValue1}
                onValueChange={(newValue) => this.setState({checkValue1: newValue})}
                flexText={true}
                text={"I understand that my remaining credits will be forfeited and are non-refundable."}
                disabled={false}
                textStyle={{fontSize: 12}}/>
            </View>
            <View>
              <CheckBoxText
                value={this.state.checkValue2}
                onValueChange={(newValue) => this.setState({checkValue2: newValue})}
                flexText={true}
                text={"I confirm that my account and all associated data will be permanently deleted."}
                disabled={false}
                textStyle={{fontSize: 12}}/>
            </View>
            <View>
              <CheckBoxText
                value={this.state.checkValue3}
                onValueChange={(newValue) => this.setState({checkValue3: newValue})}
                flexText={true}
                text={"I acknowledge that this action is irreversible and can not be undone."}
                disabled={false}
                textStyle={{fontSize: 12}}/>
            </View>
          </View>
        </View>
        <Button
          style={styles.btnDelete}
          text="DELETE ACCOUNT"
          textColor="#FF0F2B"
          disabled={!(this.state.checkValue1 && this.state.checkValue2 && this.state.checkValue3)}
          onClick={() => this.deleteAccount()}/>
      </ScrollView>
    );
  }
}

const delStyle = () => StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  cardView: {
    padding: 16,
    borderRadius: 6,
    backgroundColor: colorLight
  },
  btnDelete: {
    backgroundColor: colorLight,
    ...$margin(24, 0, 16)
  },
  textTitle: {
    color: textPrimary,
    fontSize: 16,
    paddingBottom: 8
  },
  textMessage: {
    color: textSecondary,
    fontSize: 14,
    paddingBottom: 16
  },
  confirmView: {
    paddingTop: 16,
    borderTopWidth: 1,
    borderColor: "#ededed"
  },
  textConfirm: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: "500",
    paddingBottom: 16
  }
})