adding terms and conditions

Author: samuelcolvin

public/index.html

@@ -63,6 +63,7 @@
       router_mode: 'history',
       mode: 'enquiry',
       api_root: api_root,
+      terms_link: 'https://www.example.com',
     })
     socket(public_key, {
       element: '#socket4',

src/components/shared/EnquiryForm.js

@@ -93,6 +93,13 @@ class EnquiryForm extends Component {
         get_text('contractor_enquiry', {contractor_name: this.props.contractor.name}) :
         get_text('enquiry', {})
     )
+    const terms_field = this.props.config.terms_link && {
+      type: 'checkbox',
+      field: 'terms_and_conditions',
+      label: get_text('terms_title'),
+      help_class: 'tcs-terms',
+      required: true,
+    }
     return (
       <div className="tcs-enquiry">
         <IfElse v={this.state.submitted}>
@@ -118,6 +125,17 @@ class EnquiryForm extends Component {
                        set_enquiry_data={this.set_enquiry_data}/>
               ))}
 
+              {terms_field && <Input key="terms"
+                     field={terms_field}
+                     get_text={get_text}
+                     enquiry_data={this.state.enquiry_data}
+                     set_enquiry_data={this.set_enquiry_data}>
+                {get_text('terms_help')}&nbsp;
+                <a href={this.props.config.terms_link} target="_blank">
+                  {get_text('terms_link')}
+                </a>.
+              </Input>}
+
               <div id={this.grecaptcha_container_id} className="grecaptcha"/>
 
               <If v={this.state.grecaptcha_missing}>

src/components/shared/Input.js

@@ -130,7 +130,8 @@ class Input extends Component {
 
   render () {
     const field = this.props.field
-    const field_label = field.label + (field.required ? this.props.get_text('required') : '')
+    let field_label = field.label
+    field_label += field.required && field.type !== 'checkbox' ? this.props.get_text('required') : ''
     const name = field.prefix ? field.prefix + '-' + field.field : field.field
     let value
     if (field.prefix) {
@@ -144,8 +145,8 @@ class Input extends Component {
     return (
       <div className="tcs-field" id={'field-' + name}>
         <Input field={field} name={name} value={value} field_label={field_label} on_change={this.on_change}/>
-        <div className={'help-text' + (field.prefix ? '' : ' muted')}>
-          {field.help_text}
+        <div className={field.help_class || ('help-text' + (field.prefix ? '' : ' muted'))}>
+          {this.props.children || field.help_text}
         </div>
       </div>
     )

src/index.js

@@ -89,7 +89,10 @@ const STRINGS = {
   location: 'Location',
   not_you_sign_out: 'Not you? sign out',
   added: 'Added',
-  assuming_timezone: "Times are based off your browser's timezone of {timezone}"
+  assuming_timezone: "Times are based off your browser's timezone of {timezone}",
+  terms_title: 'Terms and Conditions',
+  terms_help: 'I have read and agree to the',
+  terms_link: 'terms and conditions',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal', 'appointments']

src/styles/enquiry.scss

@@ -24,9 +24,18 @@ form.tcs {
   }
 }
 
+.tcs-terms {
+  color: #666;
+  a {
+    color: #044d9c;
+    text-decoration: none;
+  }
+}
+
 .grecaptcha > div {
-  margin: 0 auto;
+  margin: 8px auto;
 }
+
 .error-msg {
   color: darkred;
   text-align: center;

src/styles/input.scss

@@ -40,7 +40,8 @@ $border-radius: 5px;
     display: block;
   }
   input[type="checkbox"] {
-      width: auto;
+    width: auto;
+    margin-right: 10px;
   }
   .help-text {
     font-size: 14px;