@plusscommunities/pluss-maintenance-web 1.1.16 → 1.1.18-beta.0

package/src/screens/AddJobType.js

@@ -0,0 +1,841 @@
+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';
+
+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: '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: ['this is a test warning'],
+      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,
+        customFields,
+      });
+    } 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 === 0) {
+        warnings.push('One of the required inputs must be selected as title for the request');
+      } else 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'} Request Type
+        </Components.Text>
+        <Components.GenericInput
+          id="jobTypeName"
+          type="text"
+          label="Request type title"
+          placeholder="Request type title"
+          value={jobTypeName}
+          onChange={this.onHandleChange}
+          isRequired
+          isValid={() => !_.isEmpty(jobTypeName)}
+          showError={() => showWarnings && _.isEmpty(jobTypeName)}
+          alwaysShowLabel
+        />
+        <Components.GenericInput
+          id="jobTypeEmail"
+          type="text"
+          label="Email"
+          placeholder="Request email"
+          help="This is the email address that'll receive service requests of this type"
+          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 request type."
+          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 request type?"
+            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 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>
+    );
+  }
+
+  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 '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">
+        <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-40 paddingBottom-8 text-help">
+        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;
+
+    // TODO: Replace name with configuration
+    return (
+      <Components.SuccessPopup
+        text={`Request Type 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">
+            <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));