Merge pull request #4189 from appirio-tech/feature/accept-reject-terms-in-profile

[DEV] Feature/accept reject terms in profile

Author: RishiRajSahu

.circleci/config.yml

@@ -138,7 +138,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['feature/unified-permissions']
+              only: ['feature/unified-permissions', 'feature/accept-reject-terms-in-profile']
 
       - deployProd:
           context : org-global

package-lock.json

@@ -45,7 +45,7 @@ class BtnGroup extends React.Component {
 
 BtnGroup.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType(PropTypes.string, PropTypes.number, PropTypes.bool).isRequired,
     text: PropTypes.string.isRequired
   })).isRequired,
   onChange: PropTypes.func

src/components/BtnGroup/BtnGroup.jsx

@@ -20,7 +20,8 @@
 
     > .tc-btn.active,
     > .tc-btn.active:hover,
-    > .tc-btn.active:active {
+    > .tc-btn.active:active,
+    > .tc-btn.active:focus {
       background: $tc-gray-20;
       box-shadow: inset 0 1px 3px 0 rgba($tc-gray-80, 0.38);
       cursor: default;

src/components/BtnGroup/BtnGroup.scss

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { HOC as hoc } from 'formsy-react'
+import BtnGroup from './BtnGroup'
+
+/**
+ * This component is a formsy wrapper for the BtnGroup component
+ * @param {Object} props Component props
+ */
+class FormsyBtnGroup extends Component {
+  constructor(props) {
+    super(props)
+    this.changeValue = this.changeValue.bind(this)
+  }
+
+  changeValue(value) {
+    this.props.setValue(value)
+    this.props.onChange && this.props.onChange(this.props.name, value)
+  }
+
+  render() {
+    const { items } = this.props
+    const hasError = !this.props.isPristine() && !this.props.isValid()
+    const errorMessage = this.props.getErrorMessage() || this.props.validationError
+
+    return (
+      <div>
+        <BtnGroup items={items} value={this.props.getValue()} onChange={this.changeValue} />
+        {(hasError && errorMessage) ? (<p className="error-message">{errorMessage}</p>)  : null}
+      </div>
+    )
+  }
+}
+
+FormsyBtnGroup.PropTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
+    text: PropTypes.string.isRequired
+  })).isRequired
+}
+
+export default hoc(FormsyBtnGroup)

src/components/BtnGroup/FormsyBtnGroup.jsx

