From 8393bfe2dbc76373382c6ad71cedf3a0124fca9c Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@commitchange.com>
Date: Fri, 19 Oct 2018 13:21:17 -0500
Subject: [PATCH] Fix notification bug on the supporter side panel

---
 app/views/nonprofits/payments/index.html.erb          |  1 -
 .../js/nonprofits/payments/index/payment_details.js   |  1 +
 .../index/sidepanel/offsite-donation-form.js          |  2 +-
 javascripts/src/components/common/Modal.tsx           |  2 +-
 .../src/components/common/form/ReactSelect.tsx        | 11 +++--------
 .../CreateOffsitePaymentPane.tsx                      |  1 +
 .../components/edit_payment_pane/EditPaymentPane.tsx  |  7 ++++---
 types/mobx-react-form/index.d.ts                      |  3 +++
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/views/nonprofits/payments/index.html.erb b/app/views/nonprofits/payments/index.html.erb
index d95f1d36..3611db16 100644
--- a/app/views/nonprofits/payments/index.html.erb
+++ b/app/views/nonprofits/payments/index.html.erb
@@ -20,7 +20,6 @@
 
   <script>
     appl.def('open_donation_modal', function(payment_details) {
-      $('.modal').removeClass('inView')
 
       function SetupLoadReactEditPaymentPane(modalActive){
         LoadReactEditPaymentPane(document.getElementById('EditPaymentPaneElement'),
diff --git a/client/js/nonprofits/payments/index/payment_details.js b/client/js/nonprofits/payments/index/payment_details.js
index 9d926f91..5eb5e4d4 100644
--- a/client/js/nonprofits/payments/index/payment_details.js
+++ b/client/js/nonprofits/payments/index/payment_details.js
@@ -96,6 +96,7 @@ appl.def('start_loading', function(){
 appl.def('update_donation__success', function() {
   appl.ajax_payment_details.fetch(appl.payment_details.data.id)
   appl.def('loading', false)
+	// appl.close_modal()
   appl.notify('Donation successfully updated!')
 })
 
diff --git a/client/js/nonprofits/supporters/index/sidepanel/offsite-donation-form.js b/client/js/nonprofits/supporters/index/sidepanel/offsite-donation-form.js
index 359fd828..a75b722a 100644
--- a/client/js/nonprofits/supporters/index/sidepanel/offsite-donation-form.js
+++ b/client/js/nonprofits/supporters/index/sidepanel/offsite-donation-form.js
@@ -16,7 +16,7 @@ function init(parentState) {
   var state = {
     submit$: flyd.stream()
   , supporter$: parentState.supporter$
-  , saved$: flyd.stream(Math.random())
+  , saved$: flyd.stream()
   }
   
 
diff --git a/javascripts/src/components/common/Modal.tsx b/javascripts/src/components/common/Modal.tsx
index 0d3fd2a5..679c8728 100644
--- a/javascripts/src/components/common/Modal.tsx
+++ b/javascripts/src/components/common/Modal.tsx
@@ -10,7 +10,7 @@ export interface ModalProps
   titleText?: string
   focusDialog?:boolean
   dialogStyle?:any
-  childGenerator:() => JSX.Element
+  childGenerator:() => any
 }
 
 class Modal extends React.Component<ModalProps, {}> {
diff --git a/javascripts/src/components/common/form/ReactSelect.tsx b/javascripts/src/components/common/form/ReactSelect.tsx
index a6d71056..acba6f6e 100644
--- a/javascripts/src/components/common/form/ReactSelect.tsx
+++ b/javascripts/src/components/common/form/ReactSelect.tsx
@@ -23,15 +23,10 @@ class ReactSelect extends React.Component<InputTypes, {}> {
     super(props)
   }
 
-  @observable
-  field:Field
-
 
   @action.bound
   componentWillMount(){
 
-    this.field = this.props.field
-
 
     this.updateProps()
   }
@@ -46,8 +41,8 @@ class ReactSelect extends React.Component<InputTypes, {}> {
 
   @action.bound
   updateProps() {
-    this.field.set('label', castToNullIfUndef(this.props.label))
-    this.field.set('placeholder', castToNullIfUndef(this.props.placeholder))
+    this.props.field.set('label', castToNullIfUndef(this.props.label))
+    this.props.field.set('placeholder', castToNullIfUndef(this.props.placeholder))
   }
 
 
@@ -64,7 +59,7 @@ class ReactSelect extends React.Component<InputTypes, {}> {
 
   render() {
 
-    return <select {...this.winnowProps()} {...this.field.bind()}>
+    return <select {...this.winnowProps()} {...this.props.field.bind()}>
       { this.props.options ? this.props.options.map(option =>
         <option key={option.id} value={option.id}>{option.name}</option>
       ) : this.props.children
diff --git a/javascripts/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx b/javascripts/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
index a4f3db99..37786172 100644
--- a/javascripts/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
+++ b/javascripts/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
@@ -180,6 +180,7 @@ class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPa
   }
 
   render() {
+    this.form.values()
     const modal =
       <Modal modalActive={this.props.modalActive} titleText={'Edit Donation'} focusDialog={true}
              onClose={this.props.onClose} dialogStyle={{minWidth:'768px'}} childGenerator={() => {
diff --git a/javascripts/src/components/edit_payment_pane/EditPaymentPane.tsx b/javascripts/src/components/edit_payment_pane/EditPaymentPane.tsx
index 813b7686..7dae8151 100644
--- a/javascripts/src/components/edit_payment_pane/EditPaymentPane.tsx
+++ b/javascripts/src/components/edit_payment_pane/EditPaymentPane.tsx
@@ -275,12 +275,12 @@ class EditPaymentPane extends React.Component<EditPaymentPaneProps & InjectedInt
           {readableKind(this.props.data.kind)}
 
           {
-            this.props.data.offsite_payment && this.props.data.offsite_payment ?
+            this.props.data.offsite_payment && this.props.data.offsite_payment && this.props.data.offsite_payment.kind ?
 
               <span>
 
                 &nbsp; ({this.props.data.offsite_payment.kind})
-              </span> : false
+              </span> : undefined
 
           }
         </td>
@@ -481,7 +481,8 @@ class EditPaymentPane extends React.Component<EditPaymentPaneProps & InjectedInt
 
   render() {
 
-
+    //force it to check the form values so this updates
+    this.form.values()
 
     const modal =
       <Modal modalActive={this.props.modalActive} titleText={'Edit Donation'} focusDialog={true}
diff --git a/types/mobx-react-form/index.d.ts b/types/mobx-react-form/index.d.ts
index b14c7a35..7525856a 100644
--- a/types/mobx-react-form/index.d.ts
+++ b/types/mobx-react-form/index.d.ts
@@ -1,3 +1,5 @@
+import { values } from "mobx";
+
 // License: LGPL-3.0-or-later
 
 interface ValidationInput {
@@ -315,6 +317,7 @@ export class Form implements Base {
     readonly isValid :boolean;
     readonly size:number
 
+    values(): {[fields:string] : ValuesResponse|string}
     
 }