ChargEco/Strides-APP/app/pages/home/Drawer.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 { 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';

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

export default DrawerView = ({isLogin=false, userInfo, onLogout, notificationCount=0, navigation}) => {
  const getCharging = () => {
    Dialog.showProgressDialog();
    apiCharge.getUserCharging().then(res => {
      Dialog.dismissLoading();
      if (res.data.sitePk) {
        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}>
        { (isLogin && userInfo.photoUrl)
        ? <TouchableWithoutFeedback onPress={() => startPage(PageList.profile)}>
            <Image
              style={styles.avatar}
              source={{uri: utils.getImageUrl(userInfo.photoUrl)}}/>
          </TouchableWithoutFeedback>
        : <TouchableWithoutFeedback onPress={() => startPage(PageList.login)}>
            <Image
              style={styles.avatar}
              source={require('../../images/user/ic-avatar-default.png')}/>
          </TouchableWithoutFeedback>
        }
        <Button
          style={styles.nickView}
          viewStyle={styles.nickViewStyle}
          onClick={() => startPage(isLogin ? PageList.profile : PageList.login)}>
          <TextView
            style={styles.nickname}
            ellipsizeMode='tail'
            numberOfLines={1}>
            { isLogin
              ? userInfo.nickName 
                ? userInfo.nickName
                : $t('drawer.logging')
              : $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={() => getCharging()}>
            <MaterialCommunityIcons
              style={styles.icon}
              name="car-electric-outline"
              color="#333"
              size={26}
            />
            {/* <Image
              style={styles.icon}
              source={require('../../images/icon/draw-charge.png')}/> */}
            <TextView style={styles.label}>{$t('drawer.charging')}</TextView>
          </Button>
        : <View
            style={styles.disableItem}>
            <MaterialCommunityIcons
              style={styles.icon}
              name="car-electric-outline"
              color="#999"
              size={26}
            />
            {/* <Image
              style={styles.icon}
              source={require('../../images/icon/draw-charge-no.png')}/> */}
            <TextView style={styles.disable}>{$t('drawer.charging')}</TextView>
          </View>
      }
      {
        isLogin && <>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.wallet);
          }}>
          <Image
            style={styles.icon}
            source={require('../../images/icon/draw-transaction.png')}/>
          <TextView style={styles.label}>{$t('drawer.wallet')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => toTopupPage()}>
          <MaterialCommunityIcons
            style={styles.icon}
            size={26}
            name={"wallet-outline"}
            color={colorDark}/>
          <TextView style={styles.label}>{$t('drawer.topup')}</TextView>
          <Text style={styles.balanceText2}>{userInfo.creditStr}</Text>
        </Button></>
      }

      {/*附加功能-开始*/}
      { (app.notifications.enable && isLogin) &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.notification);
          }}>
          <MaterialIcons
            style={styles.icon}
            name="notifications"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('route.notifications')}</TextView>
          { notificationCount > 0 && (
            notificationCount < 100
            ? <TextView
                style={styles.bridgeText}
                fixedAlign={false}>{notificationCount}</TextView>
            : <TextView
                style={styles.bridgeText2}
                fixedAlign={false}>99+</TextView>
            )
          }
        </Button>
      }
      { (app.modules.bookmarks && isLogin) &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.bookmarks);
          }}>
          <MaterialIcons
            style={styles.icon}
            name="stars"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('route.bookmarks')}</TextView>
        </Button>
      }
      {/*附加功能-结束*/}
      { (app.modules.membership && isLogin) &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.membersList);
          }}>
          <MaterialIcons
            style={styles.icon}
            name="card-membership"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('drawer.members')}</TextView>
        </Button>
      }
      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.feedback);
        }}>
        <MaterialCommunityIcons
          style={styles.icon2}
          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={() => {
          Linking.openURL(host+"juicePicture/pdf/FAQ.v1.0.pdf")
        }}>
        <Feather
          style={styles.icon2}
          name="download"
          color={colorDark}
          size={24}
        />
        <Text style={styles.label}>FAQs</Text>
      </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>
      }
      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.about);
        }}>
        <MaterialCommunityIcons
          style={styles.icon}
          name="information-outline"
          color="#333"
          size={26}
        />
        <TextView style={styles.label}>{$t('drawer.about')}</TextView>
      </Button>

      {/* <View style={styles.divided}></View> */}
      { DEBUG &&
      <>
        <View style={styles.divideLogin}></View>
        <TextView style={{color: "#ccc", paddingLeft: 16, paddingBottom: 8, fontSize: 12}}>{$t('drawer.debugOnly')}</TextView>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.privacy);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="file-eye-outline"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('drawer.privacyPolicy')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.condition);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="file-eye-outline"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('drawer.termsOfUse')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.notify);
          }}>
          {/* <Image
            style={styles.icon2}
            source={require('../../images/icon/draw-terms.png')}/> */}
          <MaterialIcons
            style={styles.icon}
            name="notifications-none"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('route.notificationTest')}</TextView>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(isIOS ? PageList.notify : PageList.mapTest);
          }}>
          <MaterialCommunityIcons
            style={styles.icon}
            name="map-legend"
            color="#222"
            size={26}/>
          <TextView style={styles.label}>{$t('drawer.mapsTest')}</TextView>
        </Button>
      </>}

      {/* isLogin
        ? <View style={styles.walletView}>
            <Pressable
              style={styles.balanceView}
              android_ripple={ripple}
              onPress={() => toTopupPage()}>
              <Image
                style={styles.icon}
                source={require('../../images/icon/draw-wallet.png')}/>
              <Text style={styles.balanceText}>{currency}{userInfo.credit}</Text>
            </Pressable>
            {/* <Pressable
              style={styles.balanceView}
              android_ripple={ripple}
              onPress={() => {
                startPage(PageList.referral);
              }}>
              <Image
                style={styles.icon}
                source={require('../../images/icon/draw-gift.png')}/>
              <Text style={styles.referText}>Refer your friends to get $5 credit!</Text>
            </Pressable> *}
          </View>
        : <View style={ui.flex1}></View>s
        */}

      <View style={styles.bottomView}>
        <Image
          style={Styles.logo}
          resizeMode='contain'
          source={require('../../images/drawer-logo.png')}
        />
        <Text style={styles.versionText}>{app.displayName + '  ' + app.versionName}</Text>
      </View>
      {/* isLogin &&
        <Button
          style={styles.logoutView}
          text='Logout'
          textColor={textButton}
          borderRadius={0}
          onClick={() => logout()}/>
      */}
    </View>
  );
}

