ChargEco/Strides-APP/app/pages/about/Contact.js

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';

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>
        <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
  }
})