Schedule options reset (#1715)

* fix reseting of schedule status on successful transaction

* updated changelog

* fix flow error

Author: James Baxley

CHANGELOG.md

@@ -22,3 +22,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - fixed live formatting of add to cart inputs when adding less than a dollar
 - fixed schedule date to be correct based on utc time
 - fixed issue when scheduling using custom frequency
+- fixed reseting of schedule on giving add to cart form

imports/components/@primitives/UI/forms/Checkbox.js

@@ -34,6 +34,12 @@ export default class Checkbox extends React.Component {
     checked: false,
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.defaultValue && !nextProps.defaultValue) {
+      this.setState({ checked: false });
+    }
+  }
+
   disabled = () => {
     if (this.props.disabled) {
       return this.props.disabled; // eslint-disable-line
@@ -109,7 +115,7 @@ export default class Checkbox extends React.Component {
           style={{ marginTop: "-1px", cursor: "pointer" }}
           htmlFor={this.props.id || this.props.label || this.props.name}
         >
-          <small data-spec="input-label" style={this.getStyles(this.props.defaultValue)}>
+          <small data-spec="input-label" style={this.getStyles(this.state.checked !== false)}>
             {this.props.children}
           </small>
         </label>
@@ -120,9 +126,10 @@ export default class Checkbox extends React.Component {
           name={this.props.name || this.props.label}
           className={this.props.inputClasses}
           disabled={this.disabled()}
-          defaultChecked={(this.state.checked !== false || this.props.defaultValue) ? "checked" : ""}
+          checked={(this.state.checked !== false || this.props.defaultValue) ? "checked" : ""}
           onClick={this.props.clicked}
           style={{ width: 0 }}
+
           data-spec="input"
         />
 

imports/components/@primitives/UI/forms/__tests__/Checkbox.js

@@ -21,7 +21,7 @@ it ("should accept a default value", () => {
 
   const inputProps = getSingleSpecWrapper(component, "input").props();
 
-  expect(inputProps.defaultChecked).toEqual("checked");
+  expect(inputProps.checked).toEqual("checked");
 });
 
 it ("should disable input with disabled prop", () => {

imports/components/@primitives/UI/forms/__tests__/__snapshots__/Checkbox.js.snap

@@ -15,8 +15,8 @@ exports[`test pushes type prop to inputclasses 1`] = `
       style={Object {}} />
   </label>
   <input
+    checked=""
     data-spec="input"
-    defaultChecked=""
     style={
       Object {
         "width": 0,
@@ -57,15 +57,11 @@ exports[`test should accept a default value 1`] = `
       }>
       <small
         data-spec="input-label"
-        style={
-          Object {
-            "color": "#303030",
-          }
-        } />
+        style={Object {}} />
     </label>
     <input
+      checked="checked"
       data-spec="input"
-      defaultChecked="checked"
       style={
         Object {
           "width": 0,
@@ -100,8 +96,8 @@ exports[`test should accept an id 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       id="harambe"
       style={
         Object {
@@ -139,8 +135,8 @@ exports[`test should accept label 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       id="harambe"
       name="harambe"
       style={
@@ -179,8 +175,8 @@ exports[`test should accept name prop 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       id="harambe"
       name="harambe"
       style={
@@ -223,8 +219,8 @@ exports[`test should add classes with classes prop 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       style={
         Object {
           "width": 0,
@@ -258,8 +254,8 @@ exports[`test should add classes with classes prop 2`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       style={
         Object {
           "width": 0,
@@ -293,9 +289,9 @@ exports[`test should add inputClasses with inputClasses prop 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       className="test1 harambe"
       data-spec="input"
-      defaultChecked=""
       style={
         Object {
           "width": 0,
@@ -329,8 +325,8 @@ exports[`test should disable input with disabled prop 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       disabled={true}
       style={
         Object {
@@ -366,8 +362,8 @@ exports[`test should display children 1`] = `
       </small>
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       style={
         Object {
           "width": 0,
@@ -401,8 +397,8 @@ exports[`test should hide label with hideLabel prop 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       style={
         Object {
           "width": 0,
@@ -431,8 +427,8 @@ exports[`test should render with minimal props 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       style={
         Object {
           "width": 0,
@@ -466,8 +462,8 @@ exports[`test should respond to onclick prop 1`] = `
         style={Object {}} />
     </label>
     <input
+      checked=""
       data-spec="input"
-      defaultChecked=""
       onClick={[Function]}
       style={
         Object {

imports/components/giving/add-to-cart/Layout.js

@@ -19,6 +19,7 @@ type ILayout = {
   authorized: boolean,
   canCheckout: boolean,
   setCanCheckout: Function,
+  bindSubComponentReset: Function,
 }
 
 export default ({
@@ -32,6 +33,7 @@ export default ({
   authorized,
   canCheckout,
   setCanCheckout,
+  bindSubComponentReset,
 }: ILayout) => (
   <div className="push-top@handheld soft-half-top@lap-and-up">
     <Forms.Form
@@ -74,7 +76,11 @@ export default ({
         </div>
 
         {/* Schedule */}
-        <ScheduleLayout setCanCheckout={setCanCheckout} authorized={authorized} />
+        <ScheduleLayout
+          setCanCheckout={setCanCheckout}
+          authorized={authorized}
+          bindSubComponentReset={bindSubComponentReset}
+        />
 
         {/* Total information */}
         <h3 className="display-inline-block text-dark-primary push-half-bottom push-half-right" style={{ verticalAlign: "middle" }}>

imports/components/giving/add-to-cart/Schedule/__tests__/index.js

@@ -31,6 +31,7 @@ const generateComponent = (additionalProps = {}) => {
     authorized: true,
     saveSchedule: jest.fn(),
     setCanCheckout: jest.fn(),
+    bindSubComponentReset: jest.fn(),
   };
   return (
     <Schedule {...defaultProps} {...additionalProps} />
@@ -284,4 +285,19 @@ describe("Class", () => {
       });
     });
   });
+
+  describe("reset-binding", () => {
+    it("resets when called", () => {
+      let reset = null;
+      const bindSubComponentReset = (fn) => reset = jest.fn(fn);
+
+      const wrapper = mount(generateComponent({ bindSubComponentReset }));
+      const originalState = wrapper.state();
+      wrapper.setState({ checked: true });
+
+      reset();
+      expect(wrapper.state()).toEqual(originalState);
+    });
+  });
+
 });

imports/components/giving/add-to-cart/Schedule/index.js

@@ -12,6 +12,7 @@ type IScheduleProps = {
   saveSchedule: Function,
   setCanCheckout: Function,
   preCheck: boolean,
+  bindSubComponentReset: Function,
 };
 
 type IScheduleState = {
@@ -50,6 +51,7 @@ export class Schedule extends Component {
 
   componentWillMount() {
     if (this.props.preCheck) this.setState({ checked: true });
+    this.props.bindSubComponentReset(this.toggleSchedule);
   }
 
   componentDidMount() {

imports/components/giving/add-to-cart/__tests__/__snapshots__/index.js.snap

@@ -258,6 +258,7 @@ exports[`CartContainer > Lifecycle functions accepts query string prefills the f
         },
       ]
     }
+    bindSubComponentReset={[Function]}
     canCheckout={true}
     changeAmount={[Function]}
     changeFund={[Function]}
@@ -322,6 +323,7 @@ exports[`CartContainer > Lifecycle functions accepts query string prefills the f
                 <div
                   className="display-block one-whole soft-bottom" />
                 <mockConstructor
+                  bindSubComponentReset={[Function]}
                   setCanCheckout={[Function]}>
                   <div />
                 </mockConstructor>
@@ -402,7 +404,7 @@ Object {
 
 exports[`CartContainer > Lifecycle functions should clear transactions on success 1`] = `
 Object {
-  "canCheckout": true,
+  "canCheckout": false,
   "subfunds": Array [
     Object {
       "accounts": Array [
@@ -422,7 +424,7 @@ Object {
 
 exports[`CartContainer > Lifecycle functions should clear transactions on when amount is set to 0 1`] = `
 Object {
-  "canCheckout": true,
+  "canCheckout": false,
   "subfunds": Array [
     Object {
       "accounts": Array [
@@ -498,6 +500,7 @@ exports[`test should properly render with multiple accounts 1`] = `
         },
       ]
     }
+    bindSubComponentReset={[Function]}
     canCheckout={false}
     changeAmount={[Function]}
     changeFund={[Function]}
@@ -604,6 +607,7 @@ exports[`test should properly render with multiple accounts 1`] = `
                   </SmallButton>
                 </div>
                 <mockConstructor
+                  bindSubComponentReset={[Function]}
                   setCanCheckout={[Function]}>
                   <div />
                 </mockConstructor>
@@ -672,6 +676,7 @@ exports[`test should render with minimal props 1`] = `
       },
     ]
   }
+  bindSubComponentReset={[Function]}
   canCheckout={false}
   changeAmount={[Function]}
   changeFund={[Function]}

imports/components/giving/add-to-cart/__tests__/index.js

@@ -116,13 +116,17 @@ describe("CartContainer > Lifecycle functions", () => {
 
   it("should clear transactions on success", () => {
     const spy = jest.fn();
+    const resetSpy = jest.fn();
     const component = mount(generateComponent({
       clearTransactions: spy,
       status: "success",
     }));
+    const { bindSubComponentReset } = component.instance();
+    bindSubComponentReset(resetSpy);
     expect(spy).toHaveBeenCalledTimes(1);
     component.setProps({ status: "default" });
     expect(component.state()).toMatchSnapshot();
+    expect(resetSpy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledTimes(2);
   });
 

imports/components/giving/add-to-cart/index.js

@@ -60,6 +60,7 @@ class CartContainer extends Component {
     accounts: [],
   }
 
+  resetCbs = []
   state = { subfunds: [], canCheckout: true }
 
   componentWillMount() {
@@ -89,11 +90,16 @@ class CartContainer extends Component {
       (this.props.total && total === 0)
     ) {
       this.props.clearTransactions();
+      this.resetCbs.forEach((fn) => fn && fn());
       const subfunds = this.calculateDefaultSubfunds();
-      this.setState({ subfunds });
+      this.setState({ subfunds, canCheckout: false });
     }
   }
 
+  bindSubComponentReset = (reset: Function) => {
+    this.resetCbs.push(reset);
+  }
+
   calculateDefaultSubfunds = (query: Object = {}) => {
     // copy array to mutate it
     let accounts = [...this.props.accounts];
@@ -321,6 +327,7 @@ class CartContainer extends Component {
         authorized={authorized}
         canCheckout={this.canCheckout(total)}
         setCanCheckout={this.setCanCheckout}
+        bindSubComponentReset={this.bindSubComponentReset}
       />
 
     );