const styles = StyleSheet.create({
  drawerTop: {
    top: 0,
    left: 0,
    right: 0,
    height: statusHeight,
    position: 'absolute',
    fontSize: 10,
    backgroundColor: pageBackground
  },
  drawerView: {
    paddingTop: 16,
    paddingBottom: 8,
    minHeight: $vhs(101)
  },
  guessView: {
    padding: 16
  },
  loginView: {
    paddingTop: 16,
    paddingBottom: 4
  },
  avatar: {
    width: 66,
    height: 66,
    marginLeft: 24,
    borderWidth: 2,
    borderRadius: 80,
    borderColor: colorLight,
  },
  nickView: {
    marginTop: 6,
    borderRadius: 0,
    backgroundColor: colorLight
  },
  nickViewStyle: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    ...$padding(12, 24, 12, 16),
  },
  nickname: {
    flex: 1,
    color: textPrimary,
    fontSize: 20,
    fontWeight: 'bold',
    paddingLeft: 16,
  },
  divideLogin: {
    height: 1,
    marginTop: 4,
    marginRight: 22,
    marginBottom: 12,
    backgroundColor: '#E5E5E5'
  },
  itemButton: {
    borderRadius: 0,
    backgroundColor: colorLight
  },
  itemView: {
    flex: 1,
    height: 56,
    paddingLeft: 16,
    marginBottom: 6,
    alignItems: 'center',
    flexDirection: 'row'
  },
  disableItem: {
    height: 56,
    paddingLeft: 16,
    marginBottom: 6,
    alignItems: 'center',
    flexDirection: 'row'
  },
  icon: {
    width: 26,
    height: 26,
    marginRight: 16
  },
  icon2: {
    width: 24,
    height: 24,
    marginLeft: 1,
    marginRight: 17
  },
  label: {
    flex: 1,
    color: textPrimary,
    fontSize: 16,
  },
  disable: {
    color: '#999',
    fontSize: 18
  },
  divided: {
    height: 1,
    marginTop: 24,
    marginLeft: 16,
    backgroundColor: colorAccent
  },
  walletView: {
    paddingTop: 16,
    paddingLeft: 48,
    paddingRight: 48
  },
  balanceView: {
    marginTop: 16,
    borderRadius: 8,
    ...$padding(13, 22),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 20, 137, 0.2)'
  },
  balanceText: {
    color: textPrimary,
    fontSize: 22,
    fontWeight: 'bold'
  },
  referText: {
    flex: 1,
    color: textPrimary,
    fontSize: 13
  },
  bottomView: {
    flex: 1,
    paddingTop: 48,
    paddingBottom: 0,
    alignItems: 'center',
    justifyContent: 'flex-end'
  },
  versionText: {
    color: textPrimary,
    fontSize: 10,
    paddingTop: 16
  },
  logoutView: {
    backgroundColor: colorPrimary
  },
  balanceText2: {
    color: textCancel,
    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"
  }
});