ChargEco/Strides-SPAPP/app/pages/home/DrawerV2.js

/**
 * 新版首页抽屉菜单
 * @邠心vbe on 2024/02/01
 */
import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import app from '../../../app.json';
import { PageList } from '../Router';
import Button from '../../components/Button';
import { BackButton, Styles } from '../../components/Toolbar';
import TextView from '../../components/TextView';
import apiCharge from '../../api/apiCharge';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { toTopupPage } from '../payment/PaymentConfig';
import utils from '../../utils/utils';
import Dialog from '../../components/Dialog';
import { Path, Svg } from 'react-native-svg';

const DEBUG = app.debug && !app.product;

export default DrawerV2 = ({isLogin=false, userInfo, onLogout, sideCountInfo={}, navigation}) => {
  const getCharging = () => {
    Dialog.showProgressDialog();
    apiCharge.getUserCharging().then(res => {
      Dialog.dismissLoading();
      if (res.data.sitePk) {
        utils.toChargeDetailPage(res.data.sitePk, 'view', PageList.home);
        //startPage(PageList.chargeDetailPage, {stationInfo: {id: res.data.sitePk}, action: 'view', from: PageList.home});
        //startPage(PageList.chargeDetail, { stationInfo: {id: res.data.sitePk}, action: 'view'});
      } else if (res.msg) {
        toastShort(res.msg);
      } else {
        toastShort($t("drawer.noChargingSession"));
      }
    }).catch((err) => {
      if (app.debug)
        console.log(err);
      Dialog.dismissLoading();
      toastShort($t("drawer.noChargingSession"));
    })
  }

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

  return (
    <View style={styles.drawerView}>
      <View style={styles.loginView}>
        <View style={ui.flexcw}>
          { (isLogin && userInfo.photoUrl)
          ? <TouchableWithoutFeedback>
              <Image
                style={styles.avatar}
                source={{uri: utils.getImageUrl(userInfo.photoUrl)}}/>
            </TouchableWithoutFeedback>
          : <TouchableWithoutFeedback>
              <Image
                style={styles.avatar}
                source={require('../../images/user/ic-avatar-default.png')}/>
            </TouchableWithoutFeedback>
          }
          <BackButton
            style={styles.closeMenu}
            onPress={() => navigation?.toggleDrawer()}>
            <MaterialIcons
              name="menu-open"
              size={28}
              color={colorLight}/>
          </BackButton>
        </View>
        { isLogin
        ? <View
            style={styles.nickViewStyle}>
            <View style={ui.flex1}>
              <TextView
                style={styles.nickname}
                ellipsizeMode='tail'
                numberOfLines={1}>
                { userInfo.nickName 
                ? userInfo.nickName
                : $t('drawer.logging')
                }
              </TextView>
              <TextView
                style={styles.emailText}
                ellipsizeMode='tail'
                numberOfLines={1}>{userInfo.email}</TextView>
            </View>
            <BackButton
              onPress={logout}>
              <MaterialIcons
                size={26}
                color={textPrimary}
                name='exit-to-app'/>
            </BackButton>
          </View>
        : <Button
            style={styles.nickView}
            viewStyle={styles.nickViewStyle}
            onClick={() => startPage(PageList.login)}>
            <TextView
              style={styles.loginText}
              ellipsizeMode='tail'
              numberOfLines={1}>
              {$t('drawer.sign')}
            </TextView>
            <FontAwesome
              size={24}
              color='#999'
              name='angle-right'/>
          </Button>
        }
      </View>
      <View style={styles.divideLogin}></View>
      { isLogin && <>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => startPage(app.isLumiWhitelabel ? PageList.profileV3 : PageList.profile)}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="account"
            color={textPrimary}
            size={24}/>
          <TextView style={styles.label}>{$t('route.profileSettings')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => getCharging()}>
          <MaterialIcons
            style={styles.icon}
            name="ev-station"
            color={textPrimary}
            size={24}/>
          <TextView style={styles.label}>{$t('drawer.charging')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(app.isLumiWhitelabel ? PageList.transaction : PageList.wallet);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="finance"
            color={textPrimary}
            size={24}/>
          <TextView style={styles.label}>{$t('drawer.wallet')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => toTopupPage()}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="wallet-plus"
            color={textPrimary}
            size={24}/>
          <TextView style={styles.label}>{$t('drawer.topup')}</TextView>
          <Text style={styles.balanceText2}>{userInfo.creditStr}</Text>
        </Button></>
      }

      { (app.v3.vouchers && isLogin) &&
          <Button
            style={styles.itemButton}
            viewStyle={styles.itemView}
            onClick={() => startPage(PageList.myVoucher)}>
            <MaterialIcons
              style={styles.icon}
              name="discount"
              color={textPrimary}
              size={24}/>
            <TextView style={styles.label}>{$t('voucher.vouchers')}</TextView>
            <TextView
              style={styles.balanceText}
              fixedAlign={false}>
              <Text style={styles.balanceText2}>{sideCountInfo?.activeVoucherCount || 0}</Text>  Active
            </TextView>
          </Button>
        }
      { (app.notifications.enable && isLogin) &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.notification);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="bell-badge"
            color={textPrimary}
            size={24}/>
          <TextView style={styles.label}>{$t('route.notifications')}</TextView>
          <TextView
            style={styles.balanceText}
            fixedAlign={false}>
            <Text style={styles.balanceText2}>{sideCountInfo?.toBeReadCount || 0}</Text>  Unread
          </TextView>
        </Button>
      }
      { (app.modules.bookmarks && isLogin) &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.bookmarks);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="bookmark-check"
            color={textPrimary}
            size={24}/>
          <TextView style={styles.label}>{$t('route.bookmarks')}</TextView>
          <TextView
            style={styles.balanceText}
            fixedAlign={false}>
            <Text style={styles.balanceText2}>{sideCountInfo?.bookMarkCount || 0}</Text>  Saved
          </TextView>
        </Button>
      }
      {/*附加功能-结束*/}
      { (app.modules.membership && isLogin) &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.membersList);
          }}>
          <Svg 
            style={styles.icon}
            width={24}
            height={24}
            viewBox='0 0 24 24'>
            <Path
              fill={textPrimary}
              d="M7 4C4.8 4 3 5.8 3 8C3 10.2 4.8 12 7 12C9.2 12 11 10.2 11 8C11 5.8 9.2 4 7 4ZM7 10C5.9 10 5 9.1 5 8C5 6.9 5.9 6 7 6C8.1 6 9 6.9 9 8C9 9.1 8.1 10 7 10ZM0 18C0 15.8 3.1 14 7 14C8.5 14 9.9 14.3 11 14.7V17C10.2 16.5 8.8 16 7 16C3.8 16 2 17.4 2 18H11V20H0V18ZM22 4H15C13.9 4 13 4.9 13 6V18C13 19.1 13.9 20 15 20H22C23.1 20 24 19.1 24 18V6C24 4.9 23.1 4 22 4ZM22 18H15V6H22V18Z"/>
          </Svg>
          <TextView style={styles.label}>{$t('drawer.members')}</TextView>
          <TextView
            style={styles.balanceText}
            fixedAlign={false}>
            <Text style={styles.balanceText2}>{sideCountInfo?.membershipCount || 0}</Text>  Active
          </TextView>
        </Button>
      }
      {/* <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.feedback);
        }}>
        <MaterialCommunityIcons
          style={styles.icon}
          name="message-alert-outline"
          color="#222"
          size={24}/>
        <TextView style={styles.label}>{$t('drawer.feedback')}</TextView>
      </Button> */}
      {/* <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.settings);
        }}>
        <MaterialIcons
          style={styles.icon}
          name="settings"
          color="#222"
          size={25}
        />
        <TextView style={styles.label}>{$t('drawer.settings')}</TextView>
      </Button> */}
      { app.modules.support &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.supportContact);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="face-agent"
            color="#333"
            size={26}
          />
          <TextView style={styles.label}>{$t('drawer.contactSupport')}</TextView>
        </Button>
      }
      { DEBUG && <>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.notify);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="dev-to"
            color="#333"
            size={26}
          />
          <TextView style={styles.label}>{$t('route.notificationTest')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.selectVoucher, {chargeBoxId: "LUMI-TEST", connectorId: 1});
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="dev-to"
            color="#333"
            size={26}
          />
          <TextView style={styles.label}>{"Test Page"}</TextView>
        </Button>
      </> }
    </View>
  );
}

