From b9e3373e53e098358353a8b61cba14e642670ee7 Mon Sep 17 00:00:00 2001 From: Hentry Martin Date: Mon, 13 Jan 2025 15:44:22 +0100 Subject: [PATCH 01/10] fix: removed settings code from community app --- .../components/Settings/Accordion/index.jsx | 131 -- .../components/Settings/Accordion/styles.scss | 42 - .../components/Settings/ComingSoon/index.jsx | 11 - .../Settings/ComingSoon/styles.scss | 15 - .../Settings/ConfirmationModal/index.jsx | 45 - .../Settings/ConfirmationModal/styles.scss | 191 --- .../Settings/ConsentComponent/index.jsx | 86 -- .../Settings/ErrorMessage/index.jsx | 30 - .../Settings/ErrorMessage/styles.scss | 25 - .../Settings/ErrorWrapper/index.jsx | 45 - .../Settings/ErrorWrapper/styles.scss | 9 - .../WorkplaceList/Item/index.jsx | 117 -- .../WorkplaceList/Item/styles.scss | 207 --- .../WorkExperience/WorkplaceList/index.jsx | 36 - .../WorkExperience/WorkplaceList/styles.scss | 19 - .../WorkExperience/index.jsx | 606 --------- .../WorkExperience/styles.scss | 139 -- .../WorkSkills/Interests/index.jsx | 242 ---- .../WorkSkills/Interests/styles.scss | 113 -- .../WorkSkills/Languages/List/Item/index.jsx | 138 -- .../Languages/List/Item/styles.scss | 211 --- .../WorkSkills/Languages/List/index.jsx | 41 - .../WorkSkills/Languages/List/styles.scss | 26 - .../WorkSkills/Languages/dropdowns.json | 782 ----------- .../WorkSkills/Languages/index.jsx | 482 ------- .../WorkSkills/Languages/styles.scss | 109 -- .../Skills/AddSkillsModal/index.jsx | 140 -- .../Skills/AddSkillsModal/styles.scss | 270 ---- .../WorkSkills/Skills/index.jsx | 444 ------ .../WorkSkills/Skills/styles.scss | 218 --- .../ExperienceAndSkills/WorkSkills/index.jsx | 35 - .../WorkSkills/styles.scss | 33 - .../Settings/ExperienceAndSkills/index.jsx | 121 -- .../Settings/ExperienceAndSkills/styles.scss | 46 - .../components/Settings/FormField/index.jsx | 45 - .../components/Settings/FormField/styles.scss | 43 - .../Settings/FormInputCheckbox/index.jsx | 56 - .../Settings/FormInputCheckbox/styles.scss | 65 - .../Settings/FormInputDatePicker/index.jsx | 131 -- .../Settings/FormInputDatePicker/styles.scss | 173 --- .../Settings/FormInputSelect/index.jsx | 26 - .../Settings/FormInputSelect/styles.scss | 102 -- .../Settings/FormInputText/index.jsx | 49 - .../Settings/FormInputText/styles.scss | 47 - .../Settings/FormInputTextArea/index.jsx | 60 - .../Settings/FormInputTextArea/styles.scss | 57 - .../components/Settings/Header/index.jsx | 31 - .../components/Settings/Header/styles.scss | 44 - .../components/Settings/PageRow/index.jsx | 42 - .../components/Settings/PageRow/styles.scss | 47 - .../Settings/Payment/EmailDetails/index.jsx | 47 - .../Settings/Payment/EmailDetails/styles.scss | 43 - .../Settings/Payment/PaymentInfo/index.jsx | 35 - .../Settings/Payment/PaymentInfo/styles.scss | 64 - .../Settings/Payment/PaymentMethod/index.jsx | 158 --- .../Payment/PaymentMethod/styles.scss | 392 ------ .../Payment/PaymentProvider/index.jsx | 221 --- .../Payment/PaymentProvider/styles.scss | 327 ----- .../components/Settings/Payment/constants.js | 123 -- .../components/Settings/Payment/index.jsx | 63 - .../components/Settings/Payment/styles.scss | 119 -- .../Settings/Preferences/Email/data.jsx | 20 - .../Settings/Preferences/Email/index.jsx | 199 --- .../Settings/Preferences/Email/styles.scss | 102 -- .../Settings/Preferences/List/Item/index.jsx | 80 -- .../Preferences/List/Item/styles.scss | 166 --- .../Settings/Preferences/List/data.jsx | 15 - .../Settings/Preferences/List/index.jsx | 43 - .../Preferences/Personalization/index.jsx | 82 -- .../Preferences/Personalization/styles.scss | 15 - .../components/Settings/Preferences/index.jsx | 113 -- .../Settings/Preferences/styles.scss | 83 -- .../ProfileSettings/AboutYou/index.jsx | 75 - .../Hobbies/List/Item/index.jsx | 111 -- .../Hobbies/List/Item/styles.scss | 193 --- .../ProfileSettings/Hobbies/List/index.jsx | 41 - .../ProfileSettings/Hobbies/List/styles.scss | 30 - .../ProfileSettings/Hobbies/index.jsx | 127 -- .../ProfileSettings/Hobbies/styles.scss | 324 ----- .../ProfileSettings/ImageInput/index.jsx | 154 --- .../ProfileSettings/ImageInput/styles.scss | 134 -- .../Learning/List/Item/index.jsx | 176 --- .../Learning/List/Item/styles.scss | 211 --- .../ProfileSettings/Learning/List/index.jsx | 41 - .../ProfileSettings/Learning/List/styles.scss | 30 - .../ProfileSettings/Learning/index.jsx | 219 --- .../ProfileSettings/Learning/styles.scss | 468 ------- .../ProfileSettings/PersonalDetails/index.jsx | 240 ---- .../Settings/ProfileSettings/index.jsx | 1212 ----------------- .../Settings/ProfileSettings/styles.scss | 170 --- .../Settings/SettingsBanner/index.jsx | 90 -- .../Settings/SettingsBanner/styles.scss | 65 - .../Settings/SideBar/SideItem/index.jsx | 69 - .../Settings/SideBar/SideItem/styles.scss | 61 - .../components/Settings/SideBar/index.jsx | 46 - .../components/Settings/SideBar/styles.scss | 21 - .../components/Settings/TabSelector/index.jsx | 101 -- .../Settings/TabSelector/styles.scss | 126 -- .../Settings/ToggleableItem/index.jsx | 99 -- .../Settings/ToggleableItem/styles.scss | 52 - .../Tools/Devices/List/Item/index.jsx | 114 -- .../Tools/Devices/List/Item/styles.scss | 209 --- .../Settings/Tools/Devices/List/index.jsx | 54 - .../Settings/Tools/Devices/List/styles.scss | 32 - .../Settings/Tools/Devices/index.jsx | 615 --------- .../Settings/Tools/Devices/styles.scss | 110 -- .../ServiceProviders/List/Item/index.jsx | 96 -- .../ServiceProviders/List/Item/styles.scss | 209 --- .../Tools/ServiceProviders/List/index.jsx | 47 - .../Tools/ServiceProviders/List/styles.scss | 32 - .../Tools/ServiceProviders/dropdowns.json | 24 - .../Settings/Tools/ServiceProviders/index.jsx | 421 ------ .../Tools/ServiceProviders/styles.scss | 117 -- .../Tools/Software/List/Item/index.jsx | 96 -- .../Tools/Software/List/Item/styles.scss | 209 --- .../Settings/Tools/Software/List/index.jsx | 44 - .../Settings/Tools/Software/List/styles.scss | 27 - .../Settings/Tools/Software/dropdowns.json | 24 - .../Settings/Tools/Software/index.jsx | 427 ------ .../Settings/Tools/Software/styles.scss | 110 -- .../Tools/Subscriptions/List/Item/index.jsx | 92 -- .../Tools/Subscriptions/List/Item/styles.scss | 215 --- .../Tools/Subscriptions/List/index.jsx | 44 - .../Tools/Subscriptions/List/styles.scss | 32 - .../Settings/Tools/Subscriptions/index.jsx | 387 ------ .../Settings/Tools/Subscriptions/styles.scss | 111 -- .../components/Settings/Tools/index.jsx | 139 -- .../components/Settings/Tools/styles.scss | 67 - .../TopcoderAndYou/Community/Item/index.jsx | 90 -- .../TopcoderAndYou/Community/Item/styles.scss | 177 --- .../TopcoderAndYou/Community/data.jsx | 32 - .../TopcoderAndYou/Community/index.jsx | 56 - .../TopcoderAndYou/Community/styles.scss | 60 - .../TopcoderAndYou/Tracks/Track/index.jsx | 67 - .../TopcoderAndYou/Tracks/Track/styles.scss | 90 -- .../Settings/TopcoderAndYou/Tracks/index.jsx | 57 - .../Settings/TopcoderAndYou/Tracks/tracks.jsx | 20 - .../Settings/TopcoderAndYou/index.jsx | 489 ------- .../Settings/TopcoderAndYou/styles.scss | 100 -- .../Settings/UserConsentModal/index.jsx | 43 - .../Settings/UserConsentModal/styles.scss | 113 -- src/shared/components/Settings/constants.js | 62 - src/shared/components/Settings/index.jsx | 154 --- src/shared/components/Settings/style.scss | 470 ------- src/shared/containers/Settings.jsx | 329 ----- 145 files changed, 19932 deletions(-) delete mode 100644 src/shared/components/Settings/Accordion/index.jsx delete mode 100644 src/shared/components/Settings/Accordion/styles.scss delete mode 100644 src/shared/components/Settings/ComingSoon/index.jsx delete mode 100644 src/shared/components/Settings/ComingSoon/styles.scss delete mode 100644 src/shared/components/Settings/ConfirmationModal/index.jsx delete mode 100644 src/shared/components/Settings/ConfirmationModal/styles.scss delete mode 100644 src/shared/components/Settings/ConsentComponent/index.jsx delete mode 100644 src/shared/components/Settings/ErrorMessage/index.jsx delete mode 100644 src/shared/components/Settings/ErrorMessage/styles.scss delete mode 100644 src/shared/components/Settings/ErrorWrapper/index.jsx delete mode 100644 src/shared/components/Settings/ErrorWrapper/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss delete mode 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss delete mode 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx delete mode 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss delete mode 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/index.jsx delete mode 100644 src/shared/components/Settings/ExperienceAndSkills/styles.scss delete mode 100644 src/shared/components/Settings/FormField/index.jsx delete mode 100644 src/shared/components/Settings/FormField/styles.scss delete mode 100644 src/shared/components/Settings/FormInputCheckbox/index.jsx delete mode 100644 src/shared/components/Settings/FormInputCheckbox/styles.scss delete mode 100644 src/shared/components/Settings/FormInputDatePicker/index.jsx delete mode 100644 src/shared/components/Settings/FormInputDatePicker/styles.scss delete mode 100644 src/shared/components/Settings/FormInputSelect/index.jsx delete mode 100644 src/shared/components/Settings/FormInputSelect/styles.scss delete mode 100644 src/shared/components/Settings/FormInputText/index.jsx delete mode 100644 src/shared/components/Settings/FormInputText/styles.scss delete mode 100644 src/shared/components/Settings/FormInputTextArea/index.jsx delete mode 100644 src/shared/components/Settings/FormInputTextArea/styles.scss delete mode 100644 src/shared/components/Settings/Header/index.jsx delete mode 100644 src/shared/components/Settings/Header/styles.scss delete mode 100644 src/shared/components/Settings/PageRow/index.jsx delete mode 100644 src/shared/components/Settings/PageRow/styles.scss delete mode 100644 src/shared/components/Settings/Payment/EmailDetails/index.jsx delete mode 100644 src/shared/components/Settings/Payment/EmailDetails/styles.scss delete mode 100644 src/shared/components/Settings/Payment/PaymentInfo/index.jsx delete mode 100644 src/shared/components/Settings/Payment/PaymentInfo/styles.scss delete mode 100644 src/shared/components/Settings/Payment/PaymentMethod/index.jsx delete mode 100644 src/shared/components/Settings/Payment/PaymentMethod/styles.scss delete mode 100644 src/shared/components/Settings/Payment/PaymentProvider/index.jsx delete mode 100644 src/shared/components/Settings/Payment/PaymentProvider/styles.scss delete mode 100644 src/shared/components/Settings/Payment/constants.js delete mode 100644 src/shared/components/Settings/Payment/index.jsx delete mode 100644 src/shared/components/Settings/Payment/styles.scss delete mode 100644 src/shared/components/Settings/Preferences/Email/data.jsx delete mode 100644 src/shared/components/Settings/Preferences/Email/index.jsx delete mode 100644 src/shared/components/Settings/Preferences/Email/styles.scss delete mode 100644 src/shared/components/Settings/Preferences/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/Preferences/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/Preferences/List/data.jsx delete mode 100644 src/shared/components/Settings/Preferences/List/index.jsx delete mode 100644 src/shared/components/Settings/Preferences/Personalization/index.jsx delete mode 100644 src/shared/components/Settings/Preferences/Personalization/styles.scss delete mode 100644 src/shared/components/Settings/Preferences/index.jsx delete mode 100644 src/shared/components/Settings/Preferences/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/List/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/ImageInput/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/ImageInput/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/Learning/List/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/Learning/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/Learning/styles.scss delete mode 100644 src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/index.jsx delete mode 100644 src/shared/components/Settings/ProfileSettings/styles.scss delete mode 100644 src/shared/components/Settings/SettingsBanner/index.jsx delete mode 100644 src/shared/components/Settings/SettingsBanner/styles.scss delete mode 100644 src/shared/components/Settings/SideBar/SideItem/index.jsx delete mode 100644 src/shared/components/Settings/SideBar/SideItem/styles.scss delete mode 100644 src/shared/components/Settings/SideBar/index.jsx delete mode 100644 src/shared/components/Settings/SideBar/styles.scss delete mode 100644 src/shared/components/Settings/TabSelector/index.jsx delete mode 100644 src/shared/components/Settings/TabSelector/styles.scss delete mode 100644 src/shared/components/Settings/ToggleableItem/index.jsx delete mode 100644 src/shared/components/Settings/ToggleableItem/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Devices/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Devices/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Devices/List/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Devices/List/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Devices/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Devices/styles.scss delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/List/index.jsx delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/dropdowns.json delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/index.jsx delete mode 100644 src/shared/components/Settings/Tools/ServiceProviders/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Software/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Software/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Software/List/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Software/List/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Software/dropdowns.json delete mode 100644 src/shared/components/Settings/Tools/Software/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Software/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Subscriptions/List/Item/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Subscriptions/List/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Subscriptions/List/styles.scss delete mode 100644 src/shared/components/Settings/Tools/Subscriptions/index.jsx delete mode 100644 src/shared/components/Settings/Tools/Subscriptions/styles.scss delete mode 100644 src/shared/components/Settings/Tools/index.jsx delete mode 100644 src/shared/components/Settings/Tools/styles.scss delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/Item/index.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/Item/styles.scss delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/data.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/index.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/styles.scss delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/Track/index.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/Track/styles.scss delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/index.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/tracks.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/index.jsx delete mode 100644 src/shared/components/Settings/TopcoderAndYou/styles.scss delete mode 100644 src/shared/components/Settings/UserConsentModal/index.jsx delete mode 100644 src/shared/components/Settings/UserConsentModal/styles.scss delete mode 100644 src/shared/components/Settings/constants.js delete mode 100644 src/shared/components/Settings/index.jsx delete mode 100644 src/shared/components/Settings/style.scss delete mode 100644 src/shared/containers/Settings.jsx diff --git a/src/shared/components/Settings/Accordion/index.jsx b/src/shared/components/Settings/Accordion/index.jsx deleted file mode 100644 index cc582836ff..0000000000 --- a/src/shared/components/Settings/Accordion/index.jsx +++ /dev/null @@ -1,131 +0,0 @@ -/** - * Accordion component - * - * Used to render the mobile view for the Settings pages. - */ -import React from 'react'; -import PT from 'prop-types'; - -import ArrowDown from 'assets/images/arrow-down.svg'; -import ErrorWrapper from 'components/Settings/ErrorWrapper'; - -import './styles.scss'; - -export default class Accordion extends React.Component { - constructor(props) { - super(props); - - this.isOpened = this.isOpened.bind(this); - this.toggleItem = this.toggleItem.bind(this); - - this.state = { - /* - * hasToggled makes sure that the initial state for the Accordion - * is completely closed. It will sync with the sidebar only after - * the user has clicked the Accordion. - */ - hasToggled: false, - /* - * the current Accordion item is different from this.props.currentSidebarTab - * as it can be undefined, when the Accordion is completely closed. - */ - currentItem: undefined, - }; - } - - componentDidMount() { - const { currentSidebarTab } = this.props; - this.setState({ currentItem: currentSidebarTab }); - } - - /* - * Returns whether a tab is opened or closed. - */ - isOpened(tab) { - const { currentItem } = this.state; - return currentItem === tab; - } - - toggleItem(tab) { - const { hasToggled, currentItem } = this.state; - const { toggleSidebarTab } = this.props; - // update hasToggled so the Accordion can be sync with the Sidebar - if (!hasToggled) { - this.setState({ hasToggled: true }); - } - - if (currentItem === tab) { - // closing the current tab - this.setState({ currentItem: undefined }); - } else { - // opening a new tab, both on the Accordion and the Sidebar - this.setState({ currentItem: tab }); - toggleSidebarTab(tab); - } - } - - render() { - const { - icons, - names, - renderTabContent, - } = this.props; - - /* - * Simple rendering function used to add the props (width & height) - * only once instead of having to add them on each element - */ - const renderSvgIcon = (svgIcon) => { - const componentProps = { - width: '30px', - height: '26px', - }; - return React.cloneElement(svgIcon, componentProps); - }; - - return ( -
- { - names.map((name, index) => ( -
-
this.toggleItem(name)} - onKeyPress={() => this.toggleItem(name)} - > - - {renderSvgIcon(icons[name])} - -

- {name} -

- - - -
- { - this.isOpened(name) ? ( -
- - {renderTabContent(name)} - -
- ) : null - } -
- )) - } -
- ); - } -} - -Accordion.propTypes = { - currentSidebarTab: PT.string.isRequired, - icons: PT.shape().isRequired, - names: PT.arrayOf(PT.string).isRequired, - renderTabContent: PT.func.isRequired, - toggleSidebarTab: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/Accordion/styles.scss b/src/shared/components/Settings/Accordion/styles.scss deleted file mode 100644 index 596e68695c..0000000000 --- a/src/shared/components/Settings/Accordion/styles.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import "../style"; - -.Accordion { - width: 100%; - - .header { - display: flex; - flex-direction: row; - align-items: center; - height: 60px; - border-bottom: 1px solid $tc-gray-10; - cursor: pointer; - outline: 0; - } - - .icon-container { - padding: 0 20px; - } - - .name { - @include tc-body-md; - - flex: 1; - color: $tc-black; - font-weight: 500; - text-transform: capitalize; - } - - .arrow-container { - padding-right: 15px; - - .up { - transform: rotate(180deg); - } - - &.closed { - svg { - filter: invert(100%); - } - } - } -} diff --git a/src/shared/components/Settings/ComingSoon/index.jsx b/src/shared/components/Settings/ComingSoon/index.jsx deleted file mode 100644 index 3acd0f6567..0000000000 --- a/src/shared/components/Settings/ComingSoon/index.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import './styles.scss'; - -export default () => ( -
- This feature is coming soon! -
- Stay tuned! -
-); diff --git a/src/shared/components/Settings/ComingSoon/styles.scss b/src/shared/components/Settings/ComingSoon/styles.scss deleted file mode 100644 index 494854882b..0000000000 --- a/src/shared/components/Settings/ComingSoon/styles.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "../style"; - -.coming-soon { - @include merriweather-sans-regular; - - width: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 28px; - text-align: center; - padding: 60px; - color: $tc-black; - line-height: 50px; -} diff --git a/src/shared/components/Settings/ConfirmationModal/index.jsx b/src/shared/components/Settings/ConfirmationModal/index.jsx deleted file mode 100644 index 83189a68cb..0000000000 --- a/src/shared/components/Settings/ConfirmationModal/index.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import PT from 'prop-types'; -import { - Modal, PrimaryButton, Button, GhostButton, -} from 'topcoder-react-ui-kit'; -import IconClose from 'assets/images/icon-close-green.svg'; - -import styles from './styles.scss'; - -export default function ConfirmationModal(props) { - const { onConfirm, onCancel, name } = props; - return ( - -
-
-
- DELETE CONFIRMATION - - - -
-
- - Are you sure you want to delete{' '}{name}? This action cannot be undone. - -
-
-
- Yes, Delete -
-
- -
-
-
-
- - ); -} - -ConfirmationModal.propTypes = { - onConfirm: PT.func.isRequired, - onCancel: PT.func.isRequired, - name: PT.string.isRequired, -}; diff --git a/src/shared/components/Settings/ConfirmationModal/styles.scss b/src/shared/components/Settings/ConfirmationModal/styles.scss deleted file mode 100644 index 32e0788bb3..0000000000 --- a/src/shared/components/Settings/ConfirmationModal/styles.scss +++ /dev/null @@ -1,191 +0,0 @@ -@import "~styles/mixins"; - -.modal-overlay { - background-color: rgba($color-tc-black, 0.85); -} - -.modal { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - width: 100%; - height: 100%; - max-width: none; - max-height: none; - border-radius: 8px; - overflow-y: auto; - background: none; - top: 0; - left: 0; - transform: none; - - .close { - padding: 0; - margin: 0 0 0 auto; - min-height: 0; - } -} - -.modal-dialog { - flex: 0 0 auto; - display: flex; - flex-direction: column; - margin: auto; -} - -.modal-content { - flex: auto; - display: flex; - flex-direction: column; - color: $color-black-100; - max-width: 794px; - background-color: $color-tc-white; - border-radius: 8px; - box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); - margin: 32px; - width: 100%; -} - -.modal-header { - @include barlow-bold; - - font-size: 22px; - line-height: 26px; - font-weight: 600; - text-transform: uppercase; - display: flex; - align-items: center; - padding: $pad-xxxl $pad-xxxxl $pad-xxxxl; - border-radius: 8px 8px 0 0; -} - -.modal-body { - @include roboto-bold; - - flex: auto; - display: flex; - padding: 0 $pad-xxxxl; - - .title { - font-size: 16px; - line-height: 24px; - font-weight: 400; - padding: 24px 0; - align-items: center; - border-top: 2px solid $color-black-10; - border-bottom: 2px solid $color-black-10; - width: 100%; - - span { - font-weight: 800; - margin-left: 5px; - } - - @include xs-to-sm { - font-size: 16px; - } - } -} - -.modal-footer { - display: flex; - flex-direction: row-reverse; - align-items: flex-end; - padding: 24px 0; - border-radius: 0 0 8px 8px; - margin-right: 24px; - - @include xs-to-md { - padding: $pad-lg; - margin: 0 $margin-lg 0; - width: 100%; - padding-right: 24px !important; - } -} - -@include xs-to-md { - .modal { - padding: 0 20px; - overflow-y: auto; - height: 100%; - max-height: 100%; - border: none; - box-shadow: none; - border-radius: 0; - z-index: 999999; - } - - .modal-content { - min-height: 120px; - } - - .modal-header { - @include roboto-bold; - - font-size: 16px; - line-height: 20px; - padding: $pad-lg; - border-radius: 0; - } - - .modal-body { - padding: 0 $pad-lg; - flex-direction: column; - } - - .modal-footer { - padding: $pad-lg; - margin: 0 $margin-lg 0; - border-radius: 0; - } -} - -@include xs-to-sm { - .modal-content { - width: 100%; - margin: 0; - border-radius: 0; - } -} - -.button-save-ghost { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 24px; - border-radius: 50px !important; - color: #137d60 !important; - text-transform: uppercase; - background-color: #fff !important; - border: 2px solid #137d60 !important; - - &:hover { - background-color: #fff !important; - background-image: none !important; - border-color: #137d60 !important; - } - - @include xs-to-md { - font-size: 14px; - line-height: 20px; - } -} - -.button-save { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 24px; - border-radius: 50px !important; - background: $color-turq-160 !important; - color: $color-tc-white !important; - text-transform: uppercase; - - @include xs-to-md { - font-size: 14px; - line-height: 20px; - } -} diff --git a/src/shared/components/Settings/ConsentComponent/index.jsx b/src/shared/components/Settings/ConsentComponent/index.jsx deleted file mode 100644 index f8a165339c..0000000000 --- a/src/shared/components/Settings/ConsentComponent/index.jsx +++ /dev/null @@ -1,86 +0,0 @@ -/** - * Abstract component that enables sub-classes to have user consent form functionality - */ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable no-nested-ternary */ -/* eslint-disable jsx-a11y/label-has-for */ -import React from 'react'; -import UserConsentModal from 'components/Settings/UserConsentModal'; -import PT from 'prop-types'; - -export default class ConsentComponent extends React.Component { - constructor(props) { - super(props); - this.onHandleConsent = this.onHandleConsent.bind(this); - this.shouldRenderConsent = this.shouldRenderConsent.bind(this); - this.renderConsent = this.renderConsent.bind(this); - this.showConsent = this.showConsent.bind(this); - ConsentComponent.getTraitData = ConsentComponent.getTraitData.bind(this); - ConsentComponent.getUserConsent = ConsentComponent.getUserConsent.bind(this); - - this.state = { - onConsent: undefined, - }; - } - - onHandleConsent(e, answer) { - e.preventDefault(); - const { onConsent } = this.state; - this.setState({ onConsent: undefined }); - if (onConsent === undefined) { - return; - } - onConsent(answer); - } - - static getTraitData(userTraits) { - const trait = userTraits.filter(t => t.traitId === 'personalization'); - if (trait.length !== 0) { - return trait[0].traits.data[0]; - } - return null; - } - - static getUserConsent(userTraits) { - const traitData = ConsentComponent.getTraitData(userTraits); - - if (traitData && typeof traitData.userConsent === 'boolean') { - return traitData.userConsent; - } - // by default, when personalization user trait hasn't been - // created yet, user doesn't give consent - return false; - } - - /** - * Show User Consent Modal - * @param onConsent callback after consent - */ - showConsent(onConsent) { - const { userTraits } = this.props; - const userConsent = ConsentComponent.getUserConsent(userTraits); - if (userConsent === undefined) { - this.setState({ onConsent }); - } else { - onConsent(userConsent); - } - } - - /** - * Determines if view show render consent - * - * @return {boolean} - */ - shouldRenderConsent() { - const { onConsent } = this.state; - return onConsent; - } - - renderConsent() { - return (); - } -} - -ConsentComponent.propTypes = { - userTraits: PT.array.isRequired, -}; diff --git a/src/shared/components/Settings/ErrorMessage/index.jsx b/src/shared/components/Settings/ErrorMessage/index.jsx deleted file mode 100644 index a26d8d81c4..0000000000 --- a/src/shared/components/Settings/ErrorMessage/index.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import './styles.scss'; - -const marginTop = (value) => { - if (value) { - return 'active-margin'; - } - - return 'active'; -}; - -const ErrorMessage = ({ invalid, message, addMargin }) => ( - - {message} - -); - -ErrorMessage.defaultProps = { - addMargin: false, -}; - -ErrorMessage.propTypes = { - invalid: PropTypes.bool.isRequired, - message: PropTypes.string.isRequired, - addMargin: PropTypes.bool, -}; - -export default ErrorMessage; diff --git a/src/shared/components/Settings/ErrorMessage/styles.scss b/src/shared/components/Settings/ErrorMessage/styles.scss deleted file mode 100644 index c68e85e9fd..0000000000 --- a/src/shared/components/Settings/ErrorMessage/styles.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import "../style"; - -.error-message { - display: none; - - &.active { - @include roboto-medium; - - display: block; - border-radius: 5px; - color: $tc-red-110; - font-size: 12px; - margin: 10px 0 0 10px; - } - - &.active-margin { - @include roboto-medium; - - display: inline; - border-radius: 5px; - color: $tc-red-110; - font-size: 12px; - margin: 10px auto 0 10px; - } -} diff --git a/src/shared/components/Settings/ErrorWrapper/index.jsx b/src/shared/components/Settings/ErrorWrapper/index.jsx deleted file mode 100644 index 3612074b5a..0000000000 --- a/src/shared/components/Settings/ErrorWrapper/index.jsx +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-disable react/forbid-prop-types */ -import React from 'react'; -import PT from 'prop-types'; -import { logger } from 'topcoder-react-lib'; - -import './styles.scss'; - -export default class ErrorWrapper extends React.Component { - constructor(props) { - super(props); - this.state = { - error: null, - errorInfo: null, - }; - } - - componentDidCatch(error, errorInfo) { - // Catch errors in any child components and re-renders with an error message - this.setState({ - error, - errorInfo, - }); - } - - render() { - const { error, errorInfo } = this.state; - const { children } = this.props; - - if (error) { - logger.error(error, errorInfo); - - return ( -
- { process.env.NODE_ENV !== 'production' ? `${error.name}: ${error.message}` : 'There was an issue loading the page' } -
- ); - } - - return children; - } -} - -ErrorWrapper.propTypes = { - children: PT.any.isRequired, -}; diff --git a/src/shared/components/Settings/ErrorWrapper/styles.scss b/src/shared/components/Settings/ErrorWrapper/styles.scss deleted file mode 100644 index 1d77131803..0000000000 --- a/src/shared/components/Settings/ErrorWrapper/styles.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "../style"; - -.container { - background-color: $tc-red-10; - color: $tc-red-110; - width: 100%; - height: auto; - border-radius: 6px; -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx deleted file mode 100644 index b6696e0430..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx +++ /dev/null @@ -1,117 +0,0 @@ -/** - * render work Item - */ -import _ from 'lodash'; -import React from 'react'; -import PT from 'prop-types'; -import ReactSVG from 'react-svg'; -import moment from 'moment'; -import Tooltip from 'components/Tooltip'; -import { isomorphy } from 'topcoder-react-utils'; - -import './styles.scss'; - -let assets; -if (isomorphy.isClientSide()) { - assets = require.context('assets/images/profile', false, /svg/); -} - -export default function Item(props) { - const { - work, - index, - onDeleteItem, - onEditItem, - } = props; - - const hasSecondLine = () => { - if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo) - && _.isEmpty(work.position) && !work.working) { - return false; - } - - return true; - }; - - const current = work.working ? '- Current' : ''; - - const deleteTip = ( -
-

Delete

-
- ); - - const editTip = ( -
-

Edit

-
- ); - - return ( -
-
-
- -
-
-
- { `${work.company}${_.isEmpty(work.industry) ? '' : ` | ${work.industry}`}${_.isEmpty(work.cityTown) ? '' : ` | ${work.cityTown}`}` } -
-
- { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`} ${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` } -
-
-

- {`${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`}`} -

-

- {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`} -

