diff --git a/src/components/TransactionItem.js b/src/components/TransactionItem.js
index cd5e524dbb28..6e218d6530ae 100644
--- a/src/components/TransactionItem.js
+++ b/src/components/TransactionItem.js
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, {Component} from 'react';
import PropTypes from 'prop-types';
+import { View, Text, Pressable } from 'react-native-web';
import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
import ReportActionItemIOUPreview from '../components/ReportActionItemIOUPreview';
+import styles from '../styles/styles';
const propTypes = {
action: PropTypes.shape(ReportActionPropTypes).isRequired,
@@ -17,6 +19,9 @@ const propTypes = {
// The transaction amount
amount: PropTypes.number,
+
+ // Was this transaction created by the current user
+ createdByUser: PropTypes.bool,
}).isRequired,
};
@@ -26,13 +31,36 @@ const defaultProps = {
},
};
-const TransactionItem = props => (
-
+class TransactionItem extends Component {
+ constructor(props) {
+ super(props);
+
+ this.removeTransaction = this.removeTransaction.bind(this);
+ }
-);
+ removeTransaction() {
+ console.debug('removeTransaction');
+ }
+
+ render() {
+ return (
+
+
+ this.removeTransaction()}
+ >
+
+ {this.props.transaction.createdByUser ? 'Cancel' : 'Decline'}
+
+
+
+ );
+ }
+};
TransactionItem.displayName = 'TransactionItem';
TransactionItem.propTypes = propTypes;
diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js
index d8d115bf5c38..e51d5cd66ff8 100644
--- a/src/styles/utilities/flex.js
+++ b/src/styles/utilities/flex.js
@@ -52,6 +52,10 @@ export default {
alignItems: 'flex-end',
},
+ alignItemsStart: {
+ alignItems: 'start',
+ },
+
flexWrap: {
flexWrap: 'wrap',
},