Make renew link optional field more obvious

betagouv · Jun 26, 2017 · a119a6f · a119a6f
1 parent 6e1dab4
commit a119a6f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/client/src/components/application/Contact/RenewContainer.js b/client/src/components/application/Contact/RenewContainer.js
@@ -13,7 +13,8 @@ export class RenewContainer extends React.Component {
       oldLink: '',
       error: '',
       renewId: '',
-      isVisible: false
+      isVisible: false,
+      hasBeenSkipped: false
     }
     this.onOldLinkChange = this.onOldLinkChange.bind(this)
     this.onCopyApplicationClick = this.onCopyApplicationClick.bind(this)
@@ -52,13 +53,17 @@ export class RenewContainer extends React.Component {
 
   toggleVisibility(event) {
     event.preventDefault()
+    if (this.state.isVisible) {
+      this.setState({ hasBeenSkipped: true })
+    }
     this.setState({ isVisible: !this.state.isVisible })
   }
 
   render() {
     return (
       <RenewForm
         isVisible={this.state.isVisible}
+        hasBeenSkipped={this.state.hasBeenSkipped}
         onOldLinkChange={this.onOldLinkChange}
         onCopyApplicationClick={this.onCopyApplicationClick}
         toggleVisibility={this.toggleVisibility}

diff --git a/client/src/components/application/Contact/RenewForm.js b/client/src/components/application/Contact/RenewForm.js
@@ -5,13 +5,15 @@ import ButtonWrapperComponent from '../../common/ButtonWrapperComponent'
 
 const renewFromHeader = "Repartir de ma candidature de l'année passée (facultatif)"
 
-const RenewForm = ({ isVisible, oldLink, error, onOldLinkChange, onCopyApplicationClick, toggleVisibility }) => {
+const RenewForm = ({ isVisible, hasBeenSkipped, oldLink, error, onOldLinkChange, onCopyApplicationClick, toggleVisibility }) => {
+  const bsStyle = hasBeenSkipped ? 'default' : 'primary'
+
   if (!isVisible) {
-    return <Button bsStyle="primary" onClick={toggleVisibility}><Glyphicon glyph="plus" /> {renewFromHeader}</Button>
+    return <Button bsStyle={bsStyle} onClick={toggleVisibility}><Glyphicon glyph="plus" /> {renewFromHeader}</Button>
   }
   else {
     return (
-      <Panel bsStyle="primary" header={renewFromHeader}>
+      <Panel bsStyle={bsStyle} header={renewFromHeader}>
         <form>
           <FormGroup>
             <ControlLabel>Lien de ma candidature de l'année passée</ControlLabel>
@@ -25,7 +27,7 @@ const RenewForm = ({ isVisible, oldLink, error, onOldLinkChange, onCopyApplicati
           </FormGroup>
           <ButtonToolbar>
             <button type="button" className="btn btn-success" disabled={!oldLink || !!error} onClick={onCopyApplicationClick}>Copier ma candidature</button>
-            <button type="button" className="btn btn-warning" onClick={toggleVisibility}>Je n'ai pas le lien</button>
+            <button type="button" className="btn btn-warning" onClick={toggleVisibility}>Continuer sans le lien</button>
           </ButtonToolbar>
         </form>
       </Panel>
@@ -39,6 +41,7 @@ RenewForm.propTypes = {
   onCopyApplicationClick: PropTypes.func.isRequired,
   toggleVisibility: PropTypes.func.isRequired,
   isVisible: PropTypes.bool.isRequired,
+  hasBeenSkipped: PropTypes.bool.isRequired,
   error: PropTypes.string
 }