ChargEco/Strides-APP/app/pages/charge/InfoDialog.js

/**
 * 充电弹窗组件
 * @邠心vbe on 2021/04/25
 */
import React from "react";
import { Image, Pressable, StyleSheet, Text, View } from "react-native";
import Modal from "react-native-modal";
import { ModalProps } from "../../components/BottomModal";
import Button from "../../components/Button";
import { Styles } from "../../components/Toolbar";
import { PageList } from "../Router";
import app from "../../../app.json"

export const DialogMaxWidth = $vw(85) > 500 ? 500 : $vw(85);

export const LoginDialog = ({onHide, onClose}) => {
  return (
    <View style={styles.dialog}>
      <Text style={styles.title}>Oops!</Text>
      <Text style={styles.message}>You need to be registered user of {app.displayName}</Text>
      <View style={styles.loginTipView}>
        <Text style={styles.tipText}>Login to use this feature</Text>
        <Image
          style={styles.tipImage}
          source={require('../../images/login-head.png')}/>
      </View>
      <Button
        textSize={17}
        style={styles.loginButton}
        viewStyle={styles.loginButtonView}
        text='Login'
        onClick={() => {
          onHide();
          startPage(PageList.login)
        }}/>
      <Pressable
        style={styles.signUpView}
        onPress={() => {
          onHide();
          startPage(PageList.register, {actionLogin: true});
        }}>
        <Text style={styles.signUpText}>Don't have an account?</Text>
        <Text style={styles.signUpLink}>Sign Up</Text>
      </Pressable>
      <Ionicons
        name='close-outline'
        size={30}
        color={'#999'}
        style={styles.closeIcon}
        onPress={onClose} />
    </View>
  );
}

export const ErrorDialog = ({visible, code, message, onClose}) => {
  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
      {...ModalProps}>
      <View style={styles.dialog}>
        <Text style={styles.title}>Oops!</Text>
        <Text style={styles.message}>{message}</Text>
        <ErrorImage code={code}/>
        <Button
          textSize={17}
          style={styles.loginButton}
          viewStyle={styles.loginButtonView}
          text='Okay'
          onClick={onClose}/>
        <Text style={{fontSize: 12}}></Text>
        <Ionicons
          name='close-outline'
          size={30}
          color={'#999'}
          style={styles.closeIcon}
          onPress={onClose} />
      </View>
    </Modal>
  );
}

export const LowCreditDialog = ({visible, onClose}) => {
  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
      {...ModalProps}>
      <View style={styles.dialog}>
        <Text style={styles.title}>Low Credits</Text>
        <Text style={styles.message}>Your credit is below S$5.</Text>
        <Text style={styles.message}>{"This charging session will end if there is insufficient credits.\n"}</Text>
        <View style={$padding(12,0)}>
          <Button
            text="Top-Up"
            onClick={() => onClose(true)}/>
        </View>
        <Ionicons
          name='close-outline'
          size={30}
          color={'#999'}
          style={styles.closeIcon}
          onPress={() => onClose(false)} />
      </View>
    </Modal>
  );
}

export const CancelReserveDialog = ({visible, onClose}) => {
  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
      {...ModalProps}>
      <View style={styles.dialog}>
        <Text style={styles.title}>Cancel</Text>
        <Text style={styles.message}>Are you sure you want to cancel the reservation?</Text>
        <View style={styles.loginTipView}>
          <Text style={styles.tipText}></Text>
          <Image
            style={styles.tipImage}
            source={require('../../images/login-head.png')}/>
        </View>
        <View style={ui.flex}>
          <Button
            textSize={17}
            style={ui.flex1}
            text='Confirm'
            onClick={() => onClose(true)}/>
          <Button
            textSize={17}
            style={styles.cancelCloseBtn}
            text='Close'
            onClick={() => onClose(false)}/>
        </View>
        <Pressable
          style={styles.closeIcon}
          android_ripple={rippleLess}
          onPress={() => onClose(false)}>
          <Ionicons
            name='close-outline'
            size={30}
            color={'#999'} />
        </Pressable>
      </View>
    </Modal>
  );
}

