@plusscommunities/pluss-maintenance-web-forms 1.2.4-beta.0 → 1.2.4-beta.2

package/src/screens/AddJobType.js

@@ -1,865 +0,0 @@
-import React, { Component } from 'react';
-import { Table } from 'react-bootstrap';
-import { withRouter } from 'react-router';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import FontAwesome from 'react-fontawesome';
-import { PlussCore } from '../feature.config';
-import { jobTypesUpdate } from '../actions';
-import { maintenanceActions } from '../apis';
-import { values } from '../values.config';
-import { Colours } from '@plusscommunities/pluss-core-web';
-
-const { Components, Session, Helper } = PlussCore;
-const DEFAULT_FIELD = { type: 'text', label: '', mandatory: false, isTitle: false, values: [''] };
-
-class AddJobType extends Component {
-  constructor(props) {
-    super(props);
-
-    this.fieldTypes = [
-      {
-        Title: 'Text Input',
-        Key: 'text',
-      },
-      {
-        Title: 'Email Input',
-        Key: 'email',
-      },
-      {
-        Title: 'Phone Input',
-        Key: 'phone',
-      },
-      {
-        Title: 'Date Input',
-        Key: 'date',
-      },
-      {
-        Title: 'Time Input',
-        Key: 'time',
-      },
-      {
-        Title: 'Image Input',
-        Key: 'image',
-      },
-      // {
-      //   Title: 'Document Input',
-      //   Key: 'document',
-      // },
-      {
-        Title: 'Yes/No Question',
-        Key: 'yn',
-      },
-      {
-        Title: 'Multiple Choice',
-        Key: 'multichoice',
-      },
-      {
-        Title: 'Checkboxes',
-        Key: 'checkbox',
-      },
-      {
-        Title: 'Title Text',
-        Key: 'staticTitle',
-      },
-      {
-        Title: 'Paragraph Text',
-        Key: 'staticText',
-      },
-    ];
-
-    this.state = {
-      loading: false,
-      jobTypeId: Helper.safeReadParams(this.props, 'jobTypeId') ? this.props.match.params.jobTypeId : null,
-      jobTypeName: '',
-      jobTypeEmail: '',
-      jobTypeDescription: '',
-      hasCustomFields: values.forceCustomFields ? true : false,
-      customFields: [_.cloneDeep(DEFAULT_FIELD)],
-      jobTypeLevel: 1,
-      warnings: [],
-      showWarnings: false,
-      submitting: false,
-      success: false,
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    Session.checkLoggedIn(this, this.props.auth);
-    if (this.state.jobTypeId) this.getJobType();
-  }
-
-  getJobType = async () => {
-    try {
-      const res = await maintenanceActions.getJobType(this.props.auth.site, this.state.jobTypeId);
-
-      const { typeName, email, description, level, hasCustomFields, customFields } = res.data;
-      this.setState({
-        jobTypeName: typeName,
-        jobTypeEmail: email,
-        jobTypeDescription: description,
-        jobTypeLevel: level,
-        hasCustomFields: !!hasCustomFields,
-        customFields: customFields || [_.cloneDeep(DEFAULT_FIELD)],
-      });
-    } catch (error) {
-      console.error('getJobType', error);
-    }
-  };
-
-  getFieldTypeTitle = (type) => {
-    const fieldType = this.fieldTypes.find((f) => f.Key === type);
-    return fieldType ? fieldType.Title : '';
-  };
-
-  validateEmail = () => {
-    const { jobTypeEmail } = this.state;
-    return !_.isEmpty(jobTypeEmail) && Helper.isEmail(jobTypeEmail);
-  };
-
-  isJobTypeValid = () => {
-    const { jobTypeName, jobTypeDescription } = this.state;
-
-    if (_.isEmpty(jobTypeName)) return false;
-    if (!this.validateEmail()) return false;
-    if (_.isEmpty(jobTypeDescription)) return false;
-    if (!this.validateCustomFields()) return false;
-
-    return true;
-  };
-
-  validateCustomFields() {
-    const { submitting, hasCustomFields, customFields } = this.state;
-    if (submitting) return false;
-
-    // Validate custom fields
-    const warnings = [];
-    if (hasCustomFields) {
-      let missingLabel = false;
-      let hasMandatoryField = false;
-      let titleFieldCount = 0;
-      customFields.forEach((field) => {
-        const { type, label, values, mandatory, isTitle } = field;
-        if (['staticTitle', 'staticText'].includes(type)) return;
-
-        if (_.isEmpty(label)) {
-          missingLabel = true;
-        } else if (
-          _.isEmpty(type) ||
-          ((type === 'multichoice' || type === 'checkbox') && (!values || values.length < 2 || !values.every((value) => !_.isEmpty(value))))
-        ) {
-          warnings.push(`'${label}' is incomplete`);
-        }
-        if (mandatory) hasMandatoryField = true;
-        if (isTitle) titleFieldCount += 1;
-      });
-      if (missingLabel) {
-        warnings.push('All inputs must have a label');
-      }
-      if (!hasMandatoryField) {
-        warnings.push('There must be at least one required input');
-      }
-      if (titleFieldCount > 1) {
-        warnings.push('Only one required input can be selected as title for the request');
-      }
-    }
-
-    this.setState({ warnings });
-    return warnings.length === 0;
-  }
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  onFieldTypeChanged = (fieldIndex, key) => {
-    const customFields = [...this.state.customFields];
-    if (customFields[fieldIndex].type === key) return;
-
-    customFields[fieldIndex] = _.cloneDeep(DEFAULT_FIELD);
-    customFields[fieldIndex].type = key;
-
-    this.setState({ customFields });
-  };
-
-  onFieldLabelChanged = (fieldIndex, event) => {
-    const customFields = [...this.state.customFields];
-    customFields[fieldIndex].label = event.target.value;
-
-    this.setState({ customFields });
-  };
-
-  onFieldPlaceHolderChanged = (fieldIndex, event) => {
-    const customFields = [...this.state.customFields];
-    customFields[fieldIndex].placeHolder = event.target.value;
-
-    this.setState({ customFields });
-  };
-
-  onFieldMandatoryChanged = (fieldIndex) => {
-    const customFields = [...this.state.customFields];
-    customFields[fieldIndex].mandatory = !customFields[fieldIndex].mandatory;
-    if (!customFields[fieldIndex].mandatory) {
-      // If a field is not mandatory, it cannot be a title field
-      customFields[fieldIndex].isTitle = false;
-    }
-
-    this.setState({ customFields });
-  };
-
-  onFieldIsTitleChanged = (fieldIndex) => {
-    const customFields = [...this.state.customFields];
-    customFields[fieldIndex].isTitle = !customFields[fieldIndex].isTitle;
-    if (customFields[fieldIndex].isTitle) {
-      // If a field is title field, force mandatory
-      customFields[fieldIndex].mandatory = true;
-    }
-
-    this.setState({ customFields });
-  };
-
-  onFieldOptionChanged = (fieldIndex, optionIndex, event) => {
-    const customFields = [...this.state.customFields];
-    const prevValue = customFields[fieldIndex].values[optionIndex];
-    customFields[fieldIndex].values[optionIndex] = event.target.value;
-    // Change corresponding validation if exists
-    const validations = customFields[fieldIndex].validation;
-    let validation = validations ? validations.find((val) => val.value === prevValue) : null;
-    if (validation) validation.value = event.target.value;
-
-    this.setState({ customFields });
-  };
-
-  onAddNewOption = (fieldIndex) => {
-    const customFields = [...this.state.customFields];
-    customFields[fieldIndex].values.push('');
-    this.setState({ customFields });
-  };
-
-  onRemoveOption = (fieldIndex, optionIndex) => {
-    const customFields = [...this.state.customFields];
-    customFields[fieldIndex].values.splice(optionIndex, 1);
-    this.setState({ customFields });
-  };
-
-  onRemoveField(fieldIndex) {
-    const customFields = [...this.state.customFields];
-    if (customFields.length < 2) return;
-
-    customFields.splice(fieldIndex, 1);
-    this.setState({ customFields });
-  }
-
-  onAddNewField = () => {
-    const customFields = [...this.state.customFields];
-    customFields.push(_.cloneDeep(DEFAULT_FIELD));
-    this.setState({ customFields });
-  };
-
-  onMoveFieldPrev = (fieldIndex) => {
-    if (fieldIndex === 0) return;
-    const customFields = [...this.state.customFields];
-    const item = customFields.splice(fieldIndex, 1)[0];
-    customFields.splice(fieldIndex - 1, 0, item);
-
-    this.setState({ customFields });
-  };
-
-  onMoveFieldNext = (fieldIndex) => {
-    const customFields = [...this.state.customFields];
-    if (fieldIndex > customFields.length - 1) return;
-    const item = customFields.splice(fieldIndex, 1)[0];
-    customFields.splice(fieldIndex + 1, 0, item);
-
-    this.setState({ customFields });
-  };
-
-  onBack = () => {
-    window.history.back();
-  };
-
-  onSave = () => {
-    const { site } = this.props.auth;
-    const { submitting, jobTypeId, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel, hasCustomFields, customFields } =
-      this.state;
-
-    if (submitting) return;
-    if (!this.isJobTypeValid()) {
-      this.setState({ showWarnings: true });
-      return;
-    }
-
-    this.setState({ submitting: true }, async () => {
-      try {
-        if (jobTypeId) {
-          await maintenanceActions.editJobType(
-            site,
-            jobTypeId,
-            jobTypeName,
-            jobTypeEmail,
-            jobTypeDescription,
-            jobTypeLevel,
-            hasCustomFields,
-            customFields,
-          );
-        } else {
-          await maintenanceActions.addJobType(
-            site,
-            jobTypeName,
-            jobTypeEmail,
-            jobTypeDescription,
-            jobTypeLevel,
-            hasCustomFields,
-            customFields,
-          );
-        }
-        this.props.jobTypesUpdate(site);
-        this.setState({ submitting: false, success: true });
-      } catch (error) {
-        console.error('onSave', error);
-        this.setState({ submitting: false });
-        alert('Something went wrong with the request. Please try again.');
-      }
-    });
-  };
-
-  renderBaseForm() {
-    const { success, jobTypeId, showWarnings, jobTypeName, jobTypeEmail, jobTypeDescription, hasCustomFields } = this.state;
-    if (success) return null;
-
-    // TODO: Request Type should be configurable
-    return (
-      <div className="padding-60 paddingVertical-40 bottomDivideBorder">
-        <Components.Text type="formTitleLarge" className="marginBottom-24">
-          {!jobTypeId ? 'New' : 'Edit'} {values.textJobType}
-        </Components.Text>
-        <Components.GenericInput
-          id="jobTypeName"
-          type="text"
-          label={`${values.textJobType} title`}
-          placeholder={`${values.textJobType} title`}
-          value={jobTypeName}
-          onChange={this.onHandleChange}
-          isRequired
-          isValid={() => !_.isEmpty(jobTypeName)}
-          showError={() => showWarnings && _.isEmpty(jobTypeName)}
-          alwaysShowLabel
-        />
-        <Components.GenericInput
-          id="jobTypeEmail"
-          type="text"
-          label="Email"
-          placeholder="Email"
-          help={`This is the email address that'll be notified of new submissions for this ${`${values.textJobType}`}.`}
-          value={jobTypeEmail}
-          onChange={this.onHandleChange}
-          isRequired
-          isValid={this.validateEmail}
-          showError={() => showWarnings && !this.validateEmail()}
-          alwaysShowLabel
-        />
-        <Components.GenericInput
-          id="jobTypeDescription"
-          type="text"
-          label="Description"
-          placeholder="Add a description. "
-          help={`This description will be visible to the people to help them select the correct ${`${values.textJobType}`}.`}
-          value={jobTypeDescription}
-          onChange={this.onHandleChange}
-          isRequired
-          isValid={() => !_.isEmpty(jobTypeDescription)}
-          showError={() => showWarnings && _.isEmpty(jobTypeDescription)}
-          alwaysShowLabel
-        />
-        {values.forceCustomFields ? null : (
-          <Components.RadioButton
-            label={`Do you want to create a custom form for this ${`${values.textJobType}`}?`}
-            isActive={hasCustomFields}
-            options={[
-              {
-                Label: 'Yes',
-                Value: true,
-                onChange: () => this.setState({ hasCustomFields: true }),
-              },
-              {
-                Label: 'No',
-                Value: false,
-                onChange: () => this.setState({ hasCustomFields: false }),
-              },
-            ]}
-          />
-        )}
-      </div>
-    );
-  }
-
-  renderOptionalCheckBox(field, fieldIndex) {
-    return (
-      <Components.CheckBox
-        id={`fieldOptional${fieldIndex}`}
-        label="Set this field as optional"
-        isActive={!field.mandatory}
-        onChange={(e) => this.onFieldMandatoryChanged(fieldIndex, e)}
-      />
-    );
-  }
-
-  renderTitleCheckBox(field, fieldIndex) {
-    return (
-      <Components.CheckBox
-        id={`fieldTitle${fieldIndex}`}
-        label={`Use this field as the ${values.textSingularName} title`}
-        isActive={field.isTitle}
-        onChange={(e) => this.onFieldIsTitleChanged(fieldIndex, e)}
-      />
-    );
-  }
-
-  renderFieldText(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        <Components.GenericInput
-          id={`fieldPlaceHolder${fieldIndex}`}
-          className={'placeHolderInput'}
-          placeholder={'Insert placeholder (optional)'}
-          value={field.placeHolder}
-          onChange={(e) => this.onFieldPlaceHolderChanged(fieldIndex, e)}
-        />
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-        {this.renderTitleCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldDate(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-        {this.renderTitleCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldTime(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-        {this.renderTitleCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldImage(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldDocument(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldYesNo(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        <Table className="optionsContainer">
-          <thead className="headings">
-            <tr>
-              <th className="icon" />
-              <th className="options">Options</th>
-            </tr>
-          </thead>
-          <tbody>
-            {['Yes', 'No'].map((value, optionIndex) => {
-              return (
-                <tr key={optionIndex} className="option">
-                  <td>
-                    <Components.RadioButton single disabled isActive={false} />
-                  </td>
-                  <td>
-                    <Components.GenericInput id={`fieldOption${optionIndex}`} value={value} disabled />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </Table>
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldMultiple(field, fieldIndex) {
-    const { customFields } = this.state;
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        <Table className="optionsContainer">
-          <thead className="headings">
-            <tr>
-              <th className="icon" />
-              <th className="options-wide">Options</th>
-              <th className="remove" />
-            </tr>
-          </thead>
-          <tbody>
-            {field.values &&
-              field.values.map((value, optionIndex) => {
-                return (
-                  <tr key={optionIndex} className="option">
-                    <td>
-                      <Components.RadioButton single disabled isActive={false} />
-                    </td>
-                    <td>
-                      <Components.GenericInput
-                        id={`fieldOption${optionIndex}`}
-                        placeholder={'Enter option'}
-                        value={value}
-                        onChange={(e) => this.onFieldOptionChanged(fieldIndex, optionIndex, e)}
-                      />
-                    </td>
-                    <td>
-                      {customFields[fieldIndex].values.length > 1 ? (
-                        <div onClick={() => this.onRemoveOption(fieldIndex, optionIndex)}>
-                          <FontAwesome name="minus-circle" className="cornerCancelButton_icon" />
-                        </div>
-                      ) : null}
-                    </td>
-                  </tr>
-                );
-              })}
-          </tbody>
-        </Table>
-        <div className="clearfix addoption optionAdd marginBottom-10" onClick={() => this.onAddNewOption(fieldIndex)}>
-          <Components.P60Icon className="addoption_plus" icon="add-circle" />
-          <div className="fillSpace">
-            <p className="addoption_text">Add Another Option</p>
-          </div>
-        </div>
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-        {this.renderTitleCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldCheckbox(field, fieldIndex) {
-    const { customFields } = this.state;
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldLabel${fieldIndex}`}
-          className={'textInput'}
-          placeholder={'Type your label here (required)'}
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-        />
-        <Table className="optionsContainer">
-          <thead className="headings">
-            <tr>
-              <th className="icon" />
-              <th>Options</th>
-              <th className="remove" />
-            </tr>
-          </thead>
-          <tbody>
-            {field.values &&
-              field.values.map((value, optionIndex) => {
-                return (
-                  <tr key={optionIndex} className="option">
-                    <td>
-                      <Components.RadioButton single disabled isActive={false} isSquare />
-                    </td>
-                    <td>
-                      <Components.GenericInput
-                        id={`fieldOption${optionIndex}`}
-                        placeholder={'Enter option'}
-                        value={value}
-                        onChange={(e) => this.onFieldOptionChanged(fieldIndex, optionIndex, e)}
-                      />
-                    </td>
-                    <td>
-                      {customFields[fieldIndex].values.length > 1 ? (
-                        <div onClick={() => this.onRemoveOption(fieldIndex, optionIndex)}>
-                          <FontAwesome name="minus-circle" className="cornerCancelButton_icon" />
-                        </div>
-                      ) : null}
-                    </td>
-                  </tr>
-                );
-              })}
-          </tbody>
-        </Table>
-        <div className="clearfix addoption optionAdd marginBottom-10" onClick={() => this.onAddNewOption(fieldIndex)}>
-          <Components.P60Icon className="addoption_plus" icon="add-circle" />
-          <div className="fillSpace">
-            <p className="addoption_text">Add Another Option</p>
-          </div>
-        </div>
-        {this.renderOptionalCheckBox(field, fieldIndex)}
-        {this.renderTitleCheckBox(field, fieldIndex)}
-      </div>
-    );
-  }
-
-  renderFieldStaticTitle(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldStatic${fieldIndex}`}
-          placeholder="Insert title here (required)"
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-          large
-        />
-      </div>
-    );
-  }
-
-  renderFieldStaticText(field, fieldIndex) {
-    return (
-      <div className="fieldInner">
-        <Components.GenericInput
-          id={`fieldStatic${fieldIndex}`}
-          placeholder="Insert your paragraph text here (required)"
-          value={field.label}
-          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
-          type="textarea"
-        />
-      </div>
-    );
-  }
-
-  renderField(field, fieldIndex) {
-    const { customFields } = this.state;
-
-    const renderFieldContent = () => {
-      switch (field.type) {
-        case 'text':
-        case 'email':
-        case 'phone':
-          return this.renderFieldText(field, fieldIndex);
-        case 'date':
-          return this.renderFieldDate(field, fieldIndex);
-        case 'time':
-          return this.renderFieldTime(field, fieldIndex);
-        case 'image':
-          return this.renderFieldImage(field, fieldIndex);
-        case 'document':
-          return this.renderFieldDocument(field, fieldIndex);
-        case 'yn':
-          return this.renderFieldYesNo(field, fieldIndex);
-        case 'multichoice':
-          return this.renderFieldMultiple(field, fieldIndex);
-        case 'checkbox':
-          return this.renderFieldCheckbox(field, fieldIndex);
-        case 'staticTitle':
-          return this.renderFieldStaticTitle(field, fieldIndex);
-        case 'staticText':
-          return this.renderFieldStaticText(field, fieldIndex);
-        default:
-          return null;
-      }
-    };
-
-    return (
-      <div className="fieldContainer" key={fieldIndex}>
-        <div className="fieldNumberContainer">
-          <p className="fieldNumber">{fieldIndex + 1}</p>
-        </div>
-        <div className="field">
-          <div className="fieldHeader">
-            <div className="group">
-              <div className="line" />
-              <div className="fieldType">{this.getFieldTypeTitle(field.type)}</div>
-            </div>
-            <div className="group">
-              <Components.DropdownInput
-                id={`fieldType${fieldIndex}`}
-                placeholder="Type"
-                value="Change Field Type"
-                options={this.fieldTypes}
-                onSelect={(key) => this.onFieldTypeChanged(fieldIndex, key)}
-              />
-              {customFields.length > 1 && (
-                <div className="delete" onClick={() => this.onRemoveField(fieldIndex)}>
-                  Delete
-                </div>
-              )}
-            </div>
-          </div>
-          {renderFieldContent()}
-        </div>
-        {customFields.length > 1 && (
-          <div className="switchField">
-            {fieldIndex > 0 ? (
-              <div className="circle" onClick={() => this.onMoveFieldPrev(fieldIndex)}>
-                <FontAwesome name="angle-up" className="icon" />
-              </div>
-            ) : null}
-            {fieldIndex < customFields.length - 1 ? (
-              <div className="circle" onClick={() => this.onMoveFieldNext(fieldIndex)}>
-                <FontAwesome name="angle-down" className="icon" />
-              </div>
-            ) : null}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  renderCustomForm() {
-    const { success, hasCustomFields, customFields } = this.state;
-    if (success || !hasCustomFields) return null;
-
-    return (
-      <div className="padding-60 paddingTop-8 paddingLeft-20">
-        <Components.Text type="bodyLarge" className="marginBottom-24 paddingLeft-40" style={{ color: Colours.COLOUR_LIGHTGREY }}>
-          By default, the form submission title will be the name of the person submitting the form. You can choose to select a different
-          field to use as the title for the form submission.
-        </Components.Text>
-        <div className="fields">
-          {customFields.map((field, fieldIndex) => this.renderField(field, fieldIndex))}
-          <div className="clearfix addoption addField" onClick={() => this.onAddNewField()}>
-            <Components.P60Icon className="addoption_plus" icon="add-circle" />
-            <div className="fillSpace">
-              <p className="addoption_text">Add New Field</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderWarnings() {
-    const { showWarnings, warnings } = this.state;
-    if (!showWarnings || !warnings || warnings.length === 0) return null;
-
-    return (
-      <div className="padding-60 paddingVertical-8 text-bodyLarge" style={{ color: Colours.COLOUR_RED }}>
-        To save the form
-        <ul style={{ padding: 0, paddingLeft: 16 }}>
-          {warnings.map((warn, index) => (
-            <li key={index}>{warn}</li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-
-  renderSuccess() {
-    const { success, jobTypeId } = this.state;
-    if (!success) return null;
-
-    return (
-      <Components.SuccessPopup
-        text={`${`${values.textJobType}`} has been ${!jobTypeId ? 'added' : 'edited'}`}
-        buttons={[
-          {
-            type: 'outlined',
-            onClick: this.onBack,
-            text: 'Go to home',
-          },
-        ]}
-      />
-    );
-  }
-
-  renderSubmit() {
-    if (this.state.submitting) {
-      return <Components.Button buttonType="secondary">Saving...</Components.Button>;
-    }
-    return (
-      <div>
-        <Components.Button inline buttonType="tertiary" onClick={this.onBack} isActive style={{ marginRight: 8 }}>
-          Cancel
-        </Components.Button>
-        <Components.Button inline buttonType="primary" onClick={this.onSave} isActive>
-          Save
-        </Components.Button>
-      </div>
-    );
-  }
-
-  render() {
-    const { success } = this.state;
-
-    return (
-      <Components.OverlayPage>
-        <Components.OverlayPageContents noBottomButtons={success}>
-          <Components.OverlayPageSection className="pageSectionWrapper--newPopup pageSectionWrapper--newPopup950">
-            <div className="addForm">
-              {this.renderBaseForm()}
-              {this.renderWarnings()}
-              {this.renderCustomForm()}
-            </div>
-            {this.renderSuccess()}
-          </Components.OverlayPageSection>
-        </Components.OverlayPageContents>
-        <Components.OverlayPageBottomButtons>{this.renderSubmit()}</Components.OverlayPageBottomButtons>
-      </Components.OverlayPage>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  const { auth } = state;
-  return { auth, strings: (state.strings && state.strings.config) || {} };
-};
-
-export default connect(mapStateToProps, { jobTypesUpdate })(withRouter(AddJobType));