Fix saving draft values for Checkboxes

src/components/CheckboxWithLabel.js

@@ -40,16 +40,21 @@ const propTypes = {
     /** Error text to display */
     errorText: PropTypes.string,
 
+    /** Value for checkbox. This prop is intended to be set by Form.js only */
+    value: PropTypes.bool,
+
     /** The default value for the checkbox */
     defaultValue: PropTypes.bool,
 
     /** React ref being forwarded to the Checkbox input */
     forwardedRef: PropTypes.func,
 
     /** The ID used to uniquely identify the input in a Form */
+    /* eslint-disable-next-line react/no-unused-prop-types */
     inputID: PropTypes.string,
 
     /** Saves a draft of the input value when used in a form */
+    /* eslint-disable-next-line react/no-unused-prop-types */
     shouldSaveDraft: PropTypes.bool,
 };
 
@@ -61,6 +66,7 @@ const defaultProps = {
     errorText: '',
     shouldSaveDraft: false,
     isChecked: false,
+    value: false,
     defaultValue: false,
     forwardedRef: () => {},
 };
@@ -69,7 +75,7 @@ class CheckboxWithLabel extends React.Component {
     constructor(props) {
         super(props);
 
-        this.isChecked = props.defaultValue || props.isChecked;
+        this.isChecked = props.value || props.defaultValue || props.isChecked;
         this.LabelComponent = props.LabelComponent;
         this.defaultStyles = [styles.flexRow, styles.alignItemsCenter];
         this.wrapperStyles = _.isArray(props.style) ? [...this.defaultStyles, ...props.style] : [...this.defaultStyles, props.style];
@@ -92,8 +98,6 @@ class CheckboxWithLabel extends React.Component {
                         label={this.props.label}
                         hasError={Boolean(this.props.errorText)}
                         forwardedRef={this.props.forwardedRef}
-                        inputID={this.props.inputID}
-                        shouldSaveDraft={this.props.shouldSaveDraft}
                     />
                     <TouchableOpacity
                         focusable={false}

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -122,7 +122,6 @@ class BankAccountManualStep extends React.Component {
                             </View>
                         )}
                         defaultValue={ReimbursementAccountUtils.getDefaultStateForField(this.props, 'acceptTerms', false)}
-                        shouldSaveDraft
                     />
                 </Form>
             </>

src/pages/settings/Payments/AddDebitCardPage.js

@@ -191,7 +191,6 @@ class DebitCardPage extends Component {
                             </>
                         )}
                         style={[styles.mt4]}
-                        shouldSaveDraft
                     />
                 </Form>
             </ScreenWrapper>