export const RegisterDialog = ({address, onClose}) => {
  return (
    <View style={styles.dialog}>
      <View style={ui.center}>
        <Text style={styles.regTitleText}>Thank you for registering with</Text>
        <Image
          source={require('../../images/app-logo.png')}
          style={Styles.logo}
        />
        <Text style={styles.regMessageText}>a confirmation email has been sent to</Text>
        <Text style={styles.regMessageLink}>{address}</Text>
      </View>
      <View style={$padding(12,0)}>
        <Button
          text="Back to Login"
          onClick={onClose}/>
      </View>
      <Ionicons
        name='close-outline'
        size={30}
        color={'#999'}
        style={styles.closeIcon}
        onPress={onClose} />
    </View>
  );
}

const ErrorImage = ({code}) => {
  switch (code) {
    case 'A1':
      return (
        <Image
          style={styles.errorImage}
          source={require('../../images/site/error-A1.jpg')}/>
      );
    case 'A4':
      return (
        <Image
          style={styles.errorImage}
          source={require('../../images/site/error-A4.jpg')}/>
      );
    case 'A5':
      return (
        <Image
          style={styles.errorImage}
          source={require('../../images/site/error-A5.jpg')}/>
      );
    case 'A9':
      return (
        <Image
          style={styles.errorImage}
          source={require('../../images/site/error-A9.jpg')}/>
      );
    default:
      return (
        <Image
          style={styles.errorImage}
          source={require('../../images/site/error-A9.jpg')}/>
      );
  }
}

const styles = StyleSheet.create({
  dialog: {
    width: DialogMaxWidth,
    paddingTop: 16,
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 16,
    marginLeft: 'auto',
    marginRight: 'auto',
    borderRadius: isIOS ? 20 : 3,
    backgroundColor: 'white'
  },
  title: {
    color: '#000',
    fontSize: 24,
    textAlign: "center"
  },
  message: {
    zIndex: 2,
    color: '#333',
    fontSize: 14,
    lineHeight: 22,
    paddingTop: 16,
    paddingLeft: 32,
    paddingRight: 32,
    paddingBottom: 2,
    textAlign: "center"
  },
  loginTipView: {
    zIndex: 1,
    marginTop: -18,
    paddingLeft: 12,
    paddingRight: 12,
    alignItems: 'flex-end',
    flexDirection: "row"
  },
  tipText: {
    flex: 1,
    color: '#999',
    fontSize: 12,
    paddingBottom: 12
  },
  tipImage: {
    width: 96.6,
    height: 83.4
  },
  loginButton: {
    marginTop: -2,
    borderRadius: 10
  },
  loginButtonView: {
    flex: 1,
    height: 54,
    alignItems: 'center',
    justifyContent: 'center'
  },
  signUpView: {
    color: '#333',
    paddingTop: 16,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  signUpText: {
    color: '#333',
    fontSize: 12
  },
  signUpLink: {
    fontSize: 12,
    padding: 8,
    ...ui.link,
    textDecorationLine: "underline"
  },
  closeIcon: {
    top: 12,
    right: 12,
    position: "absolute"
  },
  errorImage: {
    width: DialogMaxWidth,
    height: DialogMaxWidth * 0.2,
    marginTop: 4,
    marginLeft: -20
  },
  regTitleText: {
    color: '#000',
    fontSize: 20,
    ...$padding(32, 0, 16),
    textAlign: 'center'
  },
  regMessageText: {
    color: '#000',
    fontSize: 14,
    paddingTop: 24,
    lineHeight: 20
  },
  regMessageLink: {
    ...ui.link,
    fontSize: 14,
    paddingBottom: 16
  },
  cancelCloseBtn: {
    flex: 1,
    marginLeft: 16,
    backgroundColor: '#ddd'
  }
})