-
-
-
-
- - onEditItem(index)} - tabIndex={0} - role="button" - onClick={() => onEditItem(index)} - > - edit-icon - - -
- - onDeleteItem(index)} - tabIndex={0} - role="button" - onClick={() => onDeleteItem(index)} - > - delete-icon - - - -
-
-
- ); -} - -Item.propTypes = { - work: PT.shape().isRequired, - index: PT.number.isRequired, - onDeleteItem: PT.func.isRequired, - onEditItem: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss deleted file mode 100644 index 6e017384ab..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss +++ /dev/null @@ -1,207 +0,0 @@ -@import "../../../../style"; - -.container { - display: flex; - flex-direction: row; - justify-items: center; - justify-content: space-between; - align-items: center; - min-height: 96px; - width: 100%; - border-bottom: none; - background-color: $tc-white; - padding: $pad-lg; - border: 1px solid $color-black-20; - border-radius: 8px; -} - -.work-info { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.work-icon { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 64px; - width: 64px; - height: 64px; - background: $color-black-5; - border-radius: 4px; - margin-right: $margin-lg; -} - -.work-parameters { - @include roboto-medium; - - display: flex; - flex-direction: column; - justify-items: center; - justify-content: center; - font-size: 15px; - line-height: 20px; - text-transform: capitalize; - padding-right: 20px; - - &.single-line { - flex-direction: row; - align-items: center; - } -} - -.parameter-first-line { - @include roboto-bold; - - color: $tc-black; - font-weight: 700; - font-size: 16px; - line-height: 20px; - letter-spacing: 0.5px; - text-transform: capitalize; - word-break: break-all; - - &.single-line { - margin-bottom: 0; - } - - @include upto-sm { - margin-bottom: 0; - } -} - -.parameter-second-line, -.parameter-third-line, -.parameter-second-line-mobile { - @include roboto-medium; - - color: $color-black-60; - font-weight: 400; - font-size: 16px; - line-height: 24px; - word-break: break-all; - - @include upto-sm { - display: none; - } -} - -.parameter-second-line-mobile { - display: none; - - @include upto-sm { - display: flex; - flex-direction: column; - - p { - word-break: break-all; - } - } -} - -.tctooltiptext { - background: $tooltip-gray; - color: $tc-white; - border-radius: 8px; - padding: 10px; - - p { - @include roboto-medium; - - font-weight: 400; - font-size: 14px; - line-height: 22px; - } -} - -.tctooltiptext::after { - content: ""; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - bottom: 4px; - margin-left: -5px; - border-width: 5px 5px 0; - left: 50%; - border-top-color: $tc-black; - z-index: 1000; -} - -.operation-container { - display: flex; - flex-direction: row; - justify-content: space-between; - - .delete-wrapper { - margin-left: $margin-xl; - margin-right: $margin-xs; - - @include xs-to-sm { - margin-left: $margin-lg; - margin-right: 0; - } - - @media screen and (max-width: 320px) { - margin-right: 0; - margin-left: 6px; - } - } - - .delete { - display: flex; - flex-direction: column; - justify-items: center; - justify-content: center; - cursor: pointer; - outline-style: none; - - img { - width: 20px; - height: 20px; - } - - p { - @include roboto-regular; - - font-size: 11px; - line-height: 15px; - font-weight: 400; - color: $tc-gray-50; - - @include upto-sm { - display: none; - } - } - } - - .edit { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - outline-style: none; - - img { - width: 20px; - height: 20px; - } - - p { - @include roboto-regular; - - font-size: 11px; - line-height: 15px; - font-weight: 400; - color: $tc-gray-50; - - @include upto-sm { - display: none; - } - } - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx deleted file mode 100644 index a45950d3ee..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx +++ /dev/null @@ -1,36 +0,0 @@ -/** - * render Work list - */ -import React from 'react'; -import PT from 'prop-types'; -import Item from './Item'; - -import './styles.scss'; - -export default function WorkList(props) { - const { - workList, - onDeleteItem, - onEditItem, - } = props; - - return ( -
-
    - { - workList.items.map((work, index) => ( -
  • - -
    • - )) - } -
-
- ); -} - -WorkList.propTypes = { - workList: PT.shape().isRequired, - onDeleteItem: PT.func.isRequired, - onEditItem: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss deleted file mode 100644 index 92dda54439..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "../../../style"; -@import "~styles/mixins"; - -.container { - width: 100%; - background-color: $tc-white; - padding: 0 0; - margin: 0 0 $margin-xxxxl; - - ul { - display: flex; - flex-direction: column; - justify-items: center; - - li { - margin-bottom: $margin-md; - } - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx deleted file mode 100644 index 5650321910..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx +++ /dev/null @@ -1,606 +0,0 @@ -/** - * Child component of Settings/Profile/ renders the - * 'Work' page. - */ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable no-nested-ternary */ -/* eslint-disable jsx-a11y/label-has-for */ -/* eslint-disable no-undef */ -import React from 'react'; -import PT from 'prop-types'; -import _ from 'lodash'; -import moment from 'moment'; -import ConsentComponent from 'components/Settings/ConsentComponent'; -import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit'; -import ErrorMessage from 'components/Settings/ErrorMessage'; -import { validateStartDate, validateEndDate } from 'utils/settings'; -import FormField from 'components/Settings/FormField'; -import FormInputText from 'components/Settings/FormInputText'; -import FormInputCheckbox from 'components/Settings/FormInputCheckbox'; -import FormInputDatePicker from 'components/Settings/FormInputDatePicker'; -import AddItemIcon from 'assets/images/settings-add-item.svg'; -import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner'; -import WorkplaceList from './WorkplaceList'; -import ConfirmationModal from '../../ConfirmationModal'; - -import styles from './styles.scss'; - -export default class Work extends ConsentComponent { - constructor(props) { - super(props); - this.onHandleDeleteWork = this.onHandleDeleteWork.bind(this); - this.onDeleteWork = this.onDeleteWork.bind(this); - this.onEditWork = this.onEditWork.bind(this); - this.loadWorkTrait = this.loadWorkTrait.bind(this); - this.onUpdateInput = this.onUpdateInput.bind(this); - this.onHandleAddWork = this.onHandleAddWork.bind(this); - this.onAddWork = this.onAddWork.bind(this); - this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this); - this.onUpdateDate = this.onUpdateDate.bind(this); - this.onCancelEditStatus = this.onCancelEditStatus.bind(this); - - const { userTraits } = props; - this.state = { - formInvalid: false, - startDateInvalid: false, - startDateInvalidMsg: '', - endDateInvalid: false, - endDateDisabled: false, - endDateInvalidMsg: '', - isSumbit: false, - workTrait: this.loadWorkTrait(userTraits), - personalizationTrait: this.loadPersonalizationTrait(userTraits), - newWork: { - company: '', - position: '', - cityTown: '', - timePeriodFrom: '', - timePeriodTo: '', - industry: '', - working: false, - }, - isEdit: false, - indexNo: null, - showConfirmation: false, - windowInnerWidth: 0, - }; - } - - componentWillReceiveProps(nextProps) { - const workTrait = this.loadWorkTrait(nextProps.userTraits); - const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits); - this.setState({ - workTrait, - personalizationTrait, - isSubmit: false, - formInvalid: false, - startDateInvalid: false, - startDateInvalidMsg: '', - endDateInvalid: false, - endDateDisabled: false, - endDateInvalidMsg: '', - }); - } - - componentDidMount() { - this.handleResize(); - window.addEventListener('resize', this.handleResize); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); - } - - handleResize = () => { - this.setState({ windowInnerWidth: window.innerWidth }); - } - - /** - * Show User Consent Modal - * @param e event - */ - onHandleAddWork(e) { - if (e) e.preventDefault(); - const { newWork } = this.state; - this.setState({ isSubmit: true }); - if (this.onCheckFormValue(newWork)) { - return; - } - this.showConsent(this.onAddWork.bind(this)); - } - - /** - * Check form fields value, - * Invalid value, can not save - * @param newWork object - */ - onCheckFormValue(newWork) { - let invalid = false; - - if (!_.trim(newWork.company).length) { - invalid = true; - } - - const fromDateValidResult = validateStartDate(newWork.working, - newWork.timePeriodFrom, newWork.timePeriodTo); - const endDateValidResult = validateEndDate(newWork.working, - newWork.timePeriodFrom, newWork.timePeriodTo); - const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid; - - this.setState({ - formInvalid, - startDateInvalid: fromDateValidResult.invalid, - startDateInvalidMsg: fromDateValidResult.message, - endDateInvalid: endDateValidResult.invalid, - endDateInvalidMsg: endDateValidResult.message, - }); - - return formInvalid; - } - - onHandleDeleteWork(indexNo) { - this.setState({ - showConfirmation: true, - indexNo, - }); - } - - onUpdateDate(date, timePeriod) { - const { newWork: oldWork } = this.state; - const newWork = { ...oldWork }; - newWork[timePeriod] = date; - this.setState({ newWork, isSubmit: false }); - } - - /** - * Delete work by index - * @param indexNo the work index no - */ - onDeleteWork(indexNo) { - const { workTrait } = this.state; - const newWorkTrait = { ...workTrait }; - newWorkTrait.traits.data.splice(indexNo, 1); - this.setState({ - workTrait: newWorkTrait, - }); - - const { - handle, - tokenV3, - updateUserTrait, - deleteUserTrait, - } = this.props; - - if (newWorkTrait.traits.data.length > 0) { - updateUserTrait(handle, 'work', newWorkTrait.traits.data, tokenV3); - } else { - deleteUserTrait(handle, 'work', tokenV3); - } - - this.setState({ - showConfirmation: false, - newWork: { - company: '', - position: '', - cityTown: '', - timePeriodFrom: '', - timePeriodTo: '', - industry: '', - working: false, - }, - isEdit: false, - indexNo: null, - isSubmit: false, - formInvalid: false, - startDateInvalid: false, - startDateInvalidMsg: '', - endDateInvalid: false, - endDateDisabled: false, - endDateInvalidMsg: '', - }); - } - - /** - * Edit work by index - * @param indexNo the work index no - */ - onEditWork(indexNo) { - const { workTrait } = this.state; - const isEmpty = val => val == null || val === ''; - - this.setState({ - newWork: { - company: workTrait.traits.data[indexNo].company, - position: isEmpty(workTrait.traits.data[indexNo].position) ? '' : workTrait.traits.data[indexNo].position, - cityTown: isEmpty(workTrait.traits.data[indexNo].cityTown) ? '' : workTrait.traits.data[indexNo].cityTown, - timePeriodFrom: isEmpty(workTrait.traits.data[indexNo].timePeriodFrom) ? '' : workTrait.traits.data[indexNo].timePeriodFrom, - timePeriodTo: isEmpty(workTrait.traits.data[indexNo].timePeriodTo) ? '' : workTrait.traits.data[indexNo].timePeriodTo, - industry: isEmpty(workTrait.traits.data[indexNo].industry) ? '' : workTrait.traits.data[indexNo].industry, - working: workTrait.traits.data[indexNo].working, - }, - isEdit: true, - indexNo, - formInvalid: false, - startDateInvalid: false, - startDateInvalidMsg: '', - endDateInvalid: false, - endDateDisabled: workTrait.traits.data[indexNo].working, - endDateInvalidMsg: '', - isSubmit: false, - }); - } - - /** - * Add new work - * @param answer user consent answer value - */ - onAddWork(answer) { - const { - newWork, personalizationTrait, isEdit, indexNo, - } = this.state; - const isEmpty = val => val == null || val === ''; - const isEmptyObject = val => _.isEmpty(val); - - const { - handle, - tokenV3, - updateUserTrait, - addUserTrait, - } = this.props; - - const { workTrait } = this.state; - - const work = _.clone(newWork); - if (isEmpty(work.position)) { - delete work.position; - } - if (isEmpty(work.cityTown)) { - delete work.cityTown; - } - if (isEmpty(work.timePeriodFrom)) { - delete work.timePeriodFrom; - } else { - work.timePeriodFrom = new Date(work.timePeriodFrom).getTime(); - } - if (isEmpty(work.timePeriodTo)) { - delete work.timePeriodTo; - } else { - work.timePeriodTo = new Date(work.timePeriodTo).getTime(); - } - if (isEmpty(work.industry)) { - delete work.industry; - } - - if (workTrait.traits && workTrait.traits.data.length > 0) { - const newWorkTrait = _.cloneDeep(workTrait); - if (isEdit) { - newWorkTrait.traits.data.splice(indexNo, 1); - } - newWorkTrait.traits.data.push(work); - updateUserTrait(handle, 'work', newWorkTrait.traits.data, tokenV3); - } else { - const newWorks = []; - newWorks.push(work); - addUserTrait(handle, 'work', newWorks, tokenV3); - } - this.setState({ - isEdit: false, - indexNo: null, - isSubmit: false, - }); - // save personalization - if (isEmptyObject(personalizationTrait)) { - const personalizationData = { userConsent: answer }; - addUserTrait(handle, 'personalization', [personalizationData], tokenV3); - } else { - const trait = personalizationTrait.traits.data[0]; - if (trait.userConsent !== answer) { - const personalizationData = { userConsent: answer }; - updateUserTrait(handle, 'personalization', [personalizationData], tokenV3); - } - } - - this.clearForm(); - } - - clearForm() { - this.setState({ - newWork: { - company: '', - position: '', - cityTown: '', - timePeriodFrom: '', - timePeriodTo: '', - industry: '', - working: false, - }, - }); - } - - /** - * Update input value - * @param e event - */ - onUpdateInput(e) { - const { newWork: oldWork } = this.state; - const newWork = { ...oldWork }; - let endDateDisabled = newWork.working; - if (e.target.type !== 'checkbox') { - newWork[e.target.name] = e.target.value; - } else { - newWork[e.target.name] = e.target.checked; - if (e.target.checked) { // if working nullify toDate - newWork.timePeriodTo = ''; - endDateDisabled = true; - } else { - endDateDisabled = false; - } - } - this.setState({ newWork, isSubmit: false, endDateDisabled }); - } - - /** - * Get work trait - * @param userTraits the all user traits - */ - loadWorkTrait = (userTraits) => { - const trait = userTraits.filter(t => t.traitId === 'work'); - const works = trait.length === 0 ? {} : trait[0]; - return _.assign({}, works); - } - - /** - * Get personalization trait - * @param userTraits the all user traits - */ - loadPersonalizationTrait = (userTraits) => { - const trait = userTraits.filter(t => t.traitId === 'personalization'); - const personalization = trait.length === 0 ? {} : trait[0]; - return _.assign({}, personalization); - } - - onCancelEditStatus() { - const { isEdit } = this.state; - if (isEdit) { - this.setState({ - isEdit: false, - isSubmit: false, - indexNo: null, - newWork: { - company: '', - position: '', - cityTown: '', - timePeriodFrom: '', - timePeriodTo: '', - industry: '', - working: false, - }, - formInvalid: false, - startDateInvalid: false, - startDateInvalidMsg: '', - endDateInvalid: false, - endDateDisabled: false, - endDateInvalidMsg: '', - }); - } - } - - render() { - const { - workTrait, - isEdit, - showConfirmation, - indexNo, - formInvalid, - startDateInvalid, - startDateInvalidMsg, - endDateInvalid, - endDateDisabled, - endDateInvalidMsg, - isSubmit, - windowInnerWidth, - } = this.state; - const workItems = workTrait.traits - ? workTrait.traits.data.slice() : []; - const { newWork } = this.state; - - return ( - - { - this.shouldRenderConsent() && this.renderConsent() - } - { - showConfirmation && ( - this.showConsent(this.onDeleteWork.bind(this, indexNo))} - onCancel={() => this.setState({ - showConfirmation: false, - indexNo: null, - })} - name={workTrait.traits.data[indexNo].company} - /> - ) - } -
-

- Work Experience -

- -
- -
- { - isEdit ? (Edit workplace) - : (Jobs) - } -
- { - workItems.length > 0 - && ( - - ) - } -
-
- Enter your work experience to show customers the roles and responsibilites - you have held in the past. -
-
-
- - - {isSubmit && formInvalid && ( - - )} - - - - - - - - - - - - - - - - moment(date).add(-1, 'days').isAfter()} - value={newWork.timePeriodFrom} - id="date-from1" - onChange={date => this.onUpdateDate(date, 'timePeriodFrom')} - /> - { - isSubmit && formInvalid && ( - - ) - } - - - - moment(date).add(-1, 'days').isAfter()} - value={newWork.timePeriodTo} - id="date-to1" - onChange={date => this.onUpdateDate(date, 'timePeriodTo')} - anchorDirection="right" - disabled={endDateDisabled} - /> - { - isSubmit && formInvalid && ( - - ) - } - - - - - -
-
-
- {!isEdit && ( - - Add Job - - )} - - { isEdit && ( - - - Edit workplace to your list - - - Cancel - - - )} -
- -
-
- - ); - } -} - -Work.propTypes = { - tokenV3: PT.string.isRequired, - handle: PT.string.isRequired, - userTraits: PT.array.isRequired, - addUserTrait: PT.func.isRequired, - updateUserTrait: PT.func.isRequired, - deleteUserTrait: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss deleted file mode 100644 index 5ebf2df8c6..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss +++ /dev/null @@ -1,139 +0,0 @@ -@import "~styles/mixins"; - -.work-container { - padding: $pad-xxxxl; - margin: $margin-xxxxl 0; - background-color: $color-black-5; - border-radius: 8px; - - .title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 22px; - color: inherit; - padding: 0 0 40px; - text-transform: uppercase; - } - - .workplace-form { - display: flex; - flex-wrap: wrap; - } -} - -.form-container { - padding: $pad-xxxxl; - background-color: $color-tc-white; - border-radius: 4px; -} - -.form-title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 22px; - color: inherit; - text-transform: uppercase; - padding-bottom: $pad-xxxxl; -} - -.form-content { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - -.form-label { - flex: 0 0 calc(50% - 13px); - padding-right: 48px; - - @include roboto-regular; - - font-size: 16px; - line-height: 26px; - color: inherit; -} - -.form-body { - flex: 0 0 calc(50% + 13px); -} - -.form-footer { - display: flex; - align-items: center; - justify-content: flex-start; - margin-left: calc(50% - 13px); - padding: $pad-sm 0; - gap: 8px 16px; - - .button { - @include roboto-bold; - - font-size: 14px; - line-height: 14px; - color: $color-turq-160; - min-height: 0; - margin: 0; - padding: 0; - background: transparent !important; - border: none; - cursor: pointer; - - &:hover, - &:active, - &:focus { - outline: none !important; - color: lighten($color-turq-160, 5%); - background: transparent !important; - box-shadow: none !important; - } - - .icon { - margin-right: $margin-xs; - } - } -} - -@include xs-to-md { - .work-container { - padding: $pad-xxl $pad-lg; - margin: $margin-xxl 0; - - .title { - @include barlow-condensed-medium; - - font-size: 27px; - line-height: 28px; - padding: 0 0 $pad-lg; - } - } - - .form-container { - padding: $pad-xxl $pad-lg; - } - - .form-title { - @include barlow-condensed-medium; - - font-size: 22px; - line-height: 24px; - padding-bottom: $pad-xxl; - } - - .form-label { - flex: 1 1 100%; - padding: 0; - margin-bottom: $margin-xxl; - font-size: 14px; - line-height: 20px; - } - - .form-body { - flex: 1 1 100%; - } - - .form-footer { - margin: 0; - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx deleted file mode 100755 index aefad8df48..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx +++ /dev/null @@ -1,242 +0,0 @@ -/** - * Child component of Settings/Profile/ renders the - * 'Basic Info' page. - */ - -import _ from 'lodash'; -import React from 'react'; -import PT from 'prop-types'; -import fetch from 'isomorphic-fetch'; -import { config } from 'topcoder-react-utils'; -import ConsentComponent from 'components/Settings/ConsentComponent'; -import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner'; -import { INTERESTS_AT_TOPCODER } from '../../../constants'; -import './styles.scss'; - -export default class Interests extends ConsentComponent { - constructor(props) { - super(props); - - this.save = this.save.bind(this); - this.processBasicInfo = this.processBasicInfo.bind(this); - this.loadInterests = this.loadInterests.bind(this); - this.updateInterest = this.updateInterest.bind(this); - - const { userTraits } = props; - this.state = { - allInterestData: INTERESTS_AT_TOPCODER, - interestData: [], - basicInfoTrait: this.loadBasicInfoTraits(userTraits), - profile: {}, - newBasicInfo: { - primaryInterestInTopcoder: '', - }, - }; - - this.previousInterestData = null; - } - - componentDidMount() { - const { basicInfoTrait } = this.state; - const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {}; - this.processBasicInfo(basicInfo, this.props.profile); - this.setState({ profile: this.props.profile }); - } - - componentWillReceiveProps(nextProps) { - const basicInfoTrait = this.loadBasicInfoTraits(nextProps.userTraits); - - const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {}; - const previousBasicInfoTrait = this.loadBasicInfoTraits(this.props.userTraits); - - if (!_.isEqual(basicInfoTrait, previousBasicInfoTrait)) { - this.processBasicInfo(basicInfo, nextProps.profile); - this.setState({ - basicInfoTrait, - }); - } - if (!_.isEqual(this.state.profile, nextProps.profile)) { - this.processBasicInfo(basicInfo, nextProps.profile); - this.setState({ profile: nextProps.profile }); - } - } - - async onCheckUserTrait(traitId) { - const { handle, tokenV3 } = this.props; - let isExists = false; - await fetch(`${config.API.V5}/members/${handle}/traits?traitIds=${traitId}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${tokenV3}`, - }, - }) - .then(result => result.json()) - .then((dataResponse) => { - if (dataResponse.length > 0) { - const trait = dataResponse[0]; - if (trait.createdAt) { - isExists = true; - } - } - }); - - return isExists; - } - - /** - * Show User Consent Modal - * @param {*} e event - */ - save() { - this.setState({ isSaving: true }); - this.showConsent(this.onSave.bind(this)); - } - - /** - * Save Basic Info - * @param answer user consent answer value - */ - async onSave(/* answer */) { - const { - newBasicInfo, basicInfoTrait, - } = this.state; - const { - handle, - tokenV3, - addUserTrait, - updateUserTrait, - } = this.props; - - // This is a hack to check if the user has an existing basic_info trait object - const exists = await this.onCheckUserTrait('basic_info'); - if (exists) { - const newBasicInfoTrait = { ...basicInfoTrait }; - newBasicInfoTrait.traits.data = []; - newBasicInfoTrait.traits.data.push(newBasicInfo); - await updateUserTrait(handle, 'basic_info', newBasicInfoTrait.traits.data, tokenV3); - } else { - const data = []; - data.push(newBasicInfo); - await addUserTrait(handle, 'basic_info', data, tokenV3); - } - - this.setState({ isSaving: false }); - this.previousInterestData = null; - } - - /** - * Get basic info trait - * @param userTraits the all user traits - */ - loadBasicInfoTraits = (userTraits) => { - const trait = userTraits.filter(t => t.traitId === 'basic_info'); - const basicInfo = trait.length === 0 ? {} : trait[trait.length - 1]; - return _.assign({}, basicInfo); - } - - - /** - * Process basic info state - */ - processBasicInfo = (value, profile) => { - const { newBasicInfo } = this.state; - if (_.has(profile, 'handle')) { - Object.keys(/* newBasicInfo */value).reduce((acc, key) => { - // if (_.has(value, key)) { - newBasicInfo[key] = value[key]; - // } - return acc; - }, {}); - } - this.setState({ newBasicInfo }, () => { - this.loadInterests(); - }); - } - - loadInterests() { - const { newBasicInfo: { primaryInterestInTopcoder }, allInterestData } = this.state; - - const isValid = i => allInterestData.indexOf(i) !== -1; - const isNotDeduplicated = (i, index, array) => array.indexOf(i) === index; - const compareByIndex = (a, b) => allInterestData.indexOf(a) - allInterestData.indexOf(b); - - const interestData = primaryInterestInTopcoder - .split(',') - .map(i => i.trim()) - .filter(isValid) - .filter(isNotDeduplicated) - .sort(compareByIndex); - - this.setState({ interestData }); - } - - updateInterest(item) { - const { interestData, newBasicInfo, allInterestData } = this.state; - - let updated; - if (interestData.indexOf(item) !== -1) { - updated = interestData.filter(i => i !== item); - } else { - updated = [...interestData, item].sort( - (a, b) => allInterestData.indexOf(a) - allInterestData.indexOf(b), - ); - } - - const primaryInterestInTopcoder = updated.join(','); - this.setState({ - interestData: updated, - newBasicInfo: { ...newBasicInfo, primaryInterestInTopcoder }, - }); - - this.previousInterestData = interestData; - } - - render() { - const { interestData, allInterestData } = this.state; - const canModifyTrait = !this.props.traitRequestCount; - const isSelected = item => interestData.indexOf(item) !== -1; - - return ( -
- -
- Interests at Topcoder -
-
-
- What do you want to do at Topcoder? Compete? Learn? Earn extra money? - Get a full time gig? There are no wrong answers. -
-
-
- { allInterestData.map(item => ( - canModifyTrait && this.updateInterest(item)} - tabIndex={0} - onKeyDown={() => {}} - > - {item} - - ))} -
-
-
- -
- ); - } -} - -Interests.propTypes = { - tokenV3: PT.string.isRequired, - handle: PT.string.isRequired, - profile: PT.shape().isRequired, - userTraits: PT.array.isRequired, - addUserTrait: PT.func.isRequired, - updateUserTrait: PT.func.isRequired, - traitRequestCount: PT.number.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss deleted file mode 100644 index c4ad4f45df..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss +++ /dev/null @@ -1,113 +0,0 @@ -@import "~styles/mixins"; - -.form-container { - padding: $pad-xxxxl; - margin: $margin-sm 0 0; - background-color: $color-tc-white; -} - -.form-title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 22px; - color: inherit; - text-transform: uppercase; - padding-bottom: $pad-xxxxl; -} - -.form-content { - display: flex; - flex-wrap: wrap; - padding: $pad-xxxxl 0 0; - border-top: 2px solid $color-black-10; -} - -.form-label { - flex: 0 0 calc(50% - 13px); - padding-right: 48px; - - @include roboto-regular; - - font-size: 16px; - line-height: 26px; - color: inherit; -} - -.form-body { - flex: 0 0 calc(50% + 13px); -} - -.form-footer { - // empty -} - -.interestList { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-items: flex-start; - gap: 16px 8px; - - .interestListItem { - @include roboto-medium; - - font-size: 14px; - line-height: 16px; - letter-spacing: 0.5px; - text-transform: capitalize; - padding: ($pad-sm - 1px) ($pad-lg - 1px); - border: 1px solid $color-black-100; - border-radius: 4px; - cursor: pointer; - white-space: nowrap; - - &.selected { - color: $color-tc-white; - background-color: $color-turq-160; - border-color: $color-turq-160; - } - } - - @include xs-to-md { - gap: 8px; - - .interestListItem { - padding: ($pad-xs - 1px) ($pad-lg - 1px); - } - } -} - -@include xs-to-md { - .form-container { - padding: $pad-xxl $pad-lg; - } - - .form-title { - @include barlow-condensed-medium; - - font-size: 22px; - line-height: 24px; - padding-bottom: $pad-xxl; - } - - .form-content { - padding: $pad-xxl 0 0; - } - - .form-label { - flex: 1 1 100%; - padding: 0; - margin-bottom: $margin-xxl; - font-size: 14px; - line-height: 20px; - } - - .form-body { - flex: 1 1 100%; - } - - .form-footer { - margin: 0; - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx deleted file mode 100644 index 1b6b24a867..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx +++ /dev/null @@ -1,138 +0,0 @@ -/** - * render language Item - */ -import _ from 'lodash'; -import React from 'react'; -import PT from 'prop-types'; -import { isomorphy } from 'topcoder-react-utils'; -import Tooltip from 'components/Tooltip'; - -import languageIcon from 'assets/images/profile/language.png'; - -import './styles.scss'; - -let assets; -if (isomorphy.isClientSide()) { - assets = require.context('assets/images/profile', false, /svg/); -} - -export default function Item(props) { - const { - language, - index, - onDeleteItem, - onEditItem, - } = props; - - const hasOptions = () => { - if (_.isEmpty(language.spokenLevel) && _.isEmpty(language.writtenLevel)) { - return false; - } - - return true; - }; - - const deleteTip = ( -
-

Delete

-
- ); - - const editTip = ( -
-

Edit

-
- ); - - return ( -
-
-
- language -
-
-
- { language.language } -
- { - (!_.isEmpty(language.spokenLevel) || !_.isEmpty(language.writtenLevel)) && ( -
- { - (!_.isEmpty(language.spokenLevel) && !_.isEmpty(language.writtenLevel)) && (`Spoken: ${language.spokenLevel.toUpperCase()} | Written: ${language.writtenLevel.toUpperCase()}`) - } - { - (!_.isEmpty(language.spokenLevel) && _.isEmpty(language.writtenLevel)) && (`Spoken: ${language.spokenLevel.toUpperCase()}`) - } - { - (_.isEmpty(language.spokenLevel) && !_.isEmpty(language.writtenLevel)) && (`Written: ${language.writtenLevel.toUpperCase()}`) - } -
- ) - } - { - (!_.isEmpty(language.spokenLevel) || !_.isEmpty(language.writtenLevel)) && ( -
- { - !_.isEmpty(language.spokenLevel) && ( -

- {`Spoken: ${language.spokenLevel.toUpperCase()}`} -

- ) - } - { - !_.isEmpty(language.writtenLevel) && ( -

- {`Written: ${language.writtenLevel.toUpperCase()}`} -

- ) - } -
- ) - } -
-
-
- - onEditItem(index)} - tabIndex={0} - role="button" - onClick={() => onEditItem(index)} - > - edit-icon - - -
- - onDeleteItem(index)} - tabIndex={0} - role="button" - onClick={() => onDeleteItem(index)} - > - delete-icon - - - -
-
-
- ); -} - -Item.propTypes = { - language: PT.shape().isRequired, - index: PT.number.isRequired, - onDeleteItem: PT.func.isRequired, - onEditItem: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss deleted file mode 100644 index 4744847f5e..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss +++ /dev/null @@ -1,211 +0,0 @@ -@import "../../../../../style"; - -.container { - display: flex; - flex-direction: row; - justify-items: center; - justify-content: space-between; - align-items: center; - min-height: 96px; - width: 100%; - border-bottom: none; - background-color: $tc-white; - padding: $pad-lg; - border: 1px solid $color-black-20; - border-radius: 8px; -} - -.language-info { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.language-icon { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 64px; - width: 64px; - height: 64px; - background: $color-black-5; - border-radius: 4px; - margin-right: $margin-lg; - - img { - width: 32px; - height: 32px; - } -} - -.language-parameters { - @include roboto-medium; - - display: flex; - flex-direction: column; - justify-items: center; - justify-content: left; - font-size: 15px; - line-height: 20px; - text-transform: capitalize; - margin-right: 20px; - - @include upto-sm { - margin-right: 0; - } - - &.single-line { - flex-direction: row; - align-items: center; - } -} - -.parameter-first-line { - @include roboto-bold; - - color: $tc-black; - font-weight: 700; - font-size: 16px; - line-height: 20px; - letter-spacing: 0.5px; - text-transform: capitalize; - word-break: break-all; - - &.single-line { - margin-bottom: 0; - } - - @include upto-sm { - margin-bottom: 0; - } -} - -.parameter-second-line, -.parameter-second-line-mobile { - @include roboto-medium; - - color: $color-black-60; - font-weight: 400; - font-size: 16px; - line-height: 24px; - word-break: break-all; - - @include upto-sm { - display: none; - } -} - -.parameter-second-line-mobile { - display: none; - - @include upto-sm { - display: flex; - flex-direction: column; - } -} - -.tctooltiptext { - background: $tooltip-gray; - color: $tc-white; - border-radius: 8px; - padding: 10px; - - p { - @include roboto-medium; - - font-weight: 400; - font-size: 14px; - line-height: 22px; - } -} - -.tctooltiptext::after { - content: ""; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - bottom: 4px; - margin-left: -5px; - border-width: 5px 5px 0; - left: 50%; - border-top-color: $tc-black; - z-index: 1000; -} - -.operation-container { - display: flex; - flex-direction: row; - justify-content: space-between; - - .delete-wrapper { - margin-left: $margin-xl; - margin-right: $margin-xs; - - @include xs-to-sm { - margin-left: $margin-lg; - margin-right: 0; - } - - @media screen and (max-width: 320px) { - margin-right: 0; - margin-left: 6px; - } - } - - .delete { - display: flex; - flex-direction: column; - justify-items: center; - justify-content: center; - cursor: pointer; - outline-style: none; - - img { - width: 20px; - height: 20px; - } - - p { - @include roboto-regular; - - font-size: 11px; - line-height: 15px; - font-weight: 400; - color: $tc-gray-50; - - @include upto-sm { - display: none; - } - } - } - - .edit { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - outline-style: none; - - img { - width: 20px; - height: 20px; - } - - p { - @include roboto-regular; - - font-size: 11px; - line-height: 15px; - font-weight: 400; - color: $tc-gray-50; - - @include upto-sm { - display: none; - } - } - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx deleted file mode 100644 index e9a2cc522a..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx +++ /dev/null @@ -1,41 +0,0 @@ -/** - * render Language list - */ -import React from 'react'; -import PT from 'prop-types'; -import Item from './Item'; - -import './styles.scss'; - -export default function LanguageList(props) { - const { - languageList, - onDeleteItem, - onEditItem, - } = props; - - return ( -
-
    - { - languageList.items.map((language, index) => ( -
  • - -
    • - )) - } -
-
- ); -} - -LanguageList.propTypes = { - languageList: PT.shape().isRequired, - onDeleteItem: PT.func.isRequired, - onEditItem: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss deleted file mode 100644 index e78e1de213..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../../../style"; - -.container { - width: 100%; - background-color: $tc-white; - padding: 0; - margin-bottom: $margin-xxxxl; - - // &.active { - // margin-top: 20px; - - // @include upto-sm { - // margin-top: 0; - // } - // } - - ul { - display: flex; - flex-direction: column; - justify-items: center; - - li { - margin-bottom: $margin-md; - } - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json deleted file mode 100644 index 98fbe6c398..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json +++ /dev/null @@ -1,782 +0,0 @@ -{ - "language": [ - { - "key": "language", - "name": "Afar" - }, - { - "key": "language", - "name": "Abkhazian" - }, - { - "key": "language", - "name": "Avestan" - }, - { - "key": "language", - "name": "Afrikaans" - }, - { - "key": "language", - "name": "Akan" - }, - { - "key": "language", - "name": "Amharic" - }, - { - "key": "language", - "name": "Aragonese" - }, - { - "key": "language", - "name": "Arabic" - }, - { - "key": "language", - "name": "Assamese" - }, - { - "key": "language", - "name": "Avaric" - }, - { - "key": "language", - "name": "Aymara" - }, - { - "key": "language", - "name": "Azerbaijani" - }, - { - "key": "language", - "name": "Bashkir" - }, - { - "key": "language", - "name": "Belarusian" - }, - { - "key": "language", - "name": "Bulgarian" - }, - { - "key": "language", - "name": "Bihari languages" - }, - { - "key": "language", - "name": "Bislama" - }, - { - "key": "language", - "name": "Bambara" - }, - { - "key": "language", - "name": "Bengali" - }, - { - "key": "language", - "name": "Tibetan" - }, - { - "key": "language", - "name": "Breton" - }, - { - "key": "language", - "name": "Bosnian" - }, - { - "key": "language", - "name": "Catalan; Valencian" - }, - { - "key": "language", - "name": "Chechen" - }, - { - "key": "language", - "name": "Chamorro" - }, - { - "key": "language", - "name": "Corsican" - }, - { - "key": "language", - "name": "Cree" - }, - { - "key": "language", - "name": "Czech" - }, - { - "key": "language", - "name": "Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic" - }, - { - "key": "language", - "name": "Chuvash" - }, - { - "key": "language", - "name": "Welsh" - }, - { - "key": "language", - "name": "Danish" - }, - { - "key": "language", - "name": "German" - }, - { - "key": "language", - "name": "Divehi; Dhivehi; Maldivian" - }, - { - "key": "language", - "name": "Dzongkha" - }, - { - "key": "language", - "name": "Ewe" - }, - { - "key": "language", - "name": "\"Greek", - "field3": "Modern (1453-)\"" - }, - { - "key": "language", - "name": "English" - }, - { - "key": "language", - "name": "Esperanto" - }, - { - "key": "language", - "name": "Spanish; Castilian" - }, - { - "key": "language", - "name": "Estonian" - }, - { - "key": "language", - "name": "Basque" - }, - { - "key": "language", - "name": "Persian" - }, - { - "key": "language", - "name": "Fulah" - }, - { - "key": "language", - "name": "Finnish" - }, - { - "key": "language", - "name": "Fijian" - }, - { - "key": "language", - "name": "Faroese" - }, - { - "key": "language", - "name": "French" - }, - { - "key": "language", - "name": "Western Frisian" - }, - { - "key": "language", - "name": "Irish" - }, - { - "key": "language", - "name": "Gaelic; Scottish Gaelic" - }, - { - "key": "language", - "name": "Galician" - }, - { - "key": "language", - "name": "Guarani" - }, - { - "key": "language", - "name": "Gujarati" - }, - { - "key": "language", - "name": "Manx" - }, - { - "key": "language", - "name": "Hausa" - }, - { - "key": "language", - "name": "Hebrew" - }, - { - "key": "language", - "name": "Hindi" - }, - { - "key": "language", - "name": "Hiri Motu" - }, - { - "key": "language", - "name": "Croatian" - }, - { - "key": "language", - "name": "Haitian; Haitian Creole" - }, - { - "key": "language", - "name": "Hungarian" - }, - { - "key": "language", - "name": "Armenian" - }, - { - "key": "language", - "name": "Herero" - }, - { - "key": "language", - "name": "Interlingua (International Auxiliary Language Association)" - }, - { - "key": "language", - "name": "Indonesian" - }, - { - "key": "language", - "name": "Interlingue; Occidental" - }, - { - "key": "language", - "name": "Igbo" - }, - { - "key": "language", - "name": "Sichuan Yi; Nuosu" - }, - { - "key": "language", - "name": "Inupiaq" - }, - { - "key": "language", - "name": "Ido" - }, - { - "key": "language", - "name": "Icelandic" - }, - { - "key": "language", - "name": "Italian" - }, - { - "key": "language", - "name": "Inuktitut" - }, - { - "key": "language", - "name": "Japanese" - }, - { - "key": "language", - "name": "Javanese" - }, - { - "key": "language", - "name": "Georgian" - }, - { - "key": "language", - "name": "Kongo" - }, - { - "key": "language", - "name": "Kikuyu; Gikuyu" - }, - { - "key": "language", - "name": "Kuanyama; Kwanyama" - }, - { - "key": "language", - "name": "Kazakh" - }, - { - "key": "language", - "name": "Kalaallisut; Greenlandic" - }, - { - "key": "language", - "name": "Central Khmer" - }, - { - "key": "language", - "name": "Kannada" - }, - { - "key": "language", - "name": "Korean" - }, - { - "key": "language", - "name": "Kanuri" - }, - { - "key": "language", - "name": "Kashmiri" - }, - { - "key": "language", - "name": "Kurdish" - }, - { - "key": "language", - "name": "Komi" - }, - { - "key": "language", - "name": "Cornish" - }, - { - "key": "language", - "name": "Kirghiz; Kyrgyz" - }, - { - "key": "language", - "name": "Latin" - }, - { - "key": "language", - "name": "Luxembourgish; Letzeburgesch" - }, - { - "key": "language", - "name": "Ganda" - }, - { - "key": "language", - "name": "Limburgan; Limburger; Limburgish" - }, - { - "key": "language", - "name": "Lingala" - }, - { - "key": "language", - "name": "Lao" - }, - { - "key": "language", - "name": "Lithuanian" - }, - { - "key": "language", - "name": "Luba-Katanga" - }, - { - "key": "language", - "name": "Latvian" - }, - { - "key": "language", - "name": "Malagasy" - }, - { - "key": "language", - "name": "Marshallese" - }, - { - "key": "language", - "name": "Maori" - }, - { - "key": "language", - "name": "Macedonian" - }, - { - "key": "language", - "name": "Malayalam" - }, - { - "key": "language", - "name": "Mongolian" - }, - { - "key": "language", - "name": "Marathi" - }, - { - "key": "language", - "name": "Malay" - }, - { - "key": "language", - "name": "Maltese" - }, - { - "key": "language", - "name": "Burmese" - }, - { - "key": "language", - "name": "Nauru" - }, - { - "key": "language", - "name": "\"Bokmål", - "field3": "Norwegian; Norwegian Bokmål\"" - }, - { - "key": "language", - "name": "\"Ndebele", - "field3": "North; North Ndebele\"" - }, - { - "key": "language", - "name": "Nepali" - }, - { - "key": "language", - "name": "Ndonga" - }, - { - "key": "language", - "name": "Dutch; Flemish" - }, - { - "key": "language", - "name": "\"Norwegian Nynorsk; Nynorsk", - "field3": "Norwegian\"" - }, - { - "key": "language", - "name": "Norwegian" - }, - { - "key": "language", - "name": "\"Ndebele", - "field3": "South; South Ndebele\"" - }, - { - "key": "language", - "name": "Navajo; Navaho" - }, - { - "key": "language", - "name": "Chichewa; Chewa; Nyanja" - }, - { - "key": "language", - "name": "Occitan (post 1500); Provençal" - }, - { - "key": "language", - "name": "Ojibwa" - }, - { - "key": "language", - "name": "Oromo" - }, - { - "key": "language", - "name": "Oriya" - }, - { - "key": "language", - "name": "Ossetian; Ossetic" - }, - { - "key": "language", - "name": "Panjabi; Punjabi" - }, - { - "key": "language", - "name": "Pali" - }, - { - "key": "language", - "name": "Polish" - }, - { - "key": "language", - "name": "Pushto; Pashto" - }, - { - "key": "language", - "name": "Portuguese" - }, - { - "key": "language", - "name": "Quechua" - }, - { - "key": "language", - "name": "Romansh" - }, - { - "key": "language", - "name": "Rundi" - }, - { - "key": "language", - "name": "Romanian; Moldavian; Moldovan" - }, - { - "key": "language", - "name": "Russian" - }, - { - "key": "language", - "name": "Kinyarwanda" - }, - { - "key": "language", - "name": "Sanskrit" - }, - { - "key": "language", - "name": "Sardinian" - }, - { - "key": "language", - "name": "Sindhi" - }, - { - "key": "language", - "name": "Northern Sami" - }, - { - "key": "language", - "name": "Sango" - }, - { - "key": "language", - "name": "Sinhala; Sinhalese" - }, - { - "key": "language", - "name": "Slovak" - }, - { - "key": "language", - "name": "Slovenian" - }, - { - "key": "language", - "name": "Samoan" - }, - { - "key": "language", - "name": "Shona" - }, - { - "key": "language", - "name": "Somali" - }, - { - "key": "language", - "name": "Albanian" - }, - { - "key": "language", - "name": "Serbian" - }, - { - "key": "language", - "name": "Swati" - }, - { - "key": "language", - "name": "\"Sotho", - "field3": "Southern\"" - }, - { - "key": "language", - "name": "Sundanese" - }, - { - "key": "language", - "name": "Swedish" - }, - { - "key": "language", - "name": "Swahili" - }, - { - "key": "language", - "name": "Tamil" - }, - { - "key": "language", - "name": "Telugu" - }, - { - "key": "language", - "name": "Tajik" - }, - { - "key": "language", - "name": "Thai" - }, - { - "key": "language", - "name": "Tigrinya" - }, - { - "key": "language", - "name": "Turkmen" - }, - { - "key": "language", - "name": "Tagalog" - }, - { - "key": "language", - "name": "Tswana" - }, - { - "key": "language", - "name": "Tonga (Tonga Islands)" - }, - { - "key": "language", - "name": "Turkish" - }, - { - "key": "language", - "name": "Tsonga" - }, - { - "key": "language", - "name": "Tatar" - }, - { - "key": "language", - "name": "Twi" - }, - { - "key": "language", - "name": "Tahitian" - }, - { - "key": "language", - "name": "Uighur; Uyghur" - }, - { - "key": "language", - "name": "Ukrainian" - }, - { - "key": "language", - "name": "Urdu" - }, - { - "key": "language", - "name": "Uzbek" - }, - { - "key": "language", - "name": "Venda" - }, - { - "key": "language", - "name": "Vietnamese" - }, - { - "key": "language", - "name": "Volapük" - }, - { - "key": "language", - "name": "Walloon" - }, - { - "key": "language", - "name": "Wolof" - }, - { - "key": "language", - "name": "Xhosa" - }, - { - "key": "language", - "name": "Yiddish" - }, - { - "key": "language", - "name": "Yoruba" - }, - { - "key": "language", - "name": "Zhuang; Chuang" - }, - { - "key": "language", - "name": "Chinese" - }, - { - "key": "language", - "name": "Zulu" - } - ], - "spokenLevel": [ - { - "key": "spokenLevel", - "name": "Basic" - }, - { - "key": "spokenLevel", - "name": "Intermediate" - }, - { - "key": "spokenLevel", - "name": "Advanced" - }, - { - "key": "spokenLevel", - "name": "Native" - } - ], - "writtenLevel": [ - { - "key": "writtenLevel", - "name": "Basic" - }, - { - "key": "writtenLevel", - "name": "Intermediate" - }, - { - "key": "writtenLevel", - "name": "Advanced" - }, - { - "key": "writtenLevel", - "name": "Native" - } - ] -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx deleted file mode 100644 index b7d47b7bc6..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx +++ /dev/null @@ -1,482 +0,0 @@ -/** - * Child component of Settings/Profile/ renders the - * 'Language' page. - */ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable no-nested-ternary */ -/* eslint-disable jsx-a11y/label-has-for */ -/* eslint-disable no-undef */ -/* eslint-disable react/jsx-boolean-value */ -import React from 'react'; -import PT from 'prop-types'; -import _ from 'lodash'; -import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit'; -import ConsentComponent from 'components/Settings/ConsentComponent'; -import ErrorMessage from 'components/Settings/ErrorMessage'; -import ConfirmationModal from 'components/Settings//ConfirmationModal'; -import FormField from 'components/Settings/FormField'; -import FormInputSelect from 'components/Settings/FormInputSelect'; -import AddItemIcon from 'assets/images/settings-add-item.svg'; -import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner'; -import LanguageList from './List'; -import dropdowns from './dropdowns.json'; - -import styles from './styles.scss'; - - -export default class Languages extends ConsentComponent { - constructor(props) { - super(props); - this.onHandleDeleteLanguage = this.onHandleDeleteLanguage.bind(this); - this.onDeleteLanguage = this.onDeleteLanguage.bind(this); - this.onEditLanguage = this.onEditLanguage.bind(this); - this.onUpdateSelect = this.onUpdateSelect.bind(this); - this.loadLanguageTrait = this.loadLanguageTrait.bind(this); - this.onHandleAddLanguage = this.onHandleAddLanguage.bind(this); - this.onAddLanguage = this.onAddLanguage.bind(this); - this.onUpdateInput = this.onUpdateInput.bind(this); - this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this); - this.onCancelEditStatus = this.onCancelEditStatus.bind(this); - - const { userTraits } = props; - this.state = { - formInvalid: false, - languageNameInvalid: false, - languageNameInvalidMsg: '', - languageTrait: this.loadLanguageTrait(userTraits), - personalizationTrait: this.loadPersonalizationTrait(userTraits), - newLanguage: { - language: '', - spokenLevel: '', - writtenLevel: '', - }, - isEdit: false, - indexNo: null, - showConfirmation: false, - isSubmit: false, - }; - } - - componentWillReceiveProps(nextProps) { - const languageTrait = this.loadLanguageTrait(nextProps.userTraits); - const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits); - this.setState({ - languageTrait, - personalizationTrait, - formInvalid: false, - languageNameInvalid: false, - languageNameInvalidMsg: '', - newLanguage: { - language: '', - spokenLevel: '', - writtenLevel: '', - }, - isSubmit: false, - }); - } - - /** - * Update input value - * @param e event - */ - onUpdateInput(e) { - const { newLanguage: oldLanguage } = this.state; - const newLanguage = { ...oldLanguage }; - newLanguage[e.target.name] = e.target.value.trim(); - this.setState({ newLanguage, isSubmit: false }); - } - - onHandleDeleteLanguage(indexNo) { - this.setState({ - showConfirmation: true, - indexNo, - }); - } - - /** - * Delete language by index - * @param indexNo the language index no - */ - onDeleteLanguage(indexNo) { - const { languageTrait } = this.state; - const newLanguageTrait = { ...languageTrait }; - newLanguageTrait.traits.data.splice(indexNo, 1); - this.setState({ - languageTrait: newLanguageTrait, - isEdit: false, - formInvalid: false, - languageNameInvalid: false, - languageNameInvalidMsg: '', - }); - - const { - handle, - tokenV3, - updateUserTrait, - deleteUserTrait, - } = this.props; - - if (newLanguageTrait.traits.data.length > 0) { - updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3); - } else { - deleteUserTrait(handle, 'languages', tokenV3); - } - this.setState({ - showConfirmation: false, - indexNo: null, - isSubmit: false, - }); - } - - /** - * Edit language by index - * @param indexNo the language index no - */ - onEditLanguage(indexNo) { - const { languageTrait } = this.state; - this.setState({ - newLanguage: { - language: languageTrait.traits.data[indexNo].language, - spokenLevel: _.isEmpty(languageTrait.traits.data[indexNo].spokenLevel) ? '' : languageTrait.traits.data[indexNo].spokenLevel, - writtenLevel: _.isEmpty(languageTrait.traits.data[indexNo].writtenLevel) ? '' : languageTrait.traits.data[indexNo].writtenLevel, - }, - isEdit: true, - indexNo, - formInvalid: false, - languageNameInvalid: false, - languageNameInvalidMsg: '', - isSubmit: false, - }); - } - - /** - * Check form fields value, - * Invalid value, can not save - */ - onCheckFormValue() { - const { - languageTrait, newLanguage, isEdit, indexNo, - } = this.state; - - let invalid = false; - let languageNameInvalid = false; - let languageNameInvalidMsg = ''; - - if (_.isEmpty(newLanguage.language.trim())) { - invalid = true; - languageNameInvalid = true; - languageNameInvalidMsg = 'Language cannot be empty'; - } - - if (isEdit) { - const result = _.filter(languageTrait.traits.data, (item, index) => ( - item.language.toLowerCase() === newLanguage.language.toLowerCase() && index !== indexNo - )); - - if (result && result.length > 0) { - invalid = true; - languageNameInvalid = true; - languageNameInvalidMsg = 'Language already added'; - } - } else if (!_.isEmpty(languageTrait)) { - const result = _.filter(languageTrait.traits.data, item => ( - item.language.toLowerCase() === newLanguage.language.toLowerCase() - )); - - if (result && result.length > 0) { - invalid = true; - languageNameInvalid = true; - languageNameInvalidMsg = 'Language already added'; - } - } - - this.setState({ - formInvalid: invalid, - languageNameInvalid, - languageNameInvalidMsg, - }); - return invalid; - } - - onHandleAddLanguage(e) { - if (e) e.preventDefault(); - this.setState({ isSubmit: true }); - if (this.onCheckFormValue()) { - return; - } - this.showConsent(this.onAddLanguage.bind(this)); - } - - /** - * Add new language - * @param e form submit event - * @param answer user consent answer value - */ - onAddLanguage(answer) { - const { - newLanguage, personalizationTrait, isEdit, indexNo, - } = this.state; - - const { - handle, - tokenV3, - updateUserTrait, - addUserTrait, - } = this.props; - const { languageTrait } = this.state; - const language = _.clone(newLanguage); - if (_.isEmpty(language.spokenLevel)) { - delete language.spokenLevel; - } - if (_.isEmpty(language.writtenLevel)) { - delete language.writtenLevel; - } - if (languageTrait.traits && languageTrait.traits.data.length > 0) { - const newLanguageTrait = _.cloneDeep(languageTrait); - - if (isEdit) { - newLanguageTrait.traits.data.splice(indexNo, 1, language); - } else { - newLanguageTrait.traits.data.push(language); - } - - updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3); - } else { - const newLanguages = []; - newLanguages.push(language); - addUserTrait(handle, 'languages', newLanguages, tokenV3); - } - const empty = { - language: '', - spokenLevel: '', - writtenLevel: '', - }; - this.setState({ - newLanguage: empty, - isEdit: false, - indexNo: null, - isSubmit: false, - }); - // save personalization - if (_.isEmpty(personalizationTrait)) { - const personalizationData = { userConsent: answer }; - addUserTrait(handle, 'personalization', [personalizationData], tokenV3); - } else { - const trait = personalizationTrait.traits.data[0]; - if (trait.userConsent !== answer) { - const personalizationData = { userConsent: answer }; - updateUserTrait(handle, 'personalization', [personalizationData], tokenV3); - } - } - } - - /** - * Update select value - * @param option selected value - */ - onUpdateSelect(option) { - if (option) { - const { newLanguage: oldLanguage } = this.state; - const newLanguage = { ...oldLanguage }; - newLanguage[option.key] = option.name; - this.setState({ newLanguage, isSubmit: false }); - } - } - - onCancelEditStatus() { - const { isEdit } = this.state; - if (isEdit) { - this.setState({ - isEdit: false, - indexNo: null, - isSubmit: false, - formInvalid: false, - languageNameInvalid: false, - languageNameInvalidMsg: '', - newLanguage: { - language: '', - spokenLevel: '', - writtenLevel: '', - }, - }); - } - } - - /** - * Get language trait - * @param userTraits the all user traits - */ - loadLanguageTrait = (userTraits) => { - const trait = userTraits.filter(t => t.traitId === 'languages'); - const languages = trait.length === 0 ? {} : trait[0]; - return _.assign({}, languages); - } - - /** - * Get personalization trait - * @param userTraits the all user traits - */ - loadPersonalizationTrait = (userTraits) => { - const trait = userTraits.filter(t => t.traitId === 'personalization'); - const personalization = trait.length === 0 ? {} : trait[0]; - return _.assign({}, personalization); - }; - - render() { - const { - languageTrait, - isEdit, - formInvalid, - showConfirmation, - indexNo, - languageNameInvalid, - languageNameInvalidMsg, - isSubmit, - } = this.state; - const languageItems = languageTrait.traits - ? languageTrait.traits.data.slice() : []; - const { newLanguage } = this.state; - - return ( - - { - this.shouldRenderConsent() && this.renderConsent() - } - { - showConfirmation && ( - this.showConsent(this.onDeleteLanguage.bind(this, indexNo))} - onCancel={() => this.setState({ - showConfirmation: false, - indexNo: null, - })} - name={languageTrait.traits.data[indexNo].language} - /> - ) - } -
- -

- Spoken Languages -

- { - languageItems.length > 0 - && ( - - ) - } -
-
- Let customers know the langagues you speak. - Multilingual? Magnifique. -
-
-
- - - {isSubmit && formInvalid && ( - - ) - } - - - - { - if (option) { - this.onUpdateSelect(option); - } else { - this.onUpdateSelect({ key: 'spokenLevel', name: '' }); - } - }} - placeholder="Level" - labelKey="name" - valueKey="name" - clearable={false} - /> - - - - { - if (option) { - this.onUpdateSelect(option); - } else { - this.onUpdateSelect({ key: 'writtenLevel', name: '' }); - } - }} - placeholder="Level" - labelKey="name" - valueKey="name" - clearable={false} - /> - -
-
-
- {!isEdit && ( - - Add language to your list - - )} - - {isEdit && ( - - - Edit language to your list - - - Cancel - - - )} -
-
- -
- - ); - } -} - -Languages.propTypes = { - tokenV3: PT.string.isRequired, - handle: PT.string.isRequired, - userTraits: PT.array.isRequired, - addUserTrait: PT.func.isRequired, - updateUserTrait: PT.func.isRequired, - deleteUserTrait: PT.func.isRequired, - // settingsUI: PT.shape().isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss deleted file mode 100644 index b60b935439..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss +++ /dev/null @@ -1,109 +0,0 @@ -@import "~styles/mixins"; - -.form-container { - padding: $pad-xxxxl; - background-color: $color-tc-white; - border-radius: 4px; - - .language-form { - display: flex; - flex-wrap: wrap; - } -} - -.form-title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 22px; - color: inherit; - text-transform: uppercase; - padding-bottom: $pad-xxxxl; -} - -.form-content { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - -.form-label { - flex: 0 0 calc(50% - 13px); - padding-right: 230px; - - @include roboto-regular; - - font-size: 16px; - line-height: 26px; - color: inherit; -} - -.form-body { - flex: 0 0 calc(50% + 13px); -} - -.form-footer { - display: flex; - align-items: center; - justify-content: flex-start; - margin-left: calc(50% - 13px); - padding: $pad-sm 0; - gap: 8px 16px; - - .button { - @include roboto-bold; - - font-size: 14px; - line-height: 14px; - color: $color-turq-160; - min-height: 0; - margin: 0; - padding: 0; - background: transparent !important; - border: none; - cursor: pointer; - - &:hover, - &:active, - &:focus { - outline: none !important; - color: lighten($color-turq-160, 5%); - background: transparent !important; - box-shadow: none !important; - } - - .icon { - margin-right: $margin-xs; - } - } -} - -@include xs-to-md { - .form-container { - padding: $pad-xxl $pad-lg; - } - - .form-title { - @include barlow-condensed-medium; - - font-size: 22px; - line-height: 24px; - padding-bottom: $pad-xxl; - } - - .form-label { - flex: 1 1 100%; - padding: 0; - margin-bottom: $margin-xxl; - font-size: 14px; - line-height: 20px; - } - - .form-body { - flex: 1 1 100%; - } - - .form-footer { - margin: 0; - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx deleted file mode 100755 index 67d192c4fb..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react'; -import PT from 'prop-types'; -import _ from 'lodash'; -import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit'; -import FormField from 'components/Settings/FormField'; -import FormInputSelect from 'components/Settings/FormInputSelect'; -import IconClose from 'assets/images/icon-close.svg'; -import RemoveTagIcon from 'assets/images/icon-x-cancel.svg'; -import styles from './styles.scss'; - -export default function AddSkillsModal({ - disabled, - editingSkills, - lookupSkills, - userSkills, - onClose, - onSave, - setEditingSkills, -}) { - const [tempStr, setTempStr] = React.useState(''); - const [displayingSkills, setDisplayingSkills] = React.useState([]); - - // onInit - React.useEffect(() => { - setEditingSkills([...userSkills]); - setDisplayingSkills([...userSkills]); - }, [userSkills]); - - const findSkill = (arr, skill) => arr && arr.find(a => a.id === skill.id); - - const handleSkillSelect = (skill) => { - setEditingSkills([...editingSkills, skill]); - }; - const handleSkillUnselect = (skill) => { - setEditingSkills(editingSkills.filter(i => i.id !== skill.id)); - }; - const toggleSkillSelection = (skill) => { - if (findSkill(editingSkills, skill)) { - handleSkillUnselect(skill); - } else { - handleSkillSelect(skill); - } - }; - const updateDisplayingSkills = (skill) => { - if (!findSkill(displayingSkills, skill)) { - setDisplayingSkills([...displayingSkills, skill]); - } - }; - - const allDisplayingSkills = displayingSkills; - - const lookupSkillsOptions = lookupSkills - .filter(skill => !findSkill(allDisplayingSkills, skill)) - .sort((a, b) => { - if (a.name.toLowerCase() < b.name.toLowerCase()) return -1; - if (a.name.toLowerCase() > b.name.toLowerCase()) return 1; - return 0; - }); - - const skillList = allDisplayingSkills.map((skill) => { - const selected = findSkill(editingSkills, skill); - return ( -
  • - !selected && toggleSkillSelection(skill)} - tabIndex={0} - onKeyDown={() => { }} - > - {_.truncate(skill.name, { length: 18, separator: ' ' })} - - selected && toggleSkillSelection(skill)} - styleName="close" - tabIndex={0} - onKeyDown={() => { }} - > - - -
    • - ); - }); - - return ( - -
    -
    -

    - Add Skills - - - -

    -
    -

    Select Skills

    - - - { - handleSkillSelect(skill); - setTempStr(skill.name); - updateDisplayingSkills(skill); - }} - matchPos="any" - matchProp="name" - labelKey="name" - valueKey="name" - placeholder="Add new skill" - clearable={false} - disabled={disabled} - value={tempStr} - /> - - -
      - {skillList} -
    -
    -
    - - Save - -
    -
    -
    -     - ); -} - -AddSkillsModal.propTypes = { - disabled: PT.bool.isRequired, - editingSkills: PT.arrayOf(PT.shape()).isRequired, - lookupSkills: PT.arrayOf(PT.shape()).isRequired, - userSkills: PT.arrayOf(PT.shape()).isRequired, - onClose: PT.func.isRequired, - onSave: PT.func.isRequired, - setEditingSkills: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss deleted file mode 100755 index b48467e069..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss +++ /dev/null @@ -1,270 +0,0 @@ -@import "~styles/mixins"; - -.modal-overlay { - background-color: rgba($color-tc-black, 0.85); -} - -.modal { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - width: 100%; - height: 100%; - max-width: none; - max-height: none; - border-radius: 8px; - overflow-y: auto; - background: none; - top: 0; - left: 0; - transform: none; - - .close { - padding: 0; - margin: 0 0 0 auto; - min-height: 0; - } -} - -.modal-dialog { - flex: 0 0 auto; - display: flex; - flex-direction: column; - margin: auto; -} - -.modal-content { - flex: auto; - display: flex; - flex-direction: column; - color: $color-black-100; - max-width: 794px; - background-color: $color-tc-white; - border-radius: 8px; - box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); - margin: 32px; - width: calc(100% - 64px); - min-height: 700px; - min-width: 40vw; -} - -.modal-header { - @include barlow-condensed-medium; - - font-size: 34px; - line-height: 32px; - text-transform: uppercase; - display: flex; - align-items: center; - padding: $pad-xxxl $pad-xxxxl $pad-xxxxl; - border-radius: 8px 8px 0 0; -} - -.modal-body { - flex: auto; - display: flex; - padding: 0 $pad-xxxxl; - flex-direction: column; -} - -.modal-footer { - display: flex; - flex-direction: row-reverse; - align-items: flex-end; - padding: $pad-xxxxl 0; - margin: $margin-xxxl $margin-xxxxl 0; - border-top: 2px solid $color-black-10; - border-radius: 0 0 8px 8px; - - @include xs-to-md { - padding: $pad-lg; - margin: 0 $margin-lg 0; - } -} - -@include xs-to-md { - .modal { - padding: 0; - overflow-y: auto; - height: 100%; - max-height: 100%; - border: none; - box-shadow: none; - border-radius: 0; - z-index: 999999; - } - - .modal-content { - min-height: 568px; - } - - .modal-header { - @include barlow-semi-bold; - - font-size: 16px; - line-height: 20px; - padding: $pad-lg; - border-radius: 0; - } - - .modal-body { - padding: 0 $pad-lg; - flex-direction: column; - } - - .modal-footer { - padding: $pad-lg; - margin: 0 $margin-lg 0; - border-radius: 0; - } -} - -@include xs-to-sm { - .modal-content { - width: 100%; - margin: 0; - border-radius: 0; - } -} - -.tabs { - border-right: 2px solid $color-black-10; - - li { - @include roboto-regular; - - font-weight: 500; - font-size: 16px; - line-height: 20px; - letter-spacing: 0.5px; - color: $color-black-80; - padding: $pad-sm $pad-xxxxl $pad-sm 0; - margin-top: -$margin-sm; - white-space: nowrap; - cursor: pointer; - - &.active, - &:hover { - color: $color-turq-160; - } - } -} - -.tabContent { - flex: 0 0 auto; - padding-left: $pad-xxxxl; - width: calc(100% - 134px); - - .title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 20px; - color: inherit; - margin-bottom: $margin-xxl; - } -} - -@include xs-to-md { - .tabs { - border: none; - } - - .tabContent { - flex: 1 1 auto; - display: flex; - flex-direction: column; - width: 100%; - padding: $pad-lg 0 0; - margin: $margin-sm 0 0; - border-top: 2px solid $color-black-10; - - .title { - font-size: 16px; - line-height: 20px; - margin-bottom: margin-lg; - } - } -} - -.skillList { - display: flex; - flex-wrap: wrap; - align-content: flex-start; - gap: 8px 4px; - min-height: 152px; - - @include xs-to-md { - flex: 1 1 auto; - height: calc(100vh - 450px); - overflow-y: auto; - } - - @include xs-to-sm { - height: calc(100vh - 386px); - } -} - -.skillListItem { - @include roboto-regular; - - font-weight: 500; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.5px; - color: $color-tc-white; - text-transform: capitalize; - white-space: nowrap; - display: flex; - align-items: center; - gap: 4px; - padding: $pad-xs $pad-sm; - background-color: $color-teal-140; - border: 1px solid $color-teal-140; - border-radius: 4px; - cursor: default; - - .close { - cursor: pointer; - - svg { - display: block; - } - } - - &.non-removable { - color: $color-black-100; - background-color: $color-tc-white; - - .close { - display: none; - } - - &.selected { - color: $color-tc-white; - background-color: $color-teal-140; - - .close { - display: block; - } - } - } -} - -.button-save { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 24px; - border-radius: 50px !important; - background: $color-turq-160 !important; - color: $color-tc-white !important; - text-transform: uppercase; - - @include xs-to-md { - font-size: 14px; - line-height: 20px; - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx deleted file mode 100755 index a08ae7644e..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx +++ /dev/null @@ -1,444 +0,0 @@ -/* eslint-disable max-len */ -/** - * Child component of Settings/Profile renders "Skills" section of profile setting page. - */ - -import _ from 'lodash'; -import React from 'react'; -import PT from 'prop-types'; -import { PrimaryButton } from 'topcoder-react-ui-kit'; -import ConsentComponent from 'components/Settings/ConsentComponent'; - -import VerifiedBadgeIcon from 'assets/images/verified-skill-badge-green.svg'; -import ConfirmationModal from 'components/Settings/ConfirmationModal'; -import AddItemIcon from 'assets/images/settings-add-item.svg'; -import RemoveTagIcon from 'assets/images/icon-x-cancel.svg'; -import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner'; -import { MIN_SKILLS_TO_REMIND } from 'containers/Gamification'; -import YouGotSkillsBadge from 'components/Gamification/YouGotSkillsModal/YouGotSkillsBadge'; - -import AddSkillsModal from './AddSkillsModal'; -import styles from './styles.scss'; - -export default class Skills extends ConsentComponent { - constructor(props) { - super(props); - this.onHandleAddSkill = this.onHandleAddSkill.bind(this); - this.onHandleDeleteSkills = this.onHandleDeleteSkills.bind(this); - this.onAddSkill = this.onAddSkill.bind(this); - this.toggleSkill = this.toggleSkill.bind(this); - this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this); - this.lastValidInputPosition = 0; - this.setEditingSkills = this.setEditingSkills.bind(this); - this.onModalClose = this.onModalClose.bind(this); - this.onModalSave = this.onModalSave.bind(this); - - const { userTraits } = props; - this.state = { - personalizationTrait: this.loadPersonalizationTrait(userTraits), - userSkills: [], - editingSkills: [], - newSkill: { - design: [], - develop: [], - data_science: [], - qa: [], - }, - skillsToDelete: null, - showConfirmation: false, - showAddSkillsModal: null, - }; - } - - componentWillMount() { - this.processUserSkills(this.props); - } - - componentDidUpdate() { - this.removeHover(); - } - - componentWillReceiveProps(nextProps) { - const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits); - this.setState({ - personalizationTrait, - userSkills: [], - editingSkills: [], - newSkill: { - design: [], - develop: [], - data_science: [], - qa: [], - }, - }); - - this.processUserSkills(nextProps); - } - - /** - * Show User Consent Modal - * @param e event - */ - onHandleAddSkill(selectedSkill) { - this.showConsent(this.onAddSkill.bind(this, selectedSkill)); - } - - setEditingSkills(updatedEdittingSkills) { - this.setState({ - editingSkills: updatedEdittingSkills, - }); - } - - /** - * Add new skill - * @param answer user consent answer value - */ - onAddSkill(selectedSkill, answer) { - const { newSkill, personalizationTrait } = this.state; - const { - handle, - tokenV3, - addUserSkill, - addUserTrait, - updateUserTrait, - } = this.props; - - let category = ''; - switch (selectedSkill.categories[0]) { - case 'develop': - category = 'develop'; - break; - case 'data_science': - category = 'data_science'; - break; - case 'design': - category = 'design'; - break; - case 'qa': - category = 'qa'; - break; - default: - category = 'design'; - break; - } - - const index = _.findIndex(newSkill[category], skill => ( - skill.name.toLowerCase() === selectedSkill.name.toLowerCase() - )); - - if (index > -1) { - return; - } - - newSkill[category].push(selectedSkill); - addUserSkill(handle, selectedSkill, tokenV3); - // save personalization - if (_.isEmpty(personalizationTrait)) { - const personalizationData = { userConsent: answer }; - addUserTrait(handle, 'personalization', [personalizationData], tokenV3); - } else { - const trait = personalizationTrait.traits.data[0]; - if (trait.userConsent !== answer) { - const personalizationData = { userConsent: answer }; - updateUserTrait(handle, 'personalization', [personalizationData], tokenV3); - } - } - } - - onHandleDeleteSkills(skill) { - const skillsToDelete = Array.isArray(skill) ? skill : [skill]; - this.setState({ - showConfirmation: true, - skillsToDelete, - }); - } - - /** - * Get personalization trait - * @param userTraits the all user traits - */ - loadPersonalizationTrait = (userTraits) => { - const trait = userTraits.filter(t => t.traitId === 'personalization'); - const personalization = trait.length === 0 ? {} : trait[0]; - return _.assign({}, personalization); - } - - /** - * Process user skills - */ - processUserSkills = (props) => { - const { lookupData, skills } = props; - - // All lookup skills - const lookupSkills = lookupData.skillTags || []; - - // Construct user skills - const filterUserSkills = []; - - const arraySkill = _.map(skills, (skill, tagId) => ({ tagId: Number(tagId), ...skill })); - const design = []; - const develop = []; - const dataScience = []; - const qa = []; - if (arraySkill.length > 0) { - for (let i = 0; i < arraySkill.length; i += 1) { - const result = _.filter(lookupSkills, skill => ( - skill.id === arraySkill[i].tagId - )); - if (result && result.length > 0) { - result[0].sources = arraySkill[i].sources; - filterUserSkills.push(result[0]); - if (_.some(result[0].categories, category => category.toLowerCase() === 'design')) { - design.push(result[0]); - } - if (_.some(result[0].categories, category => category.toLowerCase() === 'develop')) { - develop.push(result[0]); - } - if (_.some(result[0].categories, category => category.toLowerCase() === 'data_science')) { - dataScience.push(result[0]); - } - if (_.some(result[0].categories, category => category.toLowerCase() === 'qa')) { - qa.push(result[0]); - } - } - } - - const { newSkill } = this.state; - newSkill.design = design.length > 0 ? design.slice() : []; - newSkill.develop = develop.length > 0 ? develop.slice() : []; - newSkill.data_science = dataScience.length > 0 ? dataScience.slice() : []; - newSkill.qa = qa.length > 0 ? qa.slice() : []; - - this.setState({ newSkill, userSkills: filterUserSkills }); - } - } - - removeHover = () => { - setTimeout(() => { - const btn = document.querySelector('a:hover'); - if (btn) { - const par = btn.parentNode; - const next = btn.nextSibling; - par.removeChild(btn); - setTimeout(() => { par.insertBefore(btn, next); }, 0); - } - }, 100); - } - - /** - * Toggle Skill to delete selected skill - */ - toggleSkill = (skillsToDelete/* , consentAnswer */) => { - const { newSkill } = this.state; - const { - handle, - tokenV3, - deleteUserSkill, - } = this.props; - - skillsToDelete.forEach((skill) => { - let category = ''; - switch (skill.categories[0]) { - case 'develop': - category = 'develop'; - break; - case 'data_science': - category = 'data_science'; - break; - case 'design': - category = 'design'; - break; - case 'qa': - category = 'qa'; - break; - default: - category = 'design'; - break; - } - const result = _.remove(newSkill[category], item => ( - item.name.toLowerCase() !== skill.name.toLowerCase() - )); - newSkill[category] = result.length > 0 ? result.slice() : []; - deleteUserSkill(handle, skill, tokenV3); - }); - - this.setState({ - skillsToDelete: null, - showConfirmation: false, - }); - }; - - onModalClose() { - this.setState({ showAddSkillsModal: null }); - } - - onModalSave() { - this.onModalClose(); - - const { userSkills, editingSkills } = this.state; - - const diffAdd = (target, source) => target.filter(t => !source.find(s => s.id === t.id)); - const diffRemove = (target, source) => source.filter(s => !target.find(t => t.id === s.id)); - - const toAdd = diffAdd(editingSkills, userSkills); - const toRemove = diffRemove(editingSkills, userSkills); - - toAdd.forEach(skill => this.onAddSkill(skill)); - if (toRemove.length) { - this.onHandleDeleteSkills(toRemove); - } - } - - render() { - const { - lookupData, - } = this.props; - - const { - userSkills, - showConfirmation, - skillsToDelete, - editingSkills, - showAddSkillsModal, - } = this.state; - - const canModifyTrait = !this.props.traitRequestCount; - // All lookup skills - const allSkills = lookupData.skillTags ? lookupData.skillTags : []; - let list = userSkills; - list = _.orderBy(list, [skill => skill.name.toLowerCase()], ['asc']); // Use Lodash to sort array by 'name' - - // // filter out already added skills - const lookupSkills = _.sortBy( - _.filter(allSkills, skill => _.findIndex(userSkills, l => l.id === skill.id) === -1), - s => s.name, - ); - - const skillList = ( - - ); - - return ( - - { - this.shouldRenderConsent() && this.renderConsent() - } - { - showConfirmation && ( - this.showConsent(this.toggleSkill - .bind(this, skillsToDelete))} - onCancel={() => this.setState({ - showConfirmation: false, - skillsToDelete: null, - })} - name={skillsToDelete.map(s => s.name).join(', ')} - /> - ) - } - {showAddSkillsModal && ( - - )} - -
    - -
    = MIN_SKILLS_TO_REMIND ? 'center' : 'flex-start' }}> -

    Skills

    - { - userSkills.length >= MIN_SKILLS_TO_REMIND && - } -
    - -
    -
    - Add skills to your profile. You can add or update your skills any time. -
    - -
    - { - userSkills.length < MIN_SKILLS_TO_REMIND && ( -
    - - - -

    To be able to match you with the best opportunities at Topcoder, please be sure you have at least {MIN_SKILLS_TO_REMIND} skills listed in your profile.

    -
    - ) - } - {skillList} -
    - -
    - this.setState({ showAddSkillsModal: 'design' })} - disabled={!canModifyTrait} - theme={{ button: styles['button-add'] }} - > - Add Skills - -
    -
    -     -
    -     - ); - } -} - -Skills.defaultProps = { - skills: {}, -}; - -Skills.propTypes = { - handle: PT.string.isRequired, - tokenV3: PT.string.isRequired, - lookupData: PT.shape().isRequired, - addUserSkill: PT.func.isRequired, - deleteUserSkill: PT.func.isRequired, - /* eslint-disable react/no-unused-prop-types */ - skills: PT.shape(), - userTraits: PT.array.isRequired, - traitRequestCount: PT.number.isRequired, - updateUserTrait: PT.func.isRequired, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss deleted file mode 100644 index afd9ae5234..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss +++ /dev/null @@ -1,218 +0,0 @@ -/* stylelint-disable no-descending-specificity */ -@import "~styles/mixins"; - -.skillList { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-items: flex-start; - gap: 8px 4px; - margin-bottom: $margin-lg; -} - -.skillListItem { - @include roboto-medium; - - font-size: 14px; - line-height: 16px; - letter-spacing: 0.5px; - color: $color-tc-white; - text-transform: capitalize; - white-space: nowrap; - display: flex; - align-items: center; - gap: 4px; - padding: ($pad-xs - 1px) ($pad-sm - 1px); - background-color: $color-teal-140; - border: 1px solid $color-teal-140; - border-radius: 4px; - cursor: default; - - .close { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - - svg { - width: 16px; - height: 16px; - display: block; - } - } - - .verified-badge { - margin-right: $margin-xs; - } -} - -.form-container { - padding: $pad-xxxxl; - margin: $margin-sm 0; - background-color: $color-tc-white; -} - -.title-wrap { - display: flex; - padding-bottom: 12px; - - p { - @include roboto-regular; - - line-height: 26px; - } -} - -.form-title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 22px; - color: inherit; - text-transform: uppercase; - margin-right: 32px; -} - -.form-content { - display: flex; - flex-wrap: wrap; - padding: $pad-xxxxl 0 0; - border-top: 2px solid $color-black-10; -} - -.form-label { - flex: 0 0 calc(50% - 13px); - padding-right: 48px; - - @include roboto-regular; - - font-size: 16px; - line-height: 26px; - color: inherit; -} - -.form-body { - flex: 0 0 calc(50% + 13px); - display: flex; - flex-direction: column; -} - -.form-footer { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - align-items: center; - margin-left: calc(50% - 13px); - padding: $pad-sm 0; - gap: $margin-sm 40px; - - .button-add { - @include roboto-bold; - - font-size: 14px; - line-height: 14px; - color: $color-turq-160; - min-height: 0; - margin: 0; - padding: 0; - background: transparent !important; - border: none; - cursor: pointer; - - &:hover, - &:active, - &:focus { - outline: none !important; - color: lighten($color-turq-160, 5%); - background: transparent !important; - box-shadow: none !important; - } - - .icon { - margin-right: $margin-xs; - } - } -} - -.skill-note { - display: flex; - background-color: $color-black-5; - padding: $pad-md $pad-lg; - border-radius: 4px; - margin-bottom: $pad-lg; - - svg { - margin-right: $margin-md; - min-width: 24px; - } - - p, - span { - @include roboto-medium; - - line-height: 24px; - } - - span { - color: $color-turq-160; - } -} - -@include xs-to-md { - .form-container { - padding: $pad-xxl $pad-lg; - } - - .title-wrap { - p { - font-size: 14px; - line-height: 24px; - } - } - - .form-title { - @include barlow-condensed-medium; - - font-size: 22px; - line-height: 24px; - } - - .form-content { - padding: $pad-xxl 0 0; - } - - .form-label { - flex: 1 1 100%; - padding: 0; - margin-bottom: $margin-xxl; - font-size: 14px; - line-height: 20px; - } - - .form-body { - flex: 1 1 100%; - } - - .form-footer { - padding: 0; - margin: 0; - gap: 0; - display: flex; - flex-direction: column; - align-items: flex-start; - - .button-add { - padding: $pad-sm 0; - } - } -} - -@include xs-to-sm { - .skill-note { - flex-direction: column; - - svg { - margin-bottom: $margin-md; - } - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx deleted file mode 100644 index f5caa0b13e..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import Interests from './Interests'; -import Languages from './Languages'; -import Skills from './Skills'; - -import './styles.scss'; - -export default class WorkSkills extends React.Component { - constructor(props) { - super(props); - this.interestsRef = React.createRef(); - this.languagesRef = React.createRef(); - this.skillsRef = React.createRef(); - } - - render() { - return ( -
    -

    About You

    - - - -
    - ); - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss deleted file mode 100644 index 04e4ac42ef..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import "~styles/mixins"; - -.workSkills { - padding: $pad-xxxxl; - margin: $margin-xxxxl 0; - background-color: $color-black-5; - border-radius: 8px; - - .title { - @include barlow-semi-bold; - - font-size: 20px; - line-height: 22px; - color: inherit; - padding-bottom: 40px; - text-transform: uppercase; - } -} - -@include xs-to-md { - .workSkills { - padding: $pad-xxl $pad-lg; - margin: $margin-xxl 0; - - .title { - @include barlow-condensed-medium; - - font-size: 27px; - line-height: 28px; - padding: 0 0 $pad-lg; - } - } -} diff --git a/src/shared/components/Settings/ExperienceAndSkills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/index.jsx deleted file mode 100644 index 461ca66cff..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/index.jsx +++ /dev/null @@ -1,121 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import React from 'react'; -import PT from 'prop-types'; -import _ from 'lodash'; -import { PrimaryButton } from 'topcoder-react-ui-kit'; -import WorkExperience from './WorkExperience'; -import WorkSkills from './WorkSkills'; -import ErrorWrapper from '../ErrorWrapper'; - -import styles from './styles.scss'; - -export default class ExperienceAndSkills extends React.Component { - constructor(props) { - super(props); - this.save = this.save.bind(this); - this.workExperienceRef = React.createRef(); - this.workSkillsRef = React.createRef(); - } - - componentWillReceiveProps(nextProps) { - const { isSaving, setIsSaving } = this.props; - if (isSaving && nextProps.userTraits) { - setIsSaving(false); - } - } - - save() { - const { isSaving, setIsSaving } = this.props; - if (isSaving) { - return; - } - - const newWork = this.workExperienceRef.current.state.newWork; - const newWorkDirty = newWork.company !== '' - || newWork.position !== '' - || newWork.cityTown !== '' - || newWork.timePeriodFrom !== '' - || newWork.timePeriodTo !== '' - || newWork.industry !== '' - || newWork.working; - - const newLanguage = this.workSkillsRef.current.languagesRef.current.state.newLanguage; - const newLanguageDirty = newLanguage.language !== '' - || newLanguage.spokenLevel !== '' - || newLanguage.writtenLevel !== ''; - - const interestData = this.workSkillsRef.current.interestsRef.current.state.interestData; - const previousInterestData = this.workSkillsRef.current.interestsRef.current - .previousInterestData; - const interestDataDirty = previousInterestData - && !_.isEqual(interestData, previousInterestData); - - let valid = true; - let dirty; - - if (newWorkDirty) { - valid = valid && !this.workExperienceRef.current.onCheckFormValue(newWork); - dirty = true; - } - - if (newLanguageDirty) { - valid = valid && !this.workSkillsRef.current.languagesRef.current - .onCheckFormValue(newLanguage); - dirty = true; - } - - if (interestDataDirty) { - valid = valid && true; - dirty = true; - } - - if (newWorkDirty) this.workExperienceRef.current.onHandleAddWork(); - if (newLanguageDirty) this.workSkillsRef.current.languagesRef.current.onHandleAddLanguage(); - if (interestDataDirty && valid) this.workSkillsRef.current.interestsRef.current.save(); - - if (dirty && valid) setIsSaving(true); - } - - render() { - const { isSaving } = this.props; - - const saveBtn = ( - - Save Changes - - ); - - return ( - -
    - - -
    {saveBtn}
    -
    -     - ); - } -} - -ExperienceAndSkills.defaultProps = { - isSaving: false, - setIsSaving: () => { }, -}; - -ExperienceAndSkills.propTypes = { - userTraits: PT.array.isRequired, - isSaving: PT.bool, - setIsSaving: PT.func, -}; diff --git a/src/shared/components/Settings/ExperienceAndSkills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/styles.scss deleted file mode 100644 index aaa5000547..0000000000 --- a/src/shared/components/Settings/ExperienceAndSkills/styles.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '~styles/mixins'; - -.experience-and-skills { - display: flex; - flex-direction: column; - margin: 9px 0 0; - color: $color-black-100; - - @include xs-to-md { - display: block; - margin: 0; - } -} - -.footer { - display: flex; - flex-direction: row-reverse; - - .save-changes-btn { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 24px; - border-radius: 50px !important; - background: #137d60 !important; - color: #fff !important; - text-transform: uppercase; - padding: 11px 23px; - margin: 0; - - &.disabled { - opacity: 0.5; - } - } - - @include xs-to-md { - padding: $pad-xxxxl 0 $pad-sm; - border-top: 2px solid $color-black-10; - - .save-changes-btn { - font-size: 14px; - line-height: 20px; - } - } -} diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx deleted file mode 100644 index 39a0ac31ac..0000000000 --- a/src/shared/components/Settings/FormField/index.jsx +++ /dev/null @@ -1,45 +0,0 @@ -/** - * FormField - * - * A Form Field Is a wrapper for input to add the label to it -*/ -import React from 'react'; -import PT from 'prop-types'; -import cn from 'classnames'; -import './styles.scss'; - -const FormField = ({ - children, label = '', disabled, style, required, isTextarea, className = '', -}) => ( -
    -
    -
    - {label} - { required && * } -
    - {children} -
    -
    -); - -FormField.defaultProps = { - label: '', - className: '', - children: null, - disabled: false, - style: {}, - required: false, - isTextarea: false, -}; - -FormField.propTypes = { - label: PT.string, - className: PT.string, - children: PT.node, - disabled: PT.bool, - style: PT.object, - required: PT.bool, - isTextarea: PT.bool, -}; - -export default FormField; diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss deleted file mode 100644 index 1ce9d20a82..0000000000 --- a/src/shared/components/Settings/FormField/styles.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import "~styles/mixins"; - -.form-field-wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-start; - margin-bottom: 16px; - - .form-field { - // border: 1px solid #aaa; - border-radius: 4px; - background: white; - // padding-top: 24px; - // margin-bottom: 10px; - - .label { - @include roboto-regular; - - font-weight: 500 !important; - font-size: 11px !important; - line-height: 10px; - position: absolute; - top: 10px; - left: 11px; - color: $listing-checkbox-green; - z-index: 1; - - &.disabled { - color: $color-black-60; - } - - .required { - color: $member-red; - margin-left: 5px; - } - - &.isTextarea { - top: 10px; - } - } - } -} diff --git a/src/shared/components/Settings/FormInputCheckbox/index.jsx b/src/shared/components/Settings/FormInputCheckbox/index.jsx deleted file mode 100644 index 89ab4bb2e0..0000000000 --- a/src/shared/components/Settings/FormInputCheckbox/index.jsx +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -/* eslint-disable jsx-a11y/label-has-for */ - -import React from 'react'; -import PT from 'prop-types'; -import IconCheck from 'assets/images/icon-check.svg'; - -import './styles.scss'; - -export default function FormInputCheckBox({ - checked: checkedProp, - id, - name, - label, - onChange, - style, -}) { - const [checked, setChecked] = React.useState(false); - React.useEffect(() => { - setChecked(checkedProp); - }, [checkedProp]); - - const handleChange = (e) => { - setChecked(!checked); - onChange(e); - }; - - return ( - - - - - - - - - ); -} - -FormInputCheckBox.defaultProps = { - checked: false, - id: '', - name: '', - label: '', - onChange: () => {}, - style: {}, -}; - -FormInputCheckBox.propTypes = { - checked: PT.bool, - id: PT.string, - name: PT.string, - label: PT.string, - onChange: PT.func, - style: PT.object, -}; diff --git a/src/shared/components/Settings/FormInputCheckbox/styles.scss b/src/shared/components/Settings/FormInputCheckbox/styles.scss deleted file mode 100644 index 266a929b76..0000000000 --- a/src/shared/components/Settings/FormInputCheckbox/styles.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import "~styles/mixins"; - -.formInputCheckbox { - display: inline-flex; - align-items: flex-start; - vertical-align: middle; - gap: 8px; - padding: 10px 0 6px; - margin-bottom: $margin-lg; - - .input-container { - position: relative; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - - .checked, - .unchecked { - display: none; - width: 20px; - height: 20px; - border: 1.5px solid #7f7f7f; - border-radius: 3px; - pointer-events: none; - } - - .checked { - color: $color-tc-white; - background-color: $color-turq-160; - border-color: $color-turq-160; - - svg { width: 80%; } - } - - input { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: block; - opacity: 0; - visibility: visible; - cursor: inherit; - - &:checked ~ .checked { - display: flex; - align-items: center; - justify-content: center; - } - - &:not(:checked) ~ .unchecked { display: block; } - } - } - - .label { - @include roboto-regular; - - font-size: 16px; - line-height: 24px; - margin: 0; - cursor: default; - } -} diff --git a/src/shared/components/Settings/FormInputDatePicker/index.jsx b/src/shared/components/Settings/FormInputDatePicker/index.jsx deleted file mode 100644 index d25d5ee38a..0000000000 --- a/src/shared/components/Settings/FormInputDatePicker/index.jsx +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; -import PT from 'prop-types'; - -import moment from 'moment'; -import ReactSelect from 'react-select'; -import DatePicker from 'components/GUIKit/Datepicker'; -import PrevIcon from 'assets/images/preferences/arrow-circle-left.svg'; -import NextIcon from 'assets/images/preferences/arrow-circle-right.svg'; -import DropdownArrow from 'assets/images/dropdown-arrow.svg'; -import styles from './styles.scss'; - -const renderResetButton = props => ( -
    - -
    -); - -renderResetButton.defaultProps = { - onChange: () => {}, -}; - -renderResetButton.propTypes = { - onChange: PT.func, -}; - -const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) => { - const monthOptions = moment.months().map((label, value) => ({ - value, label, - })); - - const yearOptions = []; - for (let year = moment().year(), i = year; i > year - 99; i -= 1) { - yearOptions.push({ value: i, label: `${i}` }); - } - const customArrow = () => ; - return ( -
    -
    - { - onMonthSelect(month, option.value); - }} - placeholder="Month" - clearable={false} - autosize={false} - searchable={false} - autoBlur={false} - arrowRenderer={customArrow} - className={styles.dateSelect} - /> -
    -
    - { - onYearSelect(month, option.value); - }} - placeholder="Year" - clearable={false} - autosize={false} - searchable={false} - autoBlur={false} - arrowRenderer={customArrow} - className={styles.dateSelect} - /> -
    -
    - ); -}; - -renderDatePickerMonthElement.propTypes = { - month: PT.number.isRequired, - onMonthSelect: PT.func.isRequired, - onYearSelect: PT.func.isRequired, -}; - -export default function FormInputDatePicker(props) { - const { value, onChange } = props; - - return ( - onChange(date ? date.toISOString() : '')} - renderCalendarInfo={() => renderResetButton(props)} - renderMonthElement={renderDatePickerMonthElement} - className={styles.formInputDatePicker} - navPrev={} - navNext={} - /> - ); -} - -FormInputDatePicker.defaultProps = { - value: null, - placeholder: '', - label: '', - onChange: () => {}, - isOutsideRange: () => false, - isDayBlocked: () => false, - displayFormat: 'MM/DD/YYYY', - id: '', - readOnly: false, - showClearDate: false, - anchorDirection: 'left', -}; - - -FormInputDatePicker.propTypes = { - value: PT.any, - placeholder: PT.string, - label: PT.string, - onChange: PT.func, - isOutsideRange: PT.func, - isDayBlocked: PT.func, - displayFormat: PT.string, - id: PT.string, - readOnly: PT.bool, - showClearDate: PT.bool, - anchorDirection: PT.oneOf(['left', 'right']), -}; diff --git a/src/shared/components/Settings/FormInputDatePicker/styles.scss b/src/shared/components/Settings/FormInputDatePicker/styles.scss deleted file mode 100644 index 765d5ca0da..0000000000 --- a/src/shared/components/Settings/FormInputDatePicker/styles.scss +++ /dev/null @@ -1,173 +0,0 @@ -@import "~styles/mixins"; - -.formInputDatePicker { - :global { - @import '~react-select/dist/react-select'; - - .SingleDatePicker { - .SingleDatePickerInput { - .DateInput { - position: relative; - - &::before { - content: url('assets/images/calendar-green.svg'); - position: absolute; - bottom: 0; - left: 0; - display: flex; - margin: 0 0 4px 10px; - } - - .DateInput_input { - height: auto; - padding: 22px 0 2px; - padding-left: 28px; - padding-right: 28px; - margin: 0; - line-height: 22px; - cursor: pointer; - - &::placeholder { - @include roboto-regular; - - font-size: 14px; - line-height: 22px; - color: $color-black-60; - text-transform: capitalize !important; - } - } - } - - .SingleDatePickerInput_calendarIcon { - width: 24px !important; - padding-top: 10px !important; - padding-right: 10px !important; - - &::before { - content: url('assets/images/dropdown-arrow.svg'); - display: block; - } - - svg { - display: none; - } - } - } - - @include xs-to-md { - .SingleDatePickerInput { - .DateInput { - .DateInput_input { - font-size: 14px; - text-transform: capitalize; - } - } - } - } - } - - .DayPicker_weekHeaders { - z-index: 0; - } - - .CalendarMonth_caption { - .Select { - .Select-control { - @include roboto-medium; - - font-size: 16px; - line-height: 24px; - color: $tc-gray-90; - height: 24px; - min-width: 120px; - border: none; - box-shadow: none !important; - cursor: pointer; - border-color: #aaaaab !important; - - @media screen and (max-width: 425px) { - min-width: 100px; - } - - .Select-value { - display: flex; - align-items: center; - justify-content: flex-end; - padding-right: 25px; - - .Select-value-label { - @include roboto-medium; - - font-size: 16px; - } - } - } - - .Select-menu-outer { - position: absolute; - top: calc(100% + 2px); - max-height: 320px; - border: 1px solid #767676; - border-radius: 0; - - .Select-menu { - background-color: $tc-white; - - .Select-option { - font-size: 16px; - line-height: 30px; - color: $tc-gray-90; - padding: 0 15px; - - &.is-selected { - font-weight: bold; - background-color: $tc-white; - } - - &:hover, - &.is-focused { - background-color: #229173; - color: $tc-white; - } - } - } - } - } - } - - .CalendarMonthGrid { - background: transparent !important; - - .CalendarMonth { - background: transparent !important; - } - } - - .CalendarDay__today { - font-weight: 700; - } - - .reset-btn-container { - padding: 16px 0 15px; - margin: 0 15px; - border-top: 2px solid $listing-filter-bg; - - button { - @include roboto-bold; - - font-size: 12px; - line-height: 22px; - color: $listing-checkbox-green; - padding: 0 15px; - background: none; - border: 1.5px solid currentColor; - border-radius: 24px; - } - } - } - - .navigationIcon { - height: 26px; - width: 26px; - } -} diff --git a/src/shared/components/Settings/FormInputSelect/index.jsx b/src/shared/components/Settings/FormInputSelect/index.jsx deleted file mode 100644 index 3547cc7d79..0000000000 --- a/src/shared/components/Settings/FormInputSelect/index.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -import ReactSelect from 'react-select'; -import PT from 'prop-types'; -import './styles.scss'; - -export default function Select(props) { - const { selectRef } = props; - return ( -
    - -
    - ); -} - -Select.defaultProps = { - selectRef: _.noop, -}; - -Select.propTypes = { - selectRef: PT.func, -}; diff --git a/src/shared/components/Settings/FormInputSelect/styles.scss b/src/shared/components/Settings/FormInputSelect/styles.scss deleted file mode 100644 index e5c93cc69f..0000000000 --- a/src/shared/components/Settings/FormInputSelect/styles.scss +++ /dev/null @@ -1,102 +0,0 @@ -@import "~styles/mixins"; - -.form-input-select { - :global { - @import '~react-select/dist/react-select'; - - .Select-control { - border: 1px solid $color-black-40; - box-shadow: none !important; - cursor: pointer; - border-color: #aaaaab !important; - - .Select-placeholder { - padding: 22px 0 2px 10px !important; - font-family: 'Roboto', Helvetica, Arial, sans-serif !important; - font-weight: 400 !important; - font-size: 14px !important; - line-height: 22px !important; - color: $color-black-60 !important; - } - - .Select-value { - .Select-value-label { - @include roboto-regular; - - font-size: 14px; - line-height: 24px; - color: $color-black-60; - display: block; - padding: 22px 0 2px; - } - } - - .Select-input { - height: 48px; - border-radius: inherit; - - > input { - @include roboto-regular; - - font-size: 14px; - line-height: 22px; - color: $color-black-60; - height: 100%; - padding: 22px 0 2px; - } - } - - .Select-arrow-zone { - vertical-align: bottom; - position: relative; - padding-right: 5px; - width: 28px; - - .Select-arrow { - position: static; - width: auto; - height: auto; - border: none; - - &::before { - content: url('assets/images/dropdown-arrow.svg'); - display: block; - margin: 0; - left: 0; - top: 30px; - } - } - } - } - - .Select-menu-outer { - max-height: 240px; - z-index: 10; - - .Select-menu { - @include roboto-regular; - - background-color: $tc-white; - - .Select-option { - font-size: 16px; - line-height: 30px; - color: $tc-gray-90; - padding: 0 15px; - - &:hover, - &.is-focused { - background-color: #229173; - color: $tc-white; - } - - &.is-selected { - font-weight: bold; - color: $tc-gray-90; - background-color: $tc-white; - } - } - } - } - } -} diff --git a/src/shared/components/Settings/FormInputText/index.jsx b/src/shared/components/Settings/FormInputText/index.jsx deleted file mode 100644 index b23a3f230c..0000000000 --- a/src/shared/components/Settings/FormInputText/index.jsx +++ /dev/null @@ -1,49 +0,0 @@ -/** - * FormInputText - * - * Form Input Type=text - */ -import React from 'react'; -import PT from 'prop-types'; -import cn from 'classnames'; -import './styles.scss'; - -const FormInputText = ({ - styleName, type, showChartCount, ...props -}) => { - const { value, maxLength } = props; - - return ( - - {showChartCount ? ( - - {(value && value.length) || 0} - /{maxLength} - - ) : null} - - - ); -}; - -FormInputText.defaultProps = { - styleName: '', - type: 'text', - value: null, - maxLength: null, - showChartCount: false, -}; - -FormInputText.propTypes = { - styleName: PT.string, - type: PT.string, - value: PT.string, - maxLength: PT.string, - showChartCount: PT.bool, -}; - -export default FormInputText; diff --git a/src/shared/components/Settings/FormInputText/styles.scss b/src/shared/components/Settings/FormInputText/styles.scss deleted file mode 100644 index 5d1e4759e8..0000000000 --- a/src/shared/components/Settings/FormInputText/styles.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "~styles/mixins"; - -.form-input-text { - background-color: #fff !important; - box-sizing: border-box !important; - color: #2a2a2a !important; - font-size: 14px !important; - height: 48px !important; - outline: none !important; - border: 1px solid #aaa !important; - width: 100% !important; - margin-bottom: 0 !important; - box-shadow: none !important; - border-radius: inherit !important; - padding: 22px 9px 2px 9px; - - &::placeholder { - color: #767676 !important; - text-transform: none !important; - font-size: 14px !important; - opacity: 1 !important; - } - - &:focus { - box-shadow: none !important; - } - - &:disabled { - background: $color-black-10 !important; - border: 1px solid #aaa !important; - border-radius: 4px !important; - } -} - -.char-count { - @include roboto-regular; - - position: absolute; - right: 0; - bottom: -15px; - font-size: 11px; - padding-right: 0; -} - -.grey { - color: $tc-gray-40; -} diff --git a/src/shared/components/Settings/FormInputTextArea/index.jsx b/src/shared/components/Settings/FormInputTextArea/index.jsx deleted file mode 100644 index dceed5e279..0000000000 --- a/src/shared/components/Settings/FormInputTextArea/index.jsx +++ /dev/null @@ -1,60 +0,0 @@ -/** - * FormInputTextArea - * - * Form Input Type=text - */ -import React from 'react'; -import PT from 'prop-types'; -import cn from 'classnames'; -import './styles.scss'; - -const FormInputTextArea = ({ - styleName, showChartCount, showBottomChartCount, ...props -}) => { - const { - value, - maxLength, - } = props; - - return ( -
    - {showBottomChartCount ? ( - - {(value && value.length) || 0} - /{maxLength} - - ) : null} - {showChartCount ? ( - - {(value && value.length) || 0} - -  / {maxLength} - - - ) : null} -