From 39a624ce02fc3e0fc20ca16e7d8d3a9792de6aa6 Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Sat, 16 Feb 2019 11:28:03 +0800
Subject: [PATCH 1/5] winning submission from challenge 30083737 - Topcoder
 Connect - Wizard redesign - Controls new design + fix to format prices with
 comma

---
 components/Formsy/CheckboxGroup.jsx | 13 ++++++++++---
 components/Formsy/RadioGroup.jsx    | 27 +++++++++++++++++++++++++--
 components/Formsy/format.js         | 12 ++++++++++++
 3 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 components/Formsy/format.js

diff --git a/components/Formsy/CheckboxGroup.jsx b/components/Formsy/CheckboxGroup.jsx
index d1ec0890f..e21e1d4c3 100644
--- a/components/Formsy/CheckboxGroup.jsx
+++ b/components/Formsy/CheckboxGroup.jsx
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { HOC as hoc } from 'formsy-react'
 import cn from 'classnames'
+import { numberWithCommas } from './format'
 
 class CheckboxGroup extends Component {
 
@@ -21,7 +22,7 @@ class CheckboxGroup extends Component {
   }
 
   render() {
-    const { label, name, options, layout } = this.props
+    const { label, name, options, layout, wrapperClass } = this.props
     const hasError = !this.props.isPristine() && !this.props.isValid()
     const disabled = this.props.isFormDisabled() || this.props.disabled
     const errorMessage = this.props.getErrorMessage() || this.props.validationError
@@ -30,7 +31,7 @@ class CheckboxGroup extends Component {
       const curValue = this.props.getValue() || []
       const checked = curValue.indexOf(cb.value) !== -1
       const disabled = this.props.isFormDisabled() || cb.disabled || this.props.disabled
-      const rClass = cn('checkbox-group-item', { disabled })
+      const rClass = cn('checkbox-group-item', { disabled, selected: checked })
       const id = name+'-opt-'+key
       const setRef = (c) => this['element-' + key] = c
       return (
@@ -48,10 +49,16 @@ class CheckboxGroup extends Component {
             <label htmlFor={id}/>
           </div>
           <label className="tc-checkbox-label" htmlFor={id}>{cb.label}</label>
+          {
+            cb.quoteUp && !checked && <div className="checkbox-option-price"> {`+ $${numberWithCommas(cb.quoteUp)}`} </div>
+          }
+          {
+            cb.description && checked && <div className="checkbox-option-description"> {cb.description} </div>
+          }
         </div>
       )
     }
-    const chkGrpClass = cn('checkbox-group', {
+    const chkGrpClass = cn('checkbox-group', wrapperClass, {
       horizontal: layout === 'horizontal',
       vertical: layout === 'vertical'
     })
diff --git a/components/Formsy/RadioGroup.jsx b/components/Formsy/RadioGroup.jsx
index e1f5024f1..197046e48 100644
--- a/components/Formsy/RadioGroup.jsx
+++ b/components/Formsy/RadioGroup.jsx
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { HOC as hoc } from 'formsy-react'
 import cn from 'classnames'
+import { find } from "lodash";
+import { numberWithCommas } from './format'
 
 class RadioGroup extends Component {
 
@@ -15,16 +17,28 @@ class RadioGroup extends Component {
     this.props.onChange(this.props.name, value)
   }
 
+  getSelectedOption() {
+    const {options = [], getValue} = this.props;
+    const value = getValue()
+    return find(options, o => value === o.value)
+  }
+
   render() {
     const { label, name, wrapperClass, options } = this.props
     const hasError = !this.props.isPristine() && !this.props.isValid()
     const disabled = this.props.isFormDisabled() || this.props.disabled
     const errorMessage = this.props.getErrorMessage() || this.props.validationError
+    const selectedOption = this.getSelectedOption()
+    const hasPrice = find(options, o => o.quoteUp)
 
     const renderOption = (radio, key) => {
-      const checked = (this.props.getValue() === radio.value)
+      const relativePrice = (selectedOption, radio) => {
+        const price = (radio.quoteUp || 0) - (selectedOption.quoteUp || 0)
+        return (price < 0 ? '-' : '+') + ' $' + numberWithCommas(Math.abs(price))
+      }
+      const checked = (selectedOption && selectedOption.value === radio.value)
       const disabled = this.props.isFormDisabled() || radio.disabled || this.props.disabled
-      const rClass = cn('radio', { disabled })
+      const rClass = cn('radio', { disabled, selected: checked })
       const id = name+'-opt-'+key
       const setRef = (c) => this['element-' + key] = c
       return (
@@ -39,6 +53,15 @@ class RadioGroup extends Component {
             disabled={disabled}
           />
           <label htmlFor={id}>{radio.label}</label>
+          {
+            hasPrice &&
+            !checked &&
+            (radio.quoteUp || selectedOption) &&
+            <div className="radio-option-price"> {selectedOption ? relativePrice(selectedOption, radio) : `$${numberWithCommas(radio.quoteUp)}`} </div>
+          }
+          {
+            radio.description && checked && <div className="radio-option-description"> {radio.description} </div>
+          }
         </div>
       )
     }
diff --git a/components/Formsy/format.js b/components/Formsy/format.js
new file mode 100644
index 000000000..c01d355d6
--- /dev/null
+++ b/components/Formsy/format.js
@@ -0,0 +1,12 @@
+/**
+ * Helper methods to format values
+ */
+
+/**
+ * Fomats number, separating every 3 digits with comma
+ *
+ * @param {Number} number
+ */
+export function numberWithCommas(number) {
+  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}

From 8dd5ce8952e507ac2ffc99e182ed4ca8a215138c Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Sat, 23 Feb 2019 11:52:38 +0800
Subject: [PATCH 2/5] export TiledCheckboxInput

---
 components/Formsy/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Formsy/index.js b/components/Formsy/index.js
index 859a1c37c..99d67b748 100644
--- a/components/Formsy/index.js
+++ b/components/Formsy/index.js
@@ -8,6 +8,7 @@ import RadioGroup from './RadioGroup'
 import CheckboxGroup from './CheckboxGroup'
 import SliderRadioGroup from './SliderRadioGroup'
 import TiledRadioGroup from './TiledRadioGroup'
+import TiledCheckboxInput from './TiledCheckboxInput'
 
 require('./FormFields.scss')
 
@@ -37,6 +38,7 @@ export default {
     Checkbox,
     CheckboxGroup,
     SliderRadioGroup,
-    TiledRadioGroup
+    TiledRadioGroup,
+    TiledCheckboxInput
   }
 }

From 4bcc613d2d0d33e2f621e9374fc969b8d1b9e6be Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Sun, 24 Feb 2019 10:27:46 +0800
Subject: [PATCH 3/5] winning submission from challenge 30084623 - Topcoder
 Connect - Wizard - Disabled condition

---
 components/Formsy/TiledCheckboxGroup.jsx | 137 +++++++++++++++++++++++
 components/Formsy/index.js               |   4 +-
 2 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 components/Formsy/TiledCheckboxGroup.jsx

diff --git a/components/Formsy/TiledCheckboxGroup.jsx b/components/Formsy/TiledCheckboxGroup.jsx
new file mode 100644
index 000000000..7be9b0396
--- /dev/null
+++ b/components/Formsy/TiledCheckboxGroup.jsx
@@ -0,0 +1,137 @@
+'use strict'
+import React, { PropTypes, Component } from 'react'
+import classNames from 'classnames'
+import Tooltip from '../Tooltip/Tooltip'
+import IconUICheckSimple from '../Icons/IconUICheckSimple'
+import { HOC as hoc } from 'formsy-react'
+
+class TiledCheckboxGroup extends Component {
+  constructor(props) {
+    super(props)
+    this.onChange = this.onChange.bind(this)
+    this.getCheckMarkIconActive = this.getCheckMarkIconActive.bind(this)
+    this.state = { curValue: props.getValue() || [] }
+  }
+
+  onChange(value) {
+    const index = this.state.curValue.indexOf(value)
+    if (index > -1) {
+      this.state.curValue.splice(index, 1)
+    } else {
+      this.state.curValue.push(value)
+    }
+    this.props.setValue(this.state.curValue)
+    this.props.onChange(this.props.name, this.state.curValue)
+  }
+
+  getCheckMarkIconActive() {
+    return (this.props.checkMarkActiveIcon ? this.props.checkMarkActiveIcon : (
+      <span className="check-mark">
+      <IconUICheckSimple fill="#fff" width={12} height={12}/>
+    </span>))
+  }
+
+  render() {
+    const { wrapperClass, options, theme, tabable } = this.props
+    const hasError = !this.props.isPristine() && !this.props.isValid()
+    const disabled = this.props.isFormDisabled() || this.props.disabled
+    const errorMessage = this.props.getErrorMessage() || this.props.validationError
+
+    const renderOption = (opt, idx) => {
+      const checked = this.state.curValue.indexOf(opt.value) > -1
+      const itemClassnames = classNames('tiled-group-item', theme, {
+        active: checked
+      }, {
+        disabled: opt.disabled
+      })
+      const handleClick = () => this.onChange(opt.value)
+      const handleFocus = (e) => {
+        e.target.parentNode.classList.add('focused')
+      }
+      const handleBlur = (e) => {
+        e.target.parentNode.classList.remove('focused')
+      }
+      const Icon = opt.icon
+      const setRef = (c) => this['element-' + idx] = c
+      const renderTile = () => (
+        <a onClick={ !disabled && !opt.disabled && handleClick } data-value={opt.value} className={itemClassnames} key={idx} >
+          {
+            !!tabable &&
+            <input
+              ref={setRef}
+              type="checkbox"
+              name={ this.props.name }
+              style={{ position : 'absolute', left : '-9999px'}}
+              onFocus={handleFocus}
+              onChange={this.onChange}
+              onBlur={handleBlur}
+            />
+          }
+          {
+            this.props.showCheckMarkBeforeTitle
+            && (checked
+            ? this.getCheckMarkIconActive()
+            : this.props.checkMarkUnActiveIcon)
+          }
+          <span className="icon">{ opt.icon && <Icon {...opt.iconOptions} />}</span>
+          <span className="title">{opt.title}</span>
+          <small>{opt.desc}</small>
+          {
+            !this.props.showCheckMarkBeforeTitle
+            && (checked
+            ? this.getCheckMarkIconActive()
+            : this.props.checkMarkUnActiveIcon)
+          }
+        </a>
+      )
+      return (
+        <span key={ idx } className="tiled-group-item-container">
+        {
+          opt.disabled && opt.errorMessage ?
+          <Tooltip>
+            <div className="tooltip-target" id={'tooltip-' + idx}>
+              {renderTile()}
+            </div>
+            <div className="tooltip-body">
+              <p>{opt.errorMessage}</p>
+            </div>
+          </Tooltip> :
+          renderTile()
+        }
+        </span>
+      )
+    }
+
+    return (
+      <div className={`${wrapperClass} tiled-group-row`}>
+
+        {this.props.label && (
+          <label className="tc-label">
+          {this.props.label}
+        </label>)}
+        {options.map(renderOption)}
+      { hasError ? (<p className="error-message">{errorMessage}</p>) : null}
+      </div>
+    )
+  }
+}
+TiledCheckboxGroup.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      desc: PropTypes.string
+      // icon: PropTypes.
+    }).isRequired
+  ).isRequired,
+  checkMarkActiveIcon: PropTypes.node,
+  checkMarkUnActiveIcon: PropTypes.node,
+  showCheckMarkBeforeTitle: PropTypes.bool
+}
+
+TiledCheckboxGroup.defaultProps = {
+  onChange: () => {},
+  showCheckMarkBeforeTitle: false
+}
+
+export default hoc(TiledCheckboxGroup)
diff --git a/components/Formsy/index.js b/components/Formsy/index.js
index 99d67b748..d8b5b5786 100644
--- a/components/Formsy/index.js
+++ b/components/Formsy/index.js
@@ -9,6 +9,7 @@ import CheckboxGroup from './CheckboxGroup'
 import SliderRadioGroup from './SliderRadioGroup'
 import TiledRadioGroup from './TiledRadioGroup'
 import TiledCheckboxInput from './TiledCheckboxInput'
+import TiledCheckboxGroup from './TiledCheckboxGroup'
 
 require('./FormFields.scss')
 
@@ -39,6 +40,7 @@ export default {
     CheckboxGroup,
     SliderRadioGroup,
     TiledRadioGroup,
-    TiledCheckboxInput
+    TiledCheckboxInput,
+    TiledCheckboxGroup
   }
 }

From 3b3c71342187a153b9e62d22ca0faf633de83c0d Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Sun, 24 Feb 2019 10:31:45 +0800
Subject: [PATCH 4/5] fix mutating state which led to incorrect Formzy work
 (for didn't reacted on the value update)

---
 components/Formsy/TiledCheckboxGroup.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/Formsy/TiledCheckboxGroup.jsx b/components/Formsy/TiledCheckboxGroup.jsx
index 7be9b0396..d14d8d064 100644
--- a/components/Formsy/TiledCheckboxGroup.jsx
+++ b/components/Formsy/TiledCheckboxGroup.jsx
@@ -15,13 +15,15 @@ class TiledCheckboxGroup extends Component {
 
   onChange(value) {
     const index = this.state.curValue.indexOf(value)
+    let newValue = [...this.state.curValue]
     if (index > -1) {
-      this.state.curValue.splice(index, 1)
+      newValue.splice(index, 1)
     } else {
-      this.state.curValue.push(value)
+      newValue.push(value)
     }
-    this.props.setValue(this.state.curValue)
-    this.props.onChange(this.props.name, this.state.curValue)
+    this.setState({ curValue: newValue })
+    this.props.setValue(newValue)
+    this.props.onChange(this.props.name, newValue)
   }
 
   getCheckMarkIconActive() {

From d0a428274dcaa667a925d6c76829191ca29f8b5e Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Mon, 25 Feb 2019 18:28:32 +0800
Subject: [PATCH 5/5] fix TiledCheckboxGroup so it can got value updated from
 outside like other Formzy controls

---
 components/Formsy/TiledCheckboxGroup.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Formsy/TiledCheckboxGroup.jsx b/components/Formsy/TiledCheckboxGroup.jsx
index d14d8d064..81d33e54b 100644
--- a/components/Formsy/TiledCheckboxGroup.jsx
+++ b/components/Formsy/TiledCheckboxGroup.jsx
@@ -10,18 +10,17 @@ class TiledCheckboxGroup extends Component {
     super(props)
     this.onChange = this.onChange.bind(this)
     this.getCheckMarkIconActive = this.getCheckMarkIconActive.bind(this)
-    this.state = { curValue: props.getValue() || [] }
   }
 
   onChange(value) {
-    const index = this.state.curValue.indexOf(value)
-    let newValue = [...this.state.curValue]
+    const curValue = this.props.getValue() || []
+    const index = curValue.indexOf(value)
+    let newValue = [...curValue]
     if (index > -1) {
       newValue.splice(index, 1)
     } else {
       newValue.push(value)
     }
-    this.setState({ curValue: newValue })
     this.props.setValue(newValue)
     this.props.onChange(this.props.name, newValue)
   }
@@ -35,12 +34,13 @@ class TiledCheckboxGroup extends Component {
 
   render() {
     const { wrapperClass, options, theme, tabable } = this.props
+    const curValue = this.props.getValue() || []
     const hasError = !this.props.isPristine() && !this.props.isValid()
     const disabled = this.props.isFormDisabled() || this.props.disabled
     const errorMessage = this.props.getErrorMessage() || this.props.validationError
 
     const renderOption = (opt, idx) => {
-      const checked = this.state.curValue.indexOf(opt.value) > -1
+      const checked = curValue.indexOf(opt.value) > -1
       const itemClassnames = classNames('tiled-group-item', theme, {
         active: checked
       }, {