@@ -20,7 +20,7 @@ const IncompleteUserProfile = ({
   delete fieldsConfig.avatar
   // config the form to only show required fields which doesn't have the value yet
   const missingFieldsConfig = _.reduce(fieldsConfig, (acc, isFieldRequired, fieldKey) => {
-    if (isFieldRequired && !_.get(profileSettings, `settings.${fieldKey}`)) {
+    if (isFieldRequired && _.isNil(_.get(profileSettings, `settings.${fieldKey}`))) {
       acc[fieldKey] = isFieldRequired
     }
     return acc

src/components/IncompleteUserProfile/IncompleteUserProfile.jsx

@@ -739,6 +739,7 @@ export const TC_CDN_URL = process.env.TC_CDN_URL || `https://community-app.${DOM
 
 export const RESET_PASSWORD_URL = `https://accounts.${DOMAIN}/member/reset-password`
 export const VERIFY_EMAIL_URL = `http://www.${DOMAIN}/settings/account/changeEmail`
+export const TOPCODER_CONNECT_TERMS_URL = `https://connect.${DOMAIN}/terms`
 
 export const PROJECT_NAME_MAX_LENGTH = 255
 export const PROJECT_REF_CODE_MAX_LENGTH = 32
@@ -1048,6 +1049,7 @@ export const PROFILE_FIELDS_CONFIG = {
     timeZone: true,
     workingHourStart: true,
     workingHourEnd: true,
+    // termsAccepted: true,
 
     // optional fields
     avatar: false,
@@ -1065,6 +1067,7 @@ export const PROFILE_FIELDS_CONFIG = {
     companyURL: true,
     businessPhone: true,
     businessEmail: true,
+    termsAccepted: true,
 
     // optional fields
     avatar: false,
@@ -1080,6 +1083,7 @@ export const PROFILE_FIELDS_CONFIG = {
     timeZone: true,
     workingHourStart: true,
     workingHourEnd: true,
+    // termsAccepted: true,
 
     // optional fields
     avatar: false,

src/config/constants.js

@@ -65,7 +65,7 @@ export const isUserProfileComplete = (user, profileSettings) => {
   _.forEach(_.keys(fieldsConfig), (fieldKey) => {
     const isFieldRequired = fieldsConfig[fieldKey]
 
-    if (isFieldRequired && !profileSettings[fieldKey]) {
+    if (isFieldRequired && _.isNil(profileSettings[fieldKey])) {
       isMissingUserInfo = true
       return false
     }

src/helpers/tcHelpers.js

@@ -11,10 +11,12 @@ const TCFormFields = FormsyForm.Fields
 const Formsy = FormsyForm.Formsy
 import ProfileSettingsAvatar from './ProfileSettingsAvatar'
 import FormsySelect from '../../../../../components/Select/FormsySelect'
+import FormsyBtnGroup from '../../../../../components/BtnGroup/FormsyBtnGroup'
 import ISOCountries from '../../../../../helpers/ISOCountries'
 import { formatPhone } from '../../../../../helpers/utils'
 import { hasPermission } from '../../../../../helpers/permissions'
 import { PERMISSIONS } from '../../../../../config/permissions'
+import { TOPCODER_CONNECT_TERMS_URL } from '../../../../../config/constants'
 import './ProfileSettingsForm.scss'
 
 const countries = _.orderBy(ISOCountries, ['name'], ['asc']).map((country) => ({
@@ -382,8 +384,36 @@ class ProfileSettingsForm extends Component {
             </div>
           </div>
         )}
+        {!_.isUndefined(fieldsConfig.termsAccepted) && (
+          <div className="field">
+            <div className="label">
+              <a styleName="fieldLabelText" href={TOPCODER_CONNECT_TERMS_URL} target="_blank">Topcoder Terms</a>&nbsp;
+              {fieldsConfig.termsAccepted && <sup styleName="requiredMarker">*</sup>}
+            </div>
+            <div className="input-field">
+              <div styleName="terms-field">
+                {_.isNil(this.props.values.settings.termsAccepted) ? (
+                  <FormsyBtnGroup
+                    name="termsAccepted"
+                    items={[
+                      { value: true, text: 'Accept' },
+                      { value: false, text: 'Reject' }
+                    ]}
+                    validations={{
+                      isRequired: fieldsConfig.timeZone
+                    }}
+                    validationErrors={{
+                      isRequired: 'Please accept or decline Topcoder Terms'
+                    }}
+                  />
+                ) : (
+                  <span>{this.props.values.settings.termsAccepted ? 'Accepted' : 'Rejected'}</span>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
         <div className="controls">
-
           {showBackButton && (
             <button
               className={`tc-btn tc-btn-default btn-back ${buttonExtraClassName}`}

src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx

@@ -191,6 +191,25 @@
   vertical-align: top;
 }
 
+a.fieldLabelText {
+  color: $tc-dark-blue-110;
+}
+
+.terms-field {
+  align-items: center;
+  display: flex;
+  padding: 7px 0;
+
+  > span {
+    display: inline-block;
+    color: $tc-gray-60;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 20px;
+    padding: 5px 0;
+  }
+}
+
 .warningText {
   margin: 5px auto;
   @include roboto;
@@ -203,4 +222,4 @@
   color: $tc-orange-70;
   padding:10px;
   border-radius: 2px;
-}
+}