ChargEco/Strides-APP/app/pages/chargingV2/DialogPayPerUse.js

import React from 'react';
import { StyleSheet } from 'react-native';
import { Modal } from 'react-native';
import { Text, View } from 'react-native';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';

const DialogPayPerUse = ({
  amount="",
  visible,
  onClose
}) => (
  <Modal
    visible={visible}
    transparent={true}>
    <View style={styles.container}>
      <View style={styles.content}>
        <TextView style={styles.title}>{$t("payment.titleNote")}</TextView>
        <TextView style={styles.message}>{$t("payment.tipsPayPerUseAmount").replace("{mm}", amount)}</TextView>
        <View style={ui.flexc}>
          <Button
            style={styles.cancelButton}
            text={$t("nav.cancel")}
            textColor={textPrimary}
            onClick={() => onClose(false)}/>
          <Button
            style={styles.confirmButton}
            text={$t("nav.confirm")}
            borderRadius={0}
            onClick={() => onClose(true)}/>
        </View>
      </View>
    </View>
  </Modal>
);

export default DialogPayPerUse;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.1)'
  },
  content: {
    width: Dialog.dialogWidth,
    borderRadius: 4,
    overflow: 'hidden',
    backgroundColor: colorLight
  },
  title: {
    paddingTop: 16,
    paddingLeft: 16,
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  message: {
    padding: 16,
    color: textPrimary,
    fontSize: 14,
    paddingTop: 16,
    paddingBottom: 32
  },
  cancelButton: {
    flex: 1,
    borderColor: '#EEE',
    borderWidth: 1,
    borderRadius: 0,
    backgroundColor: textButton
  },
  confirmButton: {
    flex: 1,
    borderColor: colorAccent,
    borderWidth: 1,
    borderRadius: 0,
    backgroundColor: colorAccent
  }
})