add app/pages/about/Contact.js

Strides-SPAPP/app/pages/about/Contact.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import { View, Text, StyleSheet, Image, Linking } from 'react-native';
+import Button from '../../components/Button';
+import app from '../../../app.json';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+
+export default class Contact extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  callPhone() {
+    Linking.openURL("tel:" + app.modules.support.phone)
+  }
+
+  callWhatapp() {
+    Linking.openURL(app.modules.support.whatsapp)
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={ui.center}>
+          <Image
+            style={styles.logo}
+            resizeMode='contain'
+            source={require('../../images/about-logo.png')}/>
+        </View>
+        <TextView style={styles.labelTitle}>{$t("support.labelOpenTime")}</TextView>
+        <TextView style={styles.labelText}>{$t("support.labelCallCentreHotline")}</TextView>
+        <TextView style={styles.contentText}>{$t("support.timeAllDay") + " - " + $t("support.time24Hours")}</TextView>
+        <TextView style={styles.labelText}>{$t("support.labelWhatsappChat")}</TextView>
+        <TextView style={styles.contentText}>{$t("support.timeWeekDay") + " - 9:00AM to 5:00PM" }</TextView>
+        <TextView style={styles.contentText2}>(Except public holidays)</TextView>
+        { utils.isNotEmpty(app.modules.support.fdEmail) && <>
+          <TextView style={styles.labelText}>For Feedback</TextView>
+          <TextView style={styles.contentText}>Please email us at <Text style={ui.link}>{app.modules.support.fdEmail}</Text></TextView>
+        </>}
+        <View style={ui.flex1}></View>
+        <Button
+          text={$t("support.btnCallSupport")}
+          style={styles.buttonPrimary}
+          onClick={() => this.callPhone()}
+          disabled={!app.modules.support.phone}
+        />
+        <Button
+          text={$t("support.btnWhatsapp")}
+          disabled={!app.modules.support.whatsapp}
+          onClick={() => this.callWhatapp()}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: colorLight
+  },
+  logo: {
+    width: 215,
+    height: 70,
+    marginTop: 16,
+    marginBottom: 12
+  },
+  labelTitle: {
+    color: textPrimary,
+    fontSize: 20,
+    fontWeight: 'bold',
+    paddingTop: 16
+  },
+  labelText: {
+    color: textSecondary,
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 4,
+    textDecorationLine: 'underline'
+  },
+  contentText: {
+    color: textSecondary,
+    fontSize: 16
+  },
+  contentText2: {
+    color: textSecondary,
+    fontSize: 12
+  },
+  buttonPrimary: {
+    marginBottom: 16,
+    backgroundColor: colorPrimary
+  }
+})