fix(pages/expense): allow pay action to submit

opencollective · May 8, 2018 · 4551a9a · 4551a9a
1 parent 4b0a431
commit 4551a9a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/components/ExpenseWithData.js b/src/components/ExpenseWithData.js
@@ -16,7 +16,10 @@ class ExpenseWithData extends React.Component {
     view: PropTypes.string, // "compact" for homepage (can't edit expense, don't show header), "list" for list view, "details" for details view
     filter: PropTypes.object, // { category, recipient }
     defaultAction: PropTypes.string, // "new" to open the new expense form by default
-    LoggedInUser: PropTypes.object
+    LoggedInUser: PropTypes.object,
+    allowPayAction: PropTypes.bool,
+    lockPayAction: PropTypes.func,
+    unlockPayAction: PropTypes.func,
   }
 
   constructor(props) {
@@ -28,7 +31,10 @@ class ExpenseWithData extends React.Component {
       data,
       LoggedInUser,
       collective,
-      view
+      view,
+      allowPayAction,
+      lockPayAction,
+      unlockPayAction,
     } = this.props;
 
     if (data.error) {
@@ -52,7 +58,10 @@ class ExpenseWithData extends React.Component {
           view={view}
           editable={true}
           LoggedInUser={LoggedInUser}
-          />
+          allowPayAction={allowPayAction}
+          lockPayAction={lockPayAction}
+          unlockPayAction={unlockPayAction}
+        />
 
         { view === 'details' &&
           <CommentsWithData

diff --git a/src/pages/expense.js b/src/pages/expense.js
@@ -22,7 +22,9 @@ class ExpensePage extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      isPayActionLocked: false,
+    };
   }
 
   async componentDidMount() {
@@ -110,7 +112,10 @@ class ExpensePage extends React.Component {
                   collective={collective}
                   view="details"
                   LoggedInUser={this.state.LoggedInUser}
-                  />
+                  allowPayAction={!this.state.isPayActionLocked}
+                  lockPayAction={() => this.setState({ isPayActionLocked: true })}
+                  unlockPayAction={() => this.setState({ isPayActionLocked: false })}
+                />
 
               </div>