- {options.map((option, index) => {
+ {_.reject(options, "hidden").map((option, index) => {
if (option.separator) {
return
;
} else {
@@ -124,6 +125,7 @@ ActionsMenu.propTypes = {
label: PT.string,
action: PT.func,
separator: PT.bool,
+ hidden: PT.bool,
})
),
};
diff --git a/src/components/ActionsMenu/styles.module.scss b/src/components/ActionsMenu/styles.module.scss
index e0024961..c9556de7 100644
--- a/src/components/ActionsMenu/styles.module.scss
+++ b/src/components/ActionsMenu/styles.module.scss
@@ -39,7 +39,7 @@
}
.option {
- color: #0D61BF;
+ color: #0d61bf;
cursor: pointer;
font-size: 14px;
line-height: 20px;
diff --git a/src/components/AsyncSelect/index.jsx b/src/components/AsyncSelect/index.jsx
new file mode 100644
index 00000000..269ad803
--- /dev/null
+++ b/src/components/AsyncSelect/index.jsx
@@ -0,0 +1,111 @@
+/**
+ * AsyncSelect
+ *
+ * A wrapper for react-select's AsyncCreatableSelect.
+ */
+import React from "react";
+import PT from "prop-types";
+import AsyncCreatableSelect from "react-select/async-creatable";
+import "./styles.module.scss";
+
+const AsyncSelect = (props) => {
+ const customStyles = {
+ control: (provided, state) => ({
+ ...provided,
+ minHeight: "40px",
+ border: "1px solid #aaaaab",
+ borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
+ boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow,
+ }),
+ menu: (provided) => ({
+ ...provided,
+ minHeight: "40px",
+ zIndex: 10,
+ }),
+ valueContainer: (provided) => ({
+ ...provided,
+ padding: "2px 6px",
+ }),
+ input: (provided) => ({
+ ...provided,
+ margin: "0px",
+ height: "auto",
+ padding: "0",
+ }),
+ indicatorSeparator: () => ({
+ display: "none",
+ }),
+ indicatorsContainer: (provided) => ({
+ ...provided,
+ height: "auto",
+ }),
+ option: (provided) => ({
+ ...provided,
+ minHeight: "32px",
+ }),
+ placeholder: (provided) => ({
+ ...provided,
+ color: "#AAAAAA",
+ fontFamily: "Roboto",
+ fontSize: "14px",
+ lineHeight: "22px",
+ textAlign: "left",
+ fontWeight: "400",
+ }),
+ multiValue: (provided) => ({
+ ...provided,
+ margin: "3px 3px",
+ color: "#AAAAAA",
+ fontFamily: "Roboto",
+ fontSize: "14px",
+ lineHeight: "22px",
+ textAlign: "left",
+ borderRadius: "5px",
+ }),
+ dropdownIndicator: () => ({
+ display: "none",
+ }),
+ };
+
+ return (
+
+
props.noOptionsText}
+ loadingMessage={() => props.loadingText}
+ isDisabled={props.disabled}
+ cacheOptions={props.cacheOptions}
+ loadOptions={props.loadOptions}
+ defaultOptions={props.defaultOptions}
+ />
+
+ )
+}
+
+AsyncSelect.propTypes = {
+ value: PT.string,
+ onChange: PT.func,
+ placeholder: PT.string,
+ error: PT.string,
+ isMulti: PT.bool,
+ onBlur: PT.func,
+ onFocus: PT.func,
+ onInputChange: PT.func,
+ cacheOptions: PT.bool,
+ onInputChange: PT.func,
+ noOptionsText: PT.string,
+ loadingText: PT.string,
+ loadOptions: PT.func,
+ defaultOptions: PT.bool || PT.array,
+ disabled: PT.bool,
+}
+
+export default AsyncSelect;
\ No newline at end of file
diff --git a/src/components/AsyncSelect/styles.module.scss b/src/components/AsyncSelect/styles.module.scss
new file mode 100644
index 00000000..96ffd0d3
--- /dev/null
+++ b/src/components/AsyncSelect/styles.module.scss
@@ -0,0 +1,18 @@
+.error {
+ :first-child {
+ border-color: #ff5b52;
+ }
+}
+
+.select-wrapper {
+ input {
+ border: none !important;
+ box-shadow: none !important;
+ transition: none !important;
+ height: 28px;
+ }
+}
+
+.react-select__option {
+ min-height: 32px;
+}
diff --git a/src/components/AvatarGroup/styles.module.scss b/src/components/AvatarGroup/styles.module.scss
index d9d5aa2e..54d41108 100644
--- a/src/components/AvatarGroup/styles.module.scss
+++ b/src/components/AvatarGroup/styles.module.scss
@@ -14,10 +14,10 @@
.rest-count {
align-items: center;
- border: 1px solid #0D61BF;
+ border: 1px solid #0d61bf;
border-radius: 100%;
box-sizing: border-box;
- color: #0D61BF;
+ color: #0d61bf;
display: flex;
font-size: 14px;
height: 40px;
diff --git a/src/components/Badge/index.jsx b/src/components/Badge/index.jsx
new file mode 100644
index 00000000..a97a6bc7
--- /dev/null
+++ b/src/components/Badge/index.jsx
@@ -0,0 +1,22 @@
+/**
+ * Badge
+ *
+ * - type - see BADGE_TYPE values
+ *
+ */
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import { BADGE_TYPE } from "constants";
+import "./styles.module.scss";
+
+const Badge = ({ children, type = BADGE_TYPE.PRIMARY }) => {
+ return
{children};
+};
+
+Badge.propTypes = {
+ children: PT.node,
+ type: PT.oneOf(Object.values(BADGE_TYPE)),
+};
+
+export default Badge;
diff --git a/src/components/Badge/styles.module.scss b/src/components/Badge/styles.module.scss
new file mode 100644
index 00000000..0c12a55b
--- /dev/null
+++ b/src/components/Badge/styles.module.scss
@@ -0,0 +1,21 @@
+@import "styles/include";
+
+.badge {
+ @include font-roboto;
+ padding: 0 8px;
+ line-height: 20px;
+ border-radius: 5px;
+ height: 20px;
+ color: #ffffff;
+ font-size: 12px;
+ letter-spacing: 0.5px;
+ text-align: left;
+}
+
+.type-primary {
+ background-color: #0ab88a;
+}
+
+.type-danger {
+ background-color: #ef476f;
+}
diff --git a/src/components/BaseModal/index.jsx b/src/components/BaseModal/index.jsx
new file mode 100644
index 00000000..e0bf5a83
--- /dev/null
+++ b/src/components/BaseModal/index.jsx
@@ -0,0 +1,77 @@
+/**
+ * BaseModal
+ *
+ * Wraps the react-responsive-modal
+ * and adds the app's style
+ *
+ * Supports title and action button
+ * children are displayed as modal content
+ */
+
+import React from "react";
+import PT from "prop-types";
+import { Modal } from "react-responsive-modal";
+import Button from "../Button";
+import IconCross from "../../assets/images/icon-cross-light.svg";
+import "./styles.module.scss";
+
+const modalStyle = {
+ borderRadius: "8px",
+ padding: "32px 32px 22px 32px",
+ maxWidth: "640px",
+ width: "100%",
+ margin: 0,
+};
+
+const containerStyle = {
+ padding: "10px",
+};
+
+function BaseModal({
+ open,
+ onClose,
+ children,
+ title,
+ button,
+ disabled,
+ extraModalStyle,
+}) {
+ return (
+
}
+ styles={{
+ modal: { ...modalStyle, ...extraModalStyle },
+ modalContainer: containerStyle,
+ }}
+ center={true}
+ >
+ {title &&
{title}
}
+
{children}
+
+ {button && button}
+
+
+
+ );
+}
+
+BaseModal.propTypes = {
+ open: PT.bool.isRequired,
+ onClose: PT.func.isRequired,
+ children: PT.node,
+ title: PT.string,
+ button: PT.element,
+ disabled: PT.bool,
+ extraModalStyle: PT.object,
+};
+
+export default BaseModal;
diff --git a/src/components/BaseModal/styles.module.scss b/src/components/BaseModal/styles.module.scss
new file mode 100644
index 00000000..e1c1d36c
--- /dev/null
+++ b/src/components/BaseModal/styles.module.scss
@@ -0,0 +1,28 @@
+@import "styles/include";
+
+.title {
+ @include font-barlow-condensed;
+ font-weight: normal;
+ font-size: 34px;
+ line-height: 40px;
+ margin: 0 0 24px 0;
+ overflow-wrap: anywhere;
+ padding: 0;
+ text-transform: uppercase;
+}
+
+.content {
+ @include font-roboto;
+ line-height: 140%;
+}
+
+.button-group {
+ margin: 24px 0 0 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ button {
+ margin-right: 10px;
+ margin-bottom: 10px;
+ }
+}
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 7264af96..77edd3e7 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -27,6 +27,7 @@ const Button = ({
routeTo,
href,
target,
+ isSubmit,
}) => {
if (href) {
return (
@@ -49,6 +50,7 @@ const Button = ({
className={className}
ref={innerRef}
disabled={disabled}
+ type={isSubmit ? "submit" : "button"}
>
{children}
@@ -68,6 +70,7 @@ Button.propTypes = {
disabled: PT.bool,
routeTo: PT.string,
href: PT.string,
+ isSubmit: PT.bool,
};
export default Button;
diff --git a/src/components/Button/styles.module.scss b/src/components/Button/styles.module.scss
index 91dc4bb7..7302f649 100644
--- a/src/components/Button/styles.module.scss
+++ b/src/components/Button/styles.module.scss
@@ -42,51 +42,51 @@
}
.type-primary {
- border: 1px solid #137D60;
- background-color: #137D60;
+ border: 1px solid #137d60;
+ background-color: #137d60;
color: #fff;
}
.type-warning {
- border: 1px solid #EF476F;
- background-color: #EF476F;
+ border: 1px solid #ef476f;
+ background-color: #ef476f;
color: #fff;
}
.type-secondary {
background-color: #fff;
- border: 1px solid #137D60;
+ border: 1px solid #137d60;
color: #229174;
}
.type-secondary[disabled] {
- border-color: #E9E9E9;
- color: #E9E9E9;
+ border-color: #e9e9e9;
+ color: #e9e9e9;
}
.type-segment {
background-color: transparent;
border: 1px solid transparent;
- color: #2A2A2A;
+ color: #2a2a2a;
font-size: 12px;
font-weight: normal;
}
.type-segment-selected {
- border: 1px solid #7F7F7F;
- background-color: #7F7F7F;
+ border: 1px solid #7f7f7f;
+ background-color: #7f7f7f;
color: #fff;
font-size: 12px;
font-weight: normal;
}
.type-segment[disabled] {
- color: #E9E9E9;
+ color: #e9e9e9;
}
.type-primary[disabled],
.type-warning[disabled],
.type-segment-selected[disabled] {
- background-color: #E9E9E9;
- border-color: #E9E9E9;
+ background-color: #e9e9e9;
+ border-color: #e9e9e9;
}
diff --git a/src/components/CenteredSpinner/index.jsx b/src/components/CenteredSpinner/index.jsx
new file mode 100644
index 00000000..3d7f7529
--- /dev/null
+++ b/src/components/CenteredSpinner/index.jsx
@@ -0,0 +1,32 @@
+/**
+ * A centered spinner used to indicate loading in modals
+ */
+
+import React from "react";
+import PT from "prop-types";
+import Loader from "react-loader-spinner";
+import "./styles.module.scss";
+
+function CenteredSpinner(props) {
+ const {
+ type = "TailSpin",
+ color = "#00BFFF",
+ height = 80,
+ width = 80,
+ } = props;
+
+ return (
+
+
+
+ );
+}
+
+CenteredSpinner.propTypes = {
+ type: PT.string,
+ color: PT.string,
+ height: PT.number,
+ width: PT.number,
+};
+
+export default CenteredSpinner;
diff --git a/src/components/CenteredSpinner/styles.module.scss b/src/components/CenteredSpinner/styles.module.scss
new file mode 100644
index 00000000..c4914bcc
--- /dev/null
+++ b/src/components/CenteredSpinner/styles.module.scss
@@ -0,0 +1,5 @@
+.loader-container {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
diff --git a/src/components/DataItem/index.jsx b/src/components/DataItem/index.jsx
index 22c76601..fec0067a 100644
--- a/src/components/DataItem/index.jsx
+++ b/src/components/DataItem/index.jsx
@@ -13,7 +13,13 @@ const DataItem = ({ icon, title, children }) => {
{icon}
{title}
-
{children}
+ {/* if `children` is pure text, then we apply styling to it
+ but otherwise with don't apply styling */}
+ {_.isString(children) ? (
+
{children}
+ ) : (
+
{children}
+ )}
- {_.map(skillsToShow, "name").join(", ")}
- {skillsToHide.length > 0 && (
+
+
+ {_.map(skillsToShow, "name").join(", ")}
+
+ {skillsToHide.length > 0 && (
+ <>
+ {" and "}
+
{skillsToHide.length > 0} more
+
+ )}
<>
- {" and "}
-
-
- {skillsToHide.length > 0} more
-
-
- {isOpen && (
-
-
- {requiredSkills && (
-
-
Required Job Skills
-
- {requiredSkills.map((skill) => (
- -
- {_.find(skills, { id: skill.id }) ? (
-
- ) : (
-
- )}{" "}
- {skill.name}
-
- ))}
-
-
- )}
- {otherSkills && (
-
-
- {showMatches ? "Other User Skills" : "Required Skills"}
-
-
- {otherSkills.map((skill) => (
- - {skill.name}
- ))}
-
+
+ {requiredSkills && (
+
+
Required Job Skills
+
+ {!requiredSkills.length && - None
}
+ {requiredSkills.map((skill) => (
+ -
+ {_.find(skills, { id: skill.id }) ? (
+
+ ) : (
+
+ )}{" "}
+ {skill.name}
+
+ ))}
+
+
+ )}
+ {otherSkills && (
+
+
+ {showMatches ? "Other User Skills" : "Required Skills"}
- )}
-
+
+ {otherSkills.map((skill) => (
+ - {skill.name}
+ ))}
+
+
+ )}
- )}
-
+
+ )}
- )}
-
);
};
diff --git a/src/components/SkillsList/styles.module.scss b/src/components/SkillsList/styles.module.scss
index 637d0967..0ac4670f 100644
--- a/src/components/SkillsList/styles.module.scss
+++ b/src/components/SkillsList/styles.module.scss
@@ -1,7 +1,7 @@
@import "styles/include";
.more {
- color: #0D61BF;
+ color: #0d61bf;
cursor: pointer;
outline: none;
white-space: nowrap;
@@ -10,6 +10,7 @@
.skills-list {
font-size: 14px;
line-height: 22px;
+ outline: none;
}
.popover {
@@ -22,10 +23,12 @@
.popover-content {
display: flex;
- padding: 24px;
+ flex-wrap: wrap;
+ padding: 4px 24px 24px;
}
.skills-section {
+ margin-top: 20px;
padding-right: 32px;
}
diff --git a/src/components/SkillsSummary/styles.module.scss b/src/components/SkillsSummary/styles.module.scss
index 06fe47bc..2f62d1e8 100644
--- a/src/components/SkillsSummary/styles.module.scss
+++ b/src/components/SkillsSummary/styles.module.scss
@@ -3,7 +3,7 @@
.percentage {
align-items: center;
display: flex;
- color: #0AB88A;
+ color: #0ab88a;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 16px;
@@ -17,7 +17,7 @@
}
.more {
- color: #0D61BF;
+ color: #0d61bf;
cursor: pointer;
white-space: nowrap;
}
diff --git a/src/components/TCForm/index.jsx b/src/components/TCForm/index.jsx
new file mode 100644
index 00000000..b4fea163
--- /dev/null
+++ b/src/components/TCForm/index.jsx
@@ -0,0 +1,152 @@
+/**
+ * Form component
+ *
+ * Shows form, field and actions.
+ */
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+import PT from "prop-types";
+import { FORM_ROW_TYPE, FORM_FIELD_TYPE } from "../../constants";
+import { Form } from "react-final-form";
+import {
+ createFormData,
+ createConfigurationObject,
+ getValidator,
+ prepareSubmitData,
+} from "./utils";
+import FormField from "../FormField";
+import Button from "../Button";
+import "./styles.module.scss";
+
+const TCForm = ({
+ configuration,
+ initialValue,
+ submitButton,
+ backButton,
+ submitting,
+ setSubmitting,
+}) => {
+ const [formValue, setFormValue] = useState(null);
+ const [fields, setFields] = useState(null);
+
+ useEffect(() => {
+ const data = createFormData(initialValue, configuration.fields);
+ const constFieldConfigs = createConfigurationObject(configuration.fields);
+ setFormValue(data);
+ setFields(constFieldConfigs);
+ }, []);
+
+ return (
+ formValue &&
+ fields && (
+
+ )}
+ />
+ )
+ );
+};
+
+TCForm.propTypes = {
+ configuration: PT.shape({
+ fields: PT.arrayOf(
+ PT.shape({
+ label: PT.string,
+ type: PT.oneOf(Object.values(FORM_FIELD_TYPE)).isRequired,
+ isRequired: PT.bool,
+ customValidator: PT.func,
+ validationMessage: PT.string,
+ name: PT.string.isRequired,
+ component: PT.element,
+ selectOptions: PT.arrayOf(
+ PT.shape({
+ value: PT.string.isRequired,
+ label: PT.string.isRequired,
+ })
+ ),
+ minValue: PT.number,
+ maxLength: PT.number,
+ styleName: PT.string,
+ readonly: PT.string,
+ step: PT.number,
+ })
+ ).isRequired,
+ onSubmit: PT.func,
+ rows: PT.arrayOf(
+ PT.shape({
+ styleName: PT.string,
+ type: PT.oneOf(Object.values(FORM_ROW_TYPE)).isRequired,
+ fields: PT.arrayOf(PT.string),
+ })
+ ).isRequired,
+ }).isRequired,
+ initialValue: PT.object.isRequired,
+ submitButton: PT.shape({
+ text: PT.string.isRequired,
+ }).isRequired,
+ backButton: PT.shape({
+ text: PT.string.isRequired,
+ backTo: PT.string.isRequired,
+ }).isRequired,
+ submitting: PT.bool,
+ setSubmitting: PT.func,
+};
+
+export default TCForm;
diff --git a/src/components/TCForm/styles.module.scss b/src/components/TCForm/styles.module.scss
new file mode 100644
index 00000000..336470de
--- /dev/null
+++ b/src/components/TCForm/styles.module.scss
@@ -0,0 +1,82 @@
+@import "styles/include";
+@import "~react-datepicker/dist/react-datepicker.css";
+
+.tc-form {
+ width: 100%;
+}
+
+.job-form-fields-container {
+ padding: 40px 0px 20px;
+
+ input:not([type="checkbox"]),
+ textarea {
+ margin-bottom: 0px;
+ }
+}
+
+.job-form-fields-wrapper {
+ width: 100%;
+ max-width: 640px;
+ margin: 0 auto;
+ text-align: left;
+}
+
+.field-group {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.field-group-field {
+ padding: 0 10px;
+ width: 50%;
+}
+
+.field-group-field:first-child {
+ padding-left: 0;
+}
+
+.field-group-field:last-child {
+ padding-right: 0;
+}
+
+.form-actions {
+ border-top: 1px solid #e9e9e9;
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ padding: 16px 0 16px;
+
+ :first-child {
+ margin-left: auto;
+ }
+
+ button {
+ height: 40px;
+ border-radius: 20px;
+ line-height: 40px;
+ }
+
+ a {
+ margin-left: 15px;
+ }
+}
+
+.datepicker-wrapper {
+ & > div {
+ width: 100%;
+ }
+}
+
+.datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
+ z-index: 100;
+}
+
+@media (max-width: 650px) {
+ .field-group-field {
+ padding: 0;
+ width: 100%;
+ }
+}
diff --git a/src/components/TCForm/utils.js b/src/components/TCForm/utils.js
new file mode 100644
index 00000000..2c5fbcce
--- /dev/null
+++ b/src/components/TCForm/utils.js
@@ -0,0 +1,135 @@
+/**
+ * TC Form utilty
+ */
+import _ from "lodash";
+import { FORM_FIELD_TYPE } from "../../constants";
+
+/**
+ * Returns the option from list of option by value
+ *
+ * @param {any} value value of option
+ * @param {[{ label: string, value: any }]} selectOptions list of option
+ *
+ * @returns {{ label: string, value: any }} select option
+ */
+const getSelectOptionByValue = (value, selectOptions) => {
+ const option = _.find(selectOptions, { value });
+
+ if (!option) {
+ return {
+ label: `Unsuppored value: ${value}`,
+ value,
+ };
+ }
+
+ return option;
+};
+
+/**
+ * Extract value from field by type
+ * @param {any} value value
+ * @param {any} field field
+ * @returns {any} converted value
+ */
+const extractValue = (value, field) => {
+ if (value === undefined || value === null) {
+ return value;
+ }
+
+ switch (field.type) {
+ case FORM_FIELD_TYPE.SELECT: {
+ return field.isMulti
+ ? value.map((valueItem) =>
+ getSelectOptionByValue(valueItem, field.selectOptions)
+ )
+ : getSelectOptionByValue(value, field.selectOptions);
+ }
+
+ case FORM_FIELD_TYPE.DATE: {
+ return new Date(value);
+ }
+
+ default: {
+ return value;
+ }
+ }
+};
+
+/**
+ * Create form data based on field configuration
+ * @param {any} data data
+ * @param {Array} fields form fields
+ * @returns {any} form data
+ */
+export const createFormData = (data, fields) => {
+ return fields.reduce(
+ (obj, item) => (
+ (obj[item.name] = _.some(data, obj[item.name])
+ ? extractValue(data[[item.name]], item)
+ : null),
+ obj
+ ),
+ {}
+ );
+};
+
+/**
+ * Create configuration object from form fields
+ * @param {Array} fields form fields
+ * @returns {any} configuration object
+ */
+export const createConfigurationObject = (fields) => {
+ return fields.reduce((obj, item) => {
+ return {
+ ...obj,
+ [item.name]: item,
+ };
+ }, {});
+};
+
+/**
+ * Create a validator function based on form fields
+ * @param {Array} fields form fields
+ * @returns {Function} configuration object
+ */
+export const getValidator = (fields) => {
+ return (values) => {
+ const errors = {};
+ fields
+ .filter((f) => f.isRequired || f.customValidator)
+ .forEach((f) => {
+ if (f.isRequired && !values[f.name]) {
+ errors[f.name] = f.validationMessage;
+ } else if (f.customValidator) {
+ const error = f.customValidator(f, fields, values);
+ if (error) {
+ errors[f.name] = error;
+ }
+ }
+ });
+ return errors;
+ };
+};
+
+/**
+ * Prepare form submit data
+ * @param {any} values form value
+ * @param {Array} fields form fields
+ * @param {any} originalData original form data
+ * @returns {any} converted submitted data
+ */
+export const prepareSubmitData = (values, fields, originalData) => {
+ const data = fields.reduce((obj, item) => {
+ return {
+ ...obj,
+ [item.name]:
+ item.type === FORM_FIELD_TYPE.SELECT
+ ? item.isMulti
+ ? values[item.name]?.map((x) => x.value)
+ : values[item.name]?.value
+ : values[item.name],
+ };
+ }, {});
+
+ return Object.assign(originalData, data);
+};
diff --git a/src/components/TextArea/index.jsx b/src/components/TextArea/index.jsx
new file mode 100644
index 00000000..8ec9e7e5
--- /dev/null
+++ b/src/components/TextArea/index.jsx
@@ -0,0 +1,40 @@
+/**
+ * TextArea
+ *
+ * A wrapper of TextArea control.
+ */
+import React from "react";
+import PT from "prop-types";
+import "./styles.module.scss";
+
+function TextArea(props) {
+ return (
+