From 2f1c753a99ff4d2a2cb9215accbccde55a8bf5bb Mon Sep 17 00:00:00 2001 From: James Baxley Date: Mon, 9 Jan 2017 07:47:30 -0500 Subject: [PATCH] Schedule options reset (#1715) * fix reseting of schedule status on successful transaction * updated changelog * fix flow error --- CHANGELOG.md | 1 + .../@primitives/UI/forms/Checkbox.js | 11 +++++-- .../UI/forms/__tests__/Checkbox.js | 2 +- .../__tests__/__snapshots__/Checkbox.js.snap | 32 ++++++++----------- .../components/giving/add-to-cart/Layout.js | 8 ++++- .../add-to-cart/Schedule/__tests__/index.js | 16 ++++++++++ .../giving/add-to-cart/Schedule/index.js | 2 ++ .../__tests__/__snapshots__/index.js.snap | 9 ++++-- .../giving/add-to-cart/__tests__/index.js | 4 +++ .../components/giving/add-to-cart/index.js | 9 +++++- .../__tests__/__snapshots__/Layout.js.snap | 4 +-- .../__snapshots__/SavePaymentCheckBox.js.snap | 2 +- 12 files changed, 72 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e81ebf66..c750a1719 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/imports/components/@primitives/UI/forms/Checkbox.js b/imports/components/@primitives/UI/forms/Checkbox.js index e9befafe8..cdf7b6021 100644 --- a/imports/components/@primitives/UI/forms/Checkbox.js +++ b/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} > - + {this.props.children} @@ -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" /> diff --git a/imports/components/@primitives/UI/forms/__tests__/Checkbox.js b/imports/components/@primitives/UI/forms/__tests__/Checkbox.js index 52565029c..2286919e4 100644 --- a/imports/components/@primitives/UI/forms/__tests__/Checkbox.js +++ b/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", () => { diff --git a/imports/components/@primitives/UI/forms/__tests__/__snapshots__/Checkbox.js.snap b/imports/components/@primitives/UI/forms/__tests__/__snapshots__/Checkbox.js.snap index 3ac993827..fde8de7f6 100644 --- a/imports/components/@primitives/UI/forms/__tests__/__snapshots__/Checkbox.js.snap +++ b/imports/components/@primitives/UI/forms/__tests__/__snapshots__/Checkbox.js.snap @@ -15,8 +15,8 @@ exports[`test pushes type prop to inputclasses 1`] = ` style={Object {}} /> + style={Object {}} /> (
{/* Schedule */} - + {/* Total information */}

diff --git a/imports/components/giving/add-to-cart/Schedule/__tests__/index.js b/imports/components/giving/add-to-cart/Schedule/__tests__/index.js index 79427c668..23d49dbbe 100644 --- a/imports/components/giving/add-to-cart/Schedule/__tests__/index.js +++ b/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 ( @@ -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); + }); + }); + }); diff --git a/imports/components/giving/add-to-cart/Schedule/index.js b/imports/components/giving/add-to-cart/Schedule/index.js index 96bf84e25..c5f468a12 100644 --- a/imports/components/giving/add-to-cart/Schedule/index.js +++ b/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() { diff --git a/imports/components/giving/add-to-cart/__tests__/__snapshots__/index.js.snap b/imports/components/giving/add-to-cart/__tests__/__snapshots__/index.js.snap index 9a92f5519..036a26254 100644 --- a/imports/components/giving/add-to-cart/__tests__/__snapshots__/index.js.snap +++ b/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
@@ -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`] = `
@@ -672,6 +676,7 @@ exports[`test should render with minimal props 1`] = ` }, ] } + bindSubComponentReset={[Function]} canCheckout={false} changeAmount={[Function]} changeFund={[Function]} diff --git a/imports/components/giving/add-to-cart/__tests__/index.js b/imports/components/giving/add-to-cart/__tests__/index.js index c73ac7935..fbb048950 100644 --- a/imports/components/giving/add-to-cart/__tests__/index.js +++ b/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); }); diff --git a/imports/components/giving/add-to-cart/index.js b/imports/components/giving/add-to-cart/index.js index e05ad200b..fc176add4 100644 --- a/imports/components/giving/add-to-cart/index.js +++ b/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} /> ); diff --git a/imports/components/giving/checkout-views/fieldsets/payment/__tests__/__snapshots__/Layout.js.snap b/imports/components/giving/checkout-views/fieldsets/payment/__tests__/__snapshots__/Layout.js.snap index 4d8f57722..1cacdb77c 100644 --- a/imports/components/giving/checkout-views/fieldsets/payment/__tests__/__snapshots__/Layout.js.snap +++ b/imports/components/giving/checkout-views/fieldsets/payment/__tests__/__snapshots__/Layout.js.snap @@ -173,9 +173,9 @@ exports[`Layout renders custom toggles if passed 1`] = `