add app/pages/charge/InfoDialog.js

Strides-SPAPP/app/pages/charge/InfoDialog.js

@@ -0,0 +1,325 @@
+/**
+ * 充电弹窗组件
+ * @邠心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}>{$t('charging.titleOops')}</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={$t('sign.btnLogin')}
+        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}>{$t('sign.btnSignUp')}</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}>{$t('charging.titleOops')}</Text>
+        <Text style={styles.message}>{message}</Text>
+        <ErrorImage code={code}/>
+        <Button
+          textSize={17}
+          style={styles.loginButton}
+          viewStyle={styles.loginButtonView}
+          text={$t('charging.btnOkay')}
+          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}>{$t('wallet.titleLowCredits')}</Text>
+        <Text style={styles.message}>{$t('wallet.creditIsBelow5')}</Text>
+        <Text style={styles.message}>{$t('wallet.tipsLowCredits')}</Text>
+        <View style={$padding(12,0)}>
+          <Button
+            text={$t('wallet.btnTop_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}>{$t('charging.cancelReservation')}</Text>
+        <Text style={styles.message}>{$t('charging.confirmCancelReservation')}</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={$t('common.confirm')}
+            onClick={() => onClose(true)}/>
+          <Button
+            textSize={17}
+            style={styles.cancelCloseBtn}
+            text={$t('common.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}>{$t('sign.thanksRegisterWith')}</Text>
+        <Image
+          source={require('../../images/app-logo.png')}
+          style={Styles.logo}
+          resizeMode='contain'
+        />
+        <Text style={styles.regMessageText}>{$t('sign.aConfirmationEmailTo')}</Text>
+        <Text style={styles.regMessageLink}>{address}</Text>
+      </View>
+      <View style={$padding(12,0)}>
+        <Button
+          text={$t('sign.back2Login')}
+          onClick={onClose}/>
+      </View>
+      <Pressable
+        style={styles.closeIcon}
+        android_ripple={rippleLess}
+        onPress={onClose}>
+        <Ionicons
+          name='close-outline'
+          size={30}
+          color={'#999'}/>
+      </Pressable>
+    </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: colorLight
+  },
+  title: {
+    color: '#000',
+    fontSize: 24,
+    textAlign: "center"
+  },
+  message: {
+    zIndex: 2,
+    color: textPrimary,
+    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: textPrimary,
+    paddingTop: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  signUpText: {
+    color: textPrimary,
+    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'
+  }
+})