const styles = StyleSheet.create({
  drawerView: {
    paddingTop: 8,
    paddingBottom: 8,
  },
  loginView: {
    paddingTop: 16,
    paddingBottom: 0
  },
  avatar: {
    width: 66,
    height: 66,
    marginLeft: 24,
    borderWidth: 2,
    borderRadius: 80,
    borderColor: colorLight,
  },
  closeMenu: {
    width: 46,
    height: 46,
    marginRight: 16,
    borderRadius: 46,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorPrimary
  },
  nickView: {
    borderRadius: 0,
    backgroundColor: colorLight
  },
  nickViewStyle: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    ...$padding(12, 16)
  },
  nickname: {
    flex: 1,
    color: textPrimary,
    fontSize: 20,
    fontWeight: 'bold',
    paddingLeft: 16,
  },
  emailText: {
    color: textPrimary,
    fontSize: 11,
    marginTop: -5,
    paddingLeft: 16,
    paddingBottom: 4
  },
  loginText: {
    flex: 1,
    color: textPrimary,
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 4,
    paddingTop: 4,
    paddingLeft: 16,
    paddingBottom: 4
  },
  divideLogin: {
    height: 4,
    marginTop: 2,
    marginRight: 0,
    marginBottom: 8,
    backgroundColor: colorPrimary
  },
  itemButton: {
    borderRadius: 0,
    backgroundColor: colorLight
  },
  itemView: {
    flex: 1,
    height: 48,
    paddingLeft: 16,
    marginBottom: 0,
    alignItems: 'center',
    flexDirection: 'row'
  },
  icon: {
    width: 24,
    height: 24,
    marginRight: 16
  },
  label: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
  },
  divided: {
    height: 1,
    marginTop: 24,
    marginLeft: 16,
    backgroundColor: colorAccent
  },
  balanceText: {
    color: textPrimary,
    fontSize: 14,
    marginRight: 20
  },
  balanceText2: {
    color: colorPrimary,
    fontSize: 14,
    marginRight: 20
  },
  bridgeText: {
    width: 20,
    height: 20,
    color: textLight,
    fontSize: 12,
    marginRight: 16,
    borderRadius: 30,
    fontWeight: 'bold',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: "#FF3B30"
  },
  bridgeText2: {
    width: 22,
    height: 22,
    color: textLight,
    fontSize: 10,
    marginRight: 16,
    borderRadius: 30,
    fontWeight: 'bold',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: "#FF3B30"
  }
});