openLink(e, link)}>
-
-
-
onConfirmDeleteLink(e, link)} styleName={`ext-link-tile_edit-header_delete ${link.deleting ? 'ext-link-tile_edit-header_delete--disabled' : ''}`} prevent-event-propagation="true" />
-
-
-
-
-
- {link.providerType}
-
-
-
- {
- link.deleting
- && (
-
- )
- }
- {
- !link.deleting && link.providerType === 'weblink'
- && (
-
- )
- }
- {
- !link.deleting && link.providerType === 'linkedin'
- && (
-
-
- {link.data.handle}
-
-
- {link.data.title}
-
-
- )
- }
- {
- !link.deleting && link.providerType !== 'weblink' && link.providerType !== 'linkedin'
- && (
-
-
- {link.data.handle}
-
-
-
- Loading data. This will take a few minutes.
-
-
- {
- link.providerType === 'github'
- && (
-
- )
- }
- {
- link.providerType === 'stackoverflow'
- && (
-
- )
- }
- {
- link.providerType === 'behance'
- && (
-
- )
- }
- {
- link.providerType === 'dribbble'
- && (
-
- )
- }
- {
- link.providerType === 'bitbucket'
- && (
-
- )
- }
- {
- link.providerType === 'twitter'
- && (
-
- )
- }
-
- )
- }
-
-
- );
-}
-
-ExistingLink.propTypes = {
- link: PT.shape().isRequired,
- supportedAccounts: PT.arrayOf(PT.shape()).isRequired,
- onConfirmDeleteLink: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx b/src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
deleted file mode 100644
index 15a4e4de28..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Renders 'Linked Accounts' section.
- */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-
-import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
-
-import ExistingLink from './ExistingLink';
-
-import Styles from './styles.scss';
-
-export default class ExistingLinks extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- linkToConfirmDelete: null,
- };
- this.onConfirmDeleteLink = this.onConfirmDeleteLink.bind(this);
- this.onDeleteLink = this.onDeleteLink.bind(this);
- }
-
- // Confirm delete link function
- onConfirmDeleteLink(e, link) {
- e.preventDefault();
- e.stopPropagation();
- if (!link || link.deleting) {
- return;
- }
- this.setState({ linkToConfirmDelete: link });
- }
-
- // Delete link function
- onDeleteLink(e) {
- e.preventDefault();
- e.stopPropagation();
- const {
- deleteWebLink,
- handle,
- profile,
- tokenV3,
- unlinkExternalAccount,
- } = this.props;
-
- const { linkToConfirmDelete } = this.state;
-
- if (!linkToConfirmDelete || linkToConfirmDelete.deleting) {
- return;
- }
- this.setState({ linkToConfirmDelete: null });
-
- if (linkToConfirmDelete.providerType === 'weblink') {
- deleteWebLink(handle, tokenV3, linkToConfirmDelete);
- } else {
- unlinkExternalAccount(
- profile,
- tokenV3,
- linkToConfirmDelete.providerType,
- );
- }
- }
-
- render() {
- const {
- allLinks,
- supportedAccounts,
- } = this.props;
-
- const { linkToConfirmDelete } = this.state;
-
- return (
-
- {
- linkToConfirmDelete
- && (
-
-
-
-
- Heads Up!
-
-
- Are you sure you want to delete the external link
-
- "
- {linkToConfirmDelete.providerType === 'weblink' ? linkToConfirmDelete.URL : linkToConfirmDelete.providerType}
- "
-
- ? This action can't be undone later.
-
-
-
-
- Yes, Delete Link
-
-
-
-
this.setState({ linkToConfirmDelete: null })}>
- Cancel
-
-
-
-
-
- )
- }
-
- {
- _.map(allLinks, link => (
-
- ))
- }
-
-
- );
- }
-}
-
-ExistingLinks.propTypes = {
- handle: PT.string.isRequired,
- tokenV3: PT.string.isRequired,
- profile: PT.shape().isRequired,
- allLinks: PT.arrayOf(PT.shape()).isRequired,
- supportedAccounts: PT.arrayOf(PT.shape()).isRequired,
- deleteWebLink: PT.func.isRequired,
- unlinkExternalAccount: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx b/src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
deleted file mode 100644
index 82829f1989..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Renders 'Link Your Accounts' section.
- */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-
-import './styles.scss';
-
-function getStyleName(account) {
- let style = 'ext-tile';
- if (account.disabled) {
- style += ' disabled';
- } else {
- style += ' enabled';
- }
-
- if (account.status === 'linked') {
- style += ' connected';
- } else if (account.status === 'pending') {
- style += ' connecting';
- } else if (account.status === 'unlinked' && !account.disabled) {
- style += ' connect';
- }
- return style;
-}
-
-export default class LinkAccounts extends React.Component {
- constructor(props) {
- super(props);
- this.handleClick = this.handleClick.bind(this);
- }
-
- handleClick(e, account) {
- const {
- linkExternalAccount,
- profile,
- tokenV3,
- unlinkExternalAccount,
- } = this.props;
- e.preventDefault();
- if (account.status === 'linked') {
- unlinkExternalAccount(
- profile,
- tokenV3,
- account.providerType,
- );
- } else if (!account.disabled && account.status === 'unlinked') {
- linkExternalAccount(
- profile,
- tokenV3,
- account.providerType,
- );
- }
- }
-
- render() {
- const {
- allLinks,
- supportedAccounts,
- } = this.props;
-
- let accounts = _.cloneDeep(supportedAccounts);
-
- _.remove(accounts, al => al.order < 0);
-
- _.forEach(accounts, (account) => {
- const linkedAccount = _.find(allLinks, p => p.providerType === account.providerType);
-
- if (!linkedAccount) {
- account.status = 'unlinked'; /* eslint-disable-line no-param-reassign */
- } else {
- account.status = linkedAccount.status; /* eslint-disable-line no-param-reassign */
- }
- });
- accounts = _.sortBy(accounts, 'order');
-
- return (
-
- {
- _.map(accounts, account => (
-
this.handleClick(e, account)} styleName={getStyleName(account)}>
-
-
-
- {account.displayName}
-
-
- {
- account.status === 'linked'
- && (
-
- Connected
-
- )
- }
- {
- account.status === 'pending'
- && (
-
- Connecting
-
- )
- }
-
- Disconnect
-
- {
- account.status === 'unlinked' && !account.disabled
- && (
-
- Connect
-
- )
- }
- {
- account.disabled
- && (
-
- Coming Soon
-
- )
- }
-
- ))
- }
-
- );
- }
-}
-
-LinkAccounts.propTypes = {
- tokenV3: PT.string.isRequired,
- profile: PT.shape().isRequired,
- allLinks: PT.arrayOf(PT.shape()).isRequired,
- supportedAccounts: PT.arrayOf(PT.shape()).isRequired,
- linkExternalAccount: PT.func.isRequired,
- unlinkExternalAccount: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/index.jsx b/src/shared/components/Settings/Profile/ExternalLinks/index.jsx
deleted file mode 100644
index 9f87fcc653..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/index.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * Child component of Settings/Profile/ExternalLinks renders
- * "External Links" section of profile setting page.
- */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-
-import AddWebLink from './AddWebLink';
-import LinkAccounts from './LinkAccounts';
-import ExistingLinks from './ExistingLinks';
-
-import './styles.scss';
-
-const supportedAccounts = [
- {
- providerType: 'dribbble',
- className: 'fa-dribbble',
- displayName: 'Dribbble',
- disabled: false,
- order: 6,
- colorClass: 'el-dribble',
- featured: true,
- },
- {
- providerType: 'linkedin',
- className: 'fa-linkedin',
- displayName: 'LinkedIn',
- disabled: true,
- order: 5,
- colorClass: 'el-linkedin',
- featured: true,
- },
- {
- providerType: 'stackoverflow',
- className: 'fa-stack-overflow',
- displayName: 'Stack Overflow',
- disabled: false,
- order: 3,
- colorClass: 'el-stackoverflow',
- },
- {
- providerType: 'behance',
- className: 'fa-behance',
- displayName: 'Behance',
- disabled: true,
- order: 2,
- colorClass: 'el-behance',
- },
- {
- providerType: 'github',
- className: 'fa-github',
- displayName: 'Github',
- disabled: false,
- order: 1,
- colorClass: 'el-github',
- featured: true,
- },
- {
- providerType: 'bitbucket',
- className: 'fa-bitbucket',
- displayName: 'Bitbucket',
- disabled: false,
- order: 7,
- colorClass: 'el-bitbucket',
- },
- {
- providerType: 'twitter',
- className: 'fa-twitter',
- displayName: 'Twitter',
- disabled: true,
- order: 4,
- colorClass: 'el-twitter',
- },
- {
- providerType: 'weblink',
- className: 'fa-globe',
- displayName: 'Web Links',
- disabled: true,
- order: -1,
- colorClass: 'el-weblinks',
- },
-];
-
-export default function ExternalLinks(props) {
- const {
- profileState,
- settingsPageState,
- } = props;
-
- // Construct all links
- const allLinks = [];
- const linkedAccounts = profileState.linkedAccounts || [];
- const externalAccountsData = profileState.externalAccounts || {};
-
- if (!linkedAccounts.length) {
- const providers = _.omit(externalAccountsData, ['userId', 'updatedAt', 'createdAt', 'createdBy', 'updatedBy', 'handle']);
-
- _.forEach(_.keys(providers), (p) => {
- if (providers[p]) {
- linkedAccounts.push({ providerType: p });
- }
- });
- }
- _.forEach(linkedAccounts, (linkedAccount) => {
- const providerType = linkedAccount.providerType || linkedAccount.provider;
-
- let account;
- if (externalAccountsData[providerType]) {
- // add external account data
- account = {
- providerType,
- data: externalAccountsData[providerType],
- status: 'linked',
- };
- } else {
- // account data not available yet, add pending card
- account = {
- providerType,
- data: { handle: linkedAccount.name },
- status: 'pending',
- };
- }
-
- if (_.find(
- settingsPageState.deletingLinks,
- l => l.providerType === account.providerType,
- )) {
- account.deleting = true;
- }
- allLinks.push(account);
- });
-
- // Append web links
- _.forEach(profileState.externalLinks, (el) => {
- const link = _.clone(el);
- link.providerType = 'weblink';
- link.status = link.synchronizedAt ? 'linked' : 'pending';
- if (_.find(settingsPageState.deletingLinks, l => l.key === link.key)) {
- link.deleting = true;
- }
- allLinks.push(link);
- });
-
- return (
-
-
-
- External links
-
-
- Show off your work and experience outside of Topcoder. Connect
- accounts from popular services and networks or add a link to any site.
-
-
-
-
- Add a web link
-
-
-
- Link Your Accounts
-
-
-
- Linked Accounts
-
-
-
-
- );
-}
-
-ExternalLinks.propTypes = {
- profileState: PT.shape().isRequired,
- settingsPageState: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/styles.scss b/src/shared/components/Settings/Profile/ExternalLinks/styles.scss
deleted file mode 100644
index d012d9edb1..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/styles.scss
+++ /dev/null
@@ -1,724 +0,0 @@
-@import "../../style";
-
-.links {
- border-bottom: none;
-}
-
-// Add web link section
-.external-web-link {
- .web-link {
- margin: 6px 0 31px 0;
-
- form {
- display: flex;
- flex-flow: row wrap;
-
- input.url {
- width: 100%;
- margin: 0;
-
- @include placeholder {
- color: $tc-gray-40;
- font-size: 12px;
-
- @include roboto-regular;
- }
-
- &:disabled {
- color: #b7b7b7;
- }
- }
-
- // Error and success styles
- .validation-bar {
- flex: 1;
- width: auto;
- position: relative;
-
- &::before {
- border-radius: 3px 0 0 3px;
- content: '';
- display: none;
- height: 40px;
- width: 2px;
- left: 1px;
- position: absolute;
- top: 0;
- }
-
- &.error-bar::before {
- background-color: $tc-red;
- display: block;
- }
- }
-
- .form-input-error {
- background-color: $tc-red-10;
- border: 1px solid $tc-red-30;
- color: $tc-red;
- font-size: 12px;
- line-height: 20px;
- margin-bottom: 10px;
- padding: 10px;
- text-align: left;
-
- p {
- @include merriweather-sans-regular;
- }
- }
-
- .add-button {
- width: auto;
- height: 40px;
- margin-top: 0;
- margin-left: 10px;
- text-transform: uppercase;
- }
- }
- }
-}
-
-.external-link-list {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- margin-top: 10px;
-
- .external-link-tile {
- border: 1px solid $tc-gray-20;
- width: 280px;
- height: 90px;
- display: flex;
- flex-direction: row;
- text-align: center;
- margin-bottom: 10px;
- border-radius: 4px;
-
- @include roboto-medium;
-
- i {
- color: #7f7f7f;
- }
-
- &:hover {
- cursor: pointer;
- background-color: #fbfbfb;
-
- i {
- color: black;
- }
- }
-
- i.fa-globe {
- color: #82a0aa;
- }
-
- i.fa-weblinks {
- color: #82a0aa;
- }
-
- i.fa-bitbucket {
- color: #205081;
- }
-
- i.fa-dribble {
- color: #ea4c89;
- }
-
- i.fa-linkedin {
- color: #127cb5;
- }
-
- i.fa-twitter {
- color: #62aadc;
- }
-
- i.fa-stack-overflow {
- color: #e5712a;
- }
-
- i.fa-behance {
- color: #188cfc;
- }
-
- i.fa-github {
- color: #4b3d74;
- }
-
- .top {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 90px;
- height: 88px;
- background-color: $tc-gray-neutral-light;
- border-radius: 4px 0 0 4px;
- position: relative;
-
- i {
- font-size: 40px;
- margin-top: 15px;
- }
-
- h2 {
- margin-top: 5px;
- flex-basis: 40px;
- font-weight: normal;
- text-transform: uppercase;
- color: #a3a3ae;
- font-size: 10px;
- }
- }
-
- .bottom {
- width: 220px;
- margin-top: 10px;
-
- .handle {
- @include roboto-light;
-
- font-size: 18px;
- height: 20px;
- }
-
- .title {
- // placeholder
- margin-top: 10px;
- color: #9e9e9e;
- font-size: 12px;
- line-height: 14px;
-
- @include roboto-medium;
- }
-
- .pending {
- p {
- @include roboto-regular;
-
- font-size: 16px;
- color: $tc-gray-90;
- margin-bottom: 15px;
- padding: 0 10px;
- }
- }
-
- ul {
- margin-top: 10px;
- height: 40px;
- display: flex;
- flex-direction: row;
- justify-content: center;
-
- li {
- justify-content: space-between;
- margin: 10px 0 10px 0;
- width: 90px;
- color: #9e9e9e;
-
- .key {
- font-size: 11px;
- text-transform: capitalize;
- }
-
- .value {
- font-size: 14px;
- // placeholder
- }
- }
- }
-
- .logo {
- padding: 10px;
- font-size: 50px;
- }
-
- .link-title {
- @include roboto-medium;
-
- font-size: 12px;
- line-height: 20px;
- color: $tc-gray-90;
- margin-top: 10px;
- height: 40px;
- overflow: hidden;
- padding: 0 20px;
- text-transform: uppercase;
- }
-
- .link-url {
- font-size: 12px;
- line-height: 14px;
- word-wrap: break-word;
- display: block;
- overflow: hidden;
- max-height: 14px;
- padding: 0 20px;
- text-transform: uppercase;
- color: $tc-dark-blue-110;
-
- &:hover {
- color: $tc-light-blue-110;
- }
- }
- }
- }
-}
-
-@media (min-width: 768px) {
- .external-link-list {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- padding: 0 60px;
-
- .external-link-tile {
- border: 1px solid #f0f0f0;
- background-color: $tc-gray-neutral-light;
- margin-left: 15px;
- margin-top: 30px;
- margin-bottom: 0;
- // &:nth-child(3n+1) {
- // margin-left: 0px;
- // }
- width: 218px;
- height: 240px;
- display: flex;
- flex-direction: column;
- text-align: center;
- padding: 0;
-
- @include roboto-medium;
-
- i {
- color: #7f7f7f;
- }
-
- &:hover {
- cursor: pointer;
- background-color: #fbfbfb;
-
- i {
- color: black;
- }
- }
-
- .top {
- padding-top: 15px;
- background-color: none;
- width: auto;
-
- h2 {
- flex-basis: 40px;
- font-weight: normal;
- text-transform: uppercase;
- color: #a3a3ae;
- font-size: 12px;
- line-height: 14px;
- }
- }
-
- .bottom {
- margin-top: 15px;
- width: auto;
-
- .handle {
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- .title {
- // placeholder
- height: 40px;
- margin-top: 15px;
- margin-bottom: 30px;
- }
-
- ul {
- margin-left: 10px;
- margin-bottom: 10px;
- height: 40px;
- display: flex;
- flex-direction: row;
-
- li {
- justify-content: space-between;
- margin: 10px 0 10px 0;
- width: 90px;
-
- @include roboto-medium;
-
- .value {
- color: $tc-gray-90;
- font-size: 18px;
- }
-
- .key {
- text-transform: uppercase;
- font-size: 12px;
- margin-top: 4px;
- color: $tc-gray-40;
- }
- }
- }
-
- .logo {
- padding: 10px;
- font-size: 50px;
- }
-
- .link-title {
- margin-top: 15px;
- margin-bottom: 20px;
- height: 60px;
- }
-
- .link-url {
- max-height: 28px;
- }
- }
- }
-
- .external-link-tile--pending {
- &:hover {
- cursor: default;
- }
- }
- }
-}
-
-// Existing links section
-.existing-links {
- margin-bottom: 30px;
- display: flex;
- flex-flow: row wrap;
- border-bottom: none;
-
- .ext-link-tile_edit-header {
- display: flex;
- justify-content: flex-end;
- position: absolute;
- top: 0;
- right: 0;
-
- &:hover {
- .show-on-profile_label {
- color: $tc-gray-90;
- }
- }
- }
-
- .ext-link-tile_edit-header_delete {
- background-image: url(assets/images/ico-delete.svg);
- background-position: center;
- background-size: 16px 16px;
- background-repeat: no-repeat;
- height: 43px;
- width: 51px;
- cursor: pointer;
- opacity: 0.7;
-
- &:hover:not(.ext-link-tile_edit-header_delete--disabled) {
- // border-left: 1px solid $tc-gray-20;
- // border-bottom: 1px solid $tc-gray-20;
- opacity: 1;
- }
- }
-
- .ext-link-tile_edit-header_delete--disabled {
- cursor: default;
- opacity: 0.4;
- }
-
- .deletion-confirmation-modal {
- padding: 0;
- position: fixed;
- overflow: auto;
- z-index: 10000;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- box-sizing: border-box;
- width: auto;
- max-width: none;
- transform: none;
- background: transparent;
-
- .deletion-confirmation-container {
- background: transparent;
- opacity: 1;
- position: relative;
- padding: 30px;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 0;
- color: #444;
- font-family: Helvetica, sans-serif;
- font-size: 1.1em;
- line-height: 1.5em;
- margin: 0 auto;
- max-width: 100%;
- }
- }
-
- @media (min-width: 768px) {
- .deletion-confirmation {
- width: 520px;
- height: 256px;
- }
- }
-
- .deletion-confirmation {
- display: flex;
- flex-flow: column wrap;
- justify-content: space-around;
- align-items: center;
- background-color: $tc-white;
- opacity: 1;
- border-radius: 4px;
- padding: 40px;
- }
-
- .deletion-confirmation-title {
- @include roboto-medium;
-
- font-size: 20px;
- line-height: 24px;
- color: $tc-gray-90;
- text-transform: uppercase;
- }
-
- .deletion-confirmation-message {
- @include merriweather-sans-light;
-
- .deletion-confirmation-account-title {
- font-style: italic;
- }
- }
-
- .deletion-confirmation-buttons {
- display: flex;
- flex-flow: row wrap;
-
- .deletion-confirmation-button-no {
- margin-left: 10px;
-
- button {
- text-transform: uppercase;
-
- @include roboto-medium;
-
- font-size: 12px;
- }
- }
-
- .deletion-confirmation-button-yes {
- button {
- border: 1px solid $tc-dark-blue;
- text-transform: uppercase;
-
- @include roboto-medium;
-
- font-size: 12px;
-
- &:hover {
- color: $tc-white;
- background-color: $tc-dark-blue;
- }
- }
- }
- }
-}
-
-@media only screen and (min-width: 768px) {
- .links {
- & .external-link-list {
- padding: 0;
- }
-
- .existing-links {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- flex-wrap: wrap;
- }
- }
-}
-
-// Link accounts section
-.external-links {
- margin-bottom: 30px;
- display: flex;
- flex-flow: row wrap;
-
- .ext-tile {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 5px 20px 15px 0;
- cursor: pointer;
-
- .external-account-box {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 90px;
- height: 90px;
- border: 1px solid $tc-gray-20;
- margin-top: 12px;
-
- i {
- color: #d1d3d4;
- font-size: 45px;
- }
-
- .provider {
- margin-top: 8px;
-
- @include roboto-medium;
-
- font-size: 12px;
- line-height: 13px;
- text-align: center;
- text-transform: uppercase;
- color: $tc-gray-40;
- padding: 0 10px;
- }
- }
-
- &.connect {
- .external-account-box {
- background-color: #fbfbfb;
- }
- }
-
- .status {
- font-size: 10px;
-
- @include roboto-medium;
-
- margin-top: 10px;
- text-transform: uppercase;
- color: $tc-gray-90;
-
- &.disconnect {
- display: none;
- color: #f06;
- }
- }
-
- &.connected {
- .status {
- color: $tc-gray-80;
- }
-
- &:hover {
- .external-account-box {
- border: 1px solid #ff99c2;
- background-color: #ffcce1;
- }
-
- .already-connected {
- display: none;
- }
-
- .disconnect {
- display: block;
- }
- }
-
- .el-bitbucket i {
- color: #205081;
- }
-
- .el-dribble i {
- color: #ea4c89;
- }
-
- .el-linkedin i {
- color: #127cb5;
- }
-
- .el-twitter i {
- color: #62aadc;
- }
-
- .el-stackoverflow i {
- color: #e5712a;
- }
-
- .el-behance i {
- color: #188cfc;
- }
-
- .el-github i {
- color: #4b3d74;
- }
-
- .el-weblinks i {
- color: #82a0aa;
- }
- }
-
- &.enabled:hover {
- .el-bitbucket i {
- color: #205081;
- }
-
- .el-dribble i {
- color: #ea4c89;
- }
-
- .el-linkedin i {
- color: #127cb5;
- }
-
- .el-twitter i {
- color: #62aadc;
- }
-
- .el-stackoverflow i {
- color: #e5712a;
- }
-
- .el-behance i {
- color: #188cfc;
- }
-
- .el-github i {
- color: #4b3d74;
- }
-
- .el-weblinks i {
- color: #82a0aa;
- }
- }
-
- &.connecting {
- cursor: default;
- }
-
- &.disabled {
- cursor: default;
- }
-
- &.enabled.connect:hover {
- .external-account-box {
- background-color: #f2faff;
- border: 1px solid #85ccff;
- }
- }
- }
-}
-
-.section-loading {
- background: url(assets/images/ripple.gif) no-repeat center center;
- width: 100%;
- min-height: 50px;
-}
diff --git a/src/shared/components/Settings/Profile/Hobby/index.jsx b/src/shared/components/Settings/Profile/Hobby/index.jsx
deleted file mode 100644
index a3b8ccd2f0..0000000000
--- a/src/shared/components/Settings/Profile/Hobby/index.jsx
+++ /dev/null
@@ -1,486 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Hobby' 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 ErrorMessage from 'components/Settings/ErrorMessage';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConfirmationModal from '../../CofirmationModal';
-import HobbyList from './List';
-
-import './styles.scss';
-
-
-export default class Hobby extends ConsentComponent {
- constructor(props) {
- super(props);
- this.onHandleDeleteHobby = this.onHandleDeleteHobby.bind(this);
- this.onDeleteHobby = this.onDeleteHobby.bind(this);
- this.onEditHobby = this.onEditHobby.bind(this);
- this.loadHobbyTrait = this.loadHobbyTrait.bind(this);
- this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
- this.onUpdateInput = this.onUpdateInput.bind(this);
- this.onHandleAddHobby = this.onHandleAddHobby.bind(this);
- this.onAddHobby = this.onAddHobby.bind(this);
- this.updatePredicate = this.updatePredicate.bind(this);
- this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
-
- const { userTraits } = props;
- this.state = {
- formInvalid: false,
- isSubmit: false,
- hobbyTrait: this.loadHobbyTrait(userTraits),
- personalizationTrait: this.loadPersonalizationTrait(userTraits),
- newHobby: {
- hobby: '',
- description: '',
- },
- isMobileView: false,
- screenSM: 767,
- showConfirmation: false,
- indexNo: null,
- isEdit: false,
- };
- }
-
- componentDidMount() {
- this.updatePredicate();
- window.addEventListener('resize', this.updatePredicate);
- }
-
- componentWillReceiveProps(nextProps) {
- const hobbyTrait = this.loadHobbyTrait(nextProps.userTraits);
- const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
- this.setState({
- hobbyTrait,
- personalizationTrait,
- formInvalid: false,
- isSubmit: false,
- newHobby: {
- hobby: '',
- description: '',
- },
- });
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.updatePredicate);
- }
-
- /**
- * Show User Consent Modal
- * @param e event
- */
- onHandleAddHobby(e) {
- e.preventDefault();
- const { newHobby } = this.state;
- this.setState({ isSubmit: true });
- if (this.onCheckFormValue(newHobby)) {
- return;
- }
- this.showConsent(this.onAddHobby.bind(this));
- }
-
- /**
- * Check form fields value,
- * Invalid value, can not save
- * @param newHobby object
- */
- onCheckFormValue(newHobby) {
- let invalid = false;
-
- if (!_.trim(newHobby.hobby).length) {
- invalid = true;
- }
-
- this.setState({ formInvalid: invalid });
- return invalid;
- }
-
- onHandleDeleteHobby(indexNo) {
- this.setState({
- showConfirmation: true,
- indexNo,
- });
- }
-
- /**
- * Delete hobby by index
- * @param indexNo the hobby index no
- */
- onDeleteHobby(indexNo) {
- const { hobbyTrait } = this.state;
- const newHobbyTrait = { ...hobbyTrait };
- newHobbyTrait.traits.data.splice(indexNo, 1);
- this.setState({
- hobbyTrait: newHobbyTrait,
- });
-
- const {
- handle,
- tokenV3,
- updateUserTrait,
- deleteUserTrait,
- } = this.props;
-
- if (newHobbyTrait.traits.data.length > 0) {
- updateUserTrait(handle, 'hobby', newHobbyTrait.traits.data, tokenV3);
- } else {
- deleteUserTrait(handle, 'hobby', tokenV3);
- }
- this.setState({
- showConfirmation: false,
- isEdit: false,
- indexNo: null,
- isSubmit: false,
- });
- }
-
- /**
- * Add new hobby
- * @param answer user consent answer value
- */
- onAddHobby(answer) {
- const {
- newHobby, personalizationTrait, hobbyTrait, isEdit, indexNo,
- } = this.state;
-
- const {
- handle,
- tokenV3,
- updateUserTrait,
- addUserTrait,
- } = this.props;
- const hobby = _.clone(newHobby);
- if (_.isEmpty(hobby.description)) {
- delete hobby.description;
- }
-
- // save hobby
- if (hobbyTrait.traits && hobbyTrait.traits.data.length > 0) {
- const newHobbyTrait = _.cloneDeep(hobbyTrait);
- if (isEdit) {
- newHobbyTrait.traits.data.splice(indexNo, 1);
- }
- newHobbyTrait.traits.data.push(hobby);
- updateUserTrait(handle, 'hobby', newHobbyTrait.traits.data, tokenV3);
- } else {
- const newHobbies = [];
- newHobbies.push(hobby);
- addUserTrait(handle, 'hobby', newHobbies, tokenV3);
- }
- const empty = {
- hobby: '',
- description: '',
- };
- this.setState({
- newHobby: empty,
- isEdit: false,
- indexNo: null,
- inputChanged: 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 input value
- * @param e event
- */
- onUpdateInput(e) {
- const { newHobby: oldHobby } = this.state;
- const newHobby = { ...oldHobby };
- newHobby[e.target.name] = e.target.value;
- this.setState({ newHobby, isSubmit: false });
- }
-
- /**
- * Get hobby trait
- * @param userTraits the all user traits
- */
- loadHobbyTrait = (userTraits) => {
- const trait = userTraits.filter(t => t.traitId === 'hobby');
- const hobbys = trait.length === 0 ? {} : trait[0];
- return _.assign({}, hobbys);
- }
-
- /**
- * 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);
- }
-
- updatePredicate() {
- const { screenSM } = this.state;
- this.setState({ isMobileView: window.innerWidth <= screenSM });
- }
-
- /**
- * Edit hobby by index
- * @param indexNo the hobby index no
- */
- onEditHobby(indexNo) {
- const { hobbyTrait } = this.state;
- this.setState({
- newHobby: {
- hobby: hobbyTrait.traits.data[indexNo].hobby,
- description: _.isEmpty(hobbyTrait.traits.data[indexNo].description) ? '' : hobbyTrait.traits.data[indexNo].description,
- },
- isEdit: true,
- indexNo,
- formInvalid: false,
- isSubmit: false,
- });
- }
-
- onCancelEditStatus() {
- const { isEdit } = this.state;
- if (isEdit) {
- this.setState({
- isEdit: false,
- indexNo: null,
- isSubmit: false,
- formInvalid: false,
- newHobby: {
- hobby: '',
- description: '',
- },
- });
- }
- }
-
- render() {
- const {
- settingsUI,
- } = this.props;
- const {
- hobbyTrait,
- isMobileView,
- showConfirmation, indexNo, isEdit, isSubmit,
- formInvalid,
- } = this.state;
- const canModifyTrait = !this.props.traitRequestCount;
- const tabs = settingsUI.TABS.PROFILE;
- const currentTab = settingsUI.currentProfileTab;
- const containerStyle = currentTab === tabs.HOBBY ? '' : 'hide';
- const hobbyItems = hobbyTrait.traits
- ? hobbyTrait.traits.data.slice() : [];
- const { newHobby } = this.state;
-
- return (
-
- {
- this.shouldRenderConsent() && this.renderConsent()
- }
- {showConfirmation
- && (
-
this.showConsent(this.onDeleteHobby.bind(this, indexNo))}
- onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
- name={hobbyTrait.traits.data[indexNo].hobby}
- />
- )}
-
-
- Hobby
-
-
0 ? '' : 'hidden'}`}>
- Your hobbies
-
- {
- !isMobileView && hobbyItems.length > 0
- && (
-
- )
- }
-
0 ? 'second' : 'first'}`}>
- {
- isEdit ? (Edit hobby)
- : (Add a new hobby)
- }
-
-
-
-
-
-
- {
- isEdit ? (Edit hobby to your list)
- : (Add hobby to your list)
- }
-
-
- {
- isEdit && (
-
- )
- }
-
-
-
-
-
-
-
- {
- isEdit ? (Edit Hobby)
- : (Add Hobby)
- }
-
-
- {
- isEdit && (
-
- )
- }
-
-
- {
- isMobileView && hobbyItems.length > 0
- && (
-
- )
- }
-
- );
- }
-}
-
-Hobby.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,
- traitRequestCount: PT.number.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ImageInput/index.jsx b/src/shared/components/Settings/Profile/ImageInput/index.jsx
deleted file mode 100644
index 06ea24e0ff..0000000000
--- a/src/shared/components/Settings/Profile/ImageInput/index.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * render a user icom input component.
- */
-/* global document */
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PT from 'prop-types';
-
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-
-
-import DefaultPortrait from 'assets/images/ico-user-default.svg';
-
-import Styles from './styles.scss';
-
-
-export default class ImageInput extends React.Component {
- constructor(props) {
- super(props);
-
- this.onChangeImage = this.onChangeImage.bind(this);
- this.onUploadPhoto = this.onUploadPhoto.bind(this);
-
- this.state = {
- newBasicInfo: {},
- };
- }
-
- componentDidMount() {
- const { userTraits } = this.props;
- this.loadBasicInfoTraits(userTraits);
- }
-
- componentWillReceiveProps(nextProps) {
- this.loadBasicInfoTraits(nextProps.userTraits);
- const {
- profileState,
- } = this.props;
- if (profileState.deletingPhoto && !nextProps.profileState.deletingPhoto) {
- document.querySelector('#change-image-input').value = null;
- }
- }
-
- onChangeImage(e) {
- e.preventDefault();
- const {
- profileState,
- } = this.props;
- if (profileState.uploadingPhoto) {
- return;
- }
- const fileInput = document.querySelector('#change-image-input');
- fileInput.click();
- }
-
- onUploadPhoto(e) {
- e.preventDefault();
- const {
- handle,
- profileState,
- tokenV3,
- uploadPhoto,
- } = this.props;
- if (profileState.uploadingPhoto) {
- return;
- }
- const fileInput = document.querySelector('#change-image-input');
- const file = fileInput.files[0];
- uploadPhoto(handle, tokenV3, file);
- }
-
- /**
- * Get basic info trait
- * @param userTraits the all user traits
- */
- loadBasicInfoTraits = (userTraits) => {
- const trait = userTraits.filter(t => t.traitId === 'basic_info');
- const basicInfoTrait = trait.length === 0 ? {} : trait[0];
- const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
- this.setState({ newBasicInfo: basicInfo });
- }
-
- render() {
- const {
- handle,
- profileState,
- } = this.props;
-
- const {
- uploadingPhoto,
- deletingPhoto,
- } = profileState;
-
- const { newBasicInfo } = this.state;
-
- return (
-
-
- {
- newBasicInfo.photoURL
- &&
- }
- {
- !newBasicInfo.photoURL
- &&
- }
-
-
- {handle}
-
-
- {
- uploadingPhoto &&
- }
- {
- !uploadingPhoto && newBasicInfo.photoURL && 'Upload a new avatar'
- }
- {
- !uploadingPhoto && !newBasicInfo.photoURL && 'Upload a new avatar'
- }
-
-
-
-
-
- );
- }
-}
-
-ImageInput.propTypes = {
- handle: PT.string.isRequired,
- tokenV3: PT.string.isRequired,
- userTraits: PT.array.isRequired,
- profileState: PT.shape().isRequired,
- uploadPhoto: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ImageInput/styles.scss b/src/shared/components/Settings/Profile/ImageInput/styles.scss
deleted file mode 100644
index 9300e69a6d..0000000000
--- a/src/shared/components/Settings/Profile/ImageInput/styles.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import "../../style";
-
-.image {
- @include from-sm-to-lg {
- margin-right: 20px;
- }
-
- .edit-image {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- @include upto-sm {
- flex-direction: row;
- }
-
- p.handle {
- display: none;
-
- @include upto-sm {
- @include roboto-regular;
-
- display: block;
- font-size: 24px;
- font-weight: 400;
- line-height: 35px;
- color: $tc-black;
- margin-bottom: 10px;
- }
- }
-
- .profile-circle {
- margin-top: 10px;
- border-radius: 50%;
- border: 1px solid #d1d3d4;
- width: 120px;
- height: 120px;
- padding: 2px;
-
- @include upto-sm {
- width: 80px;
- height: 80px;
- margin-right: 10px;
- margin-top: 0;
- }
- }
-
- .buttons {
- .file-upload {
- @include roboto-medium;
-
- align-self: center;
- color: $tc-white;
- margin: 0;
- }
-
- .file-delete {
- display: none;
- width: 80px;
- margin-left: 0;
- text-transform: uppercase;
- font-size: 12px;
- min-height: 30px;
- padding: 0;
-
- @include upto-sm {
- display: block;
- margin-left: 6px;
- }
-
- &:hover {
- background: $tc-dark-blue;
- }
- }
- }
- }
-}
diff --git a/src/shared/components/Settings/Profile/Language/List/styles.scss b/src/shared/components/Settings/Profile/Language/List/styles.scss
deleted file mode 100644
index c7e24fd6ca..0000000000
--- a/src/shared/components/Settings/Profile/Language/List/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../../../style";
-
-.container {
- width: 100%;
- background-color: $tc-white;
- padding: 0;
-
- &.active {
- margin-top: 20px;
-
- @include upto-sm {
- margin-top: 0;
- }
- }
-
- ul {
- display: flex;
- flex-direction: column;
- justify-items: center;
-
- li {
- min-height: 90px;
- }
-
- li:last-child {
- border-bottom: 1px solid $tc-gray-10;
- }
- }
-}
diff --git a/src/shared/components/Settings/Profile/Language/styles.scss b/src/shared/components/Settings/Profile/Language/styles.scss
deleted file mode 100644
index fb6805df8a..0000000000
--- a/src/shared/components/Settings/Profile/Language/styles.scss
+++ /dev/null
@@ -1,268 +0,0 @@
-@import "../../style";
-
-.hide {
- display: none;
-}
-
-.language-container {
- display: flex;
- flex-direction: column;
- align-items: left;
-
- @include upto-sm {
- padding-bottom: 0;
- }
-
- h1 {
- @include roboto-regular;
-
- font-size: 28px;
- line-height: 35px;
- font-weight: 400;
- color: $tc-black;
- margin-bottom: 20px;
-
- @include upto-sm {
- display: none;
- }
- }
-
- .sub-title {
- @include roboto-light;
-
- color: #888894;
- line-height: 35px;
- font-weight: 300;
- font-size: 28px;
- margin-bottom: 10px;
-
- &.second {
- margin-top: 50px;
- margin-bottom: 30px;
- }
-
- &.first {
- margin-bottom: 30px;
- }
-
- &.hidden {
- display: none;
- }
-
- @include upto-sm {
- display: none;
- }
- }
-}
-
-.form-container-default {
- @include form-container-default;
-
- input {
- @include roboto-regular;
-
- height: 40px;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
- margin-bottom: 0;
- }
-
- .text-required {
- @include roboto-medium;
-
- font-size: 10px;
- color: $tc-red-110;
- margin-bottom: 5px;
- text-align: right;
- }
-}
-
-.form-container-mobile {
- display: none;
-
- @include upto-sm {
- border: 0;
- border-radius: 0;
- display: flex;
- flex-direction: column;
- padding: 20px 20px 20px 20px;
- background-color: $tc-gray-neutral-light;
- }
-
- p {
- @include roboto-regular;
-
- font-size: 20px;
- line-height: 30px;
- font-weight: 400;
- color: $tc-black;
-
- @include upto-sm {
- margin-bottom: 20px;
- }
- }
-
- .row {
- display: flex;
- flex-direction: row;
- margin-bottom: 20px;
- align-content: space-between;
- width: 100%;
-
- @include upto-sm {
- display: block;
- margin-bottom: 0;
- }
-
- .field {
- display: flex;
- flex-direction: column;
- align-content: space-between;
-
- @include upto-sm {
- display: flex;
- flex-direction: column;
- padding-bottom: 10px;
- }
-
- label {
- @include roboto-medium;
-
- display: block;
- font-size: 12px;
- line-height: 15px;
- font-weight: 500;
- color: $tc-gray-80;
- margin-bottom: 5px;
-
- .text-required {
- font-size: 10px;
- color: $tc-red-110;
- margin-left: 5px;
- }
- }
-
- &.col-1,
- &.col-1-no-padding {
- width: 48%;
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.col-2 {
- width: 26%;
-
- @include upto-sm {
- width: 100%;
- }
- }
- }
-
- div.field:last-child {
- margin-right: 0;
- }
- }
-
- input {
- @include roboto-regular;
-
- height: 36px;
- margin: 0;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
- @include upto-sm {
- margin-top: 5px;
- }
- }
-}
-
-.button-container {
- display: flex;
- justify-content: center;
- align-items: center;
-
- .button-save,
- .button-cancel {
- align-self: center;
-
- @include upto-sm {
- margin-top: 10px;
- }
-
- button,
- a {
- @include roboto-medium;
-
- height: 40px;
- font-size: 15px;
- font-weight: 500;
- margin: 0;
- padding: 0;
- width: 250px;
-
- @include upto-sm {
- width: 156px;
- }
- }
-
- .complete {
- color: $tc-white;
- }
- }
-
- .button-cancel {
- margin-left: 10px;
- }
-}
-
-/*
- * React Select component styling
- */
-.language-container .form-container .row .field :global .Select,
-.language-container .form-container .row .field :global .Select-value span,
-.language-container .form-container .row .field :global .Select-menu-outer,
-.language-container .form-container .row .field :global .Select-placeholder,
-.language-container .form-container .row .field :global .Select-input input {
- color: $tc-gray-80;
- font-size: 15px;
-
- @include upto-sm {
- margin-top: 5px;
- }
-}
-
-.language-container div[class="Select-control"] {
- height: 40px;
-
- div[class="Select-input"] {
- height: 38px;
- }
-
- div[class="Select-placeholder"] {
- height: 38px;
- line-height: 40px !important;
-
- @include upto-sm {
- line-height: 38px !important;
- }
- }
-
- div[class="Select-value"] {
- line-height: 40px !important;
- }
-}
-
-.language-container .form-container .row .field :global .Select-placeholder {
- color: $tc-gray-50;
-}
diff --git a/src/shared/components/Settings/Profile/Organization/List/Item/index.jsx b/src/shared/components/Settings/Profile/Organization/List/Item/index.jsx
deleted file mode 100644
index 7c0302f0d5..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/Item/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * render organization Item
- */
-import React from 'react';
-import PT from 'prop-types';
-import ReactSVG from 'react-svg';
-import moment from 'moment';
-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 {
- organization,
- index,
- onDeleteItem,
- } = props;
-
- return (
-
- );
-}
-
-Item.propTypes = {
- organization: PT.shape().isRequired,
- index: PT.number.isRequired,
- onDeleteItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss b/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
deleted file mode 100644
index 620ab220fa..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import "../../../../style";
-
-.container {
- display: flex;
- flex-direction: row;
- justify-items: center;
- justify-content: space-between;
- height: 100%;
- width: 100%;
- padding: 20px;
- border: 1px solid $tc-gray-10;
- border-bottom: none;
- background-color: $tc-white;
-}
-
-.organization-info {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.organization-icon {
- height: 49px;
- width: 49px;
- margin-right: 18px;
-}
-
-.organization-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;
- word-break: break-all;
-}
-
-.parameter-first-line {
- font-weight: 500;
- color: $tc-black;
- margin-bottom: 10px;
-
- @include upto-sm {
- margin-bottom: 0;
- }
-}
-
-.parameter-second-line {
- color: $tc-gray-50;
- font-weight: 400;
- word-break: break-all;
-
- @include upto-sm {
- display: none;
- }
-}
-
-.parameter-second-line-mobile {
- display: none;
-
- @include upto-sm {
- display: flex;
- flex-direction: column;
- color: $tc-gray-50;
- font-weight: 400;
-
- p {
- word-break: break-all;
- }
- }
-}
-
-.delete {
- display: flex;
- flex-direction: column;
- justify-items: center;
- justify-content: center;
- cursor: pointer;
- outline-style: none;
- margin-left: 10px;
-
- img {
- margin-bottom: 10px;
- }
-
- 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/Profile/Organization/List/index.jsx b/src/shared/components/Settings/Profile/Organization/List/index.jsx
deleted file mode 100644
index fb313c2d29..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/index.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * render Organization list
- */
-import React from 'react';
-import PT from 'prop-types';
-import Item from './Item';
-
-import './styles.scss';
-
-export default function OrganizationList(props) {
- const {
- organizationList,
- onDeleteItem,
- } = props;
-
- return (
-
0 ? 'active' : ''}`}>
-
- {
- organizationList.items.map((organization, index) => (
- -
-
- ))
- }
-
-
- );
-}
-
-OrganizationList.propTypes = {
- organizationList: PT.shape().isRequired,
- onDeleteItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Organization/List/styles.scss b/src/shared/components/Settings/Profile/Organization/List/styles.scss
deleted file mode 100644
index c7e24fd6ca..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../../../style";
-
-.container {
- width: 100%;
- background-color: $tc-white;
- padding: 0;
-
- &.active {
- margin-top: 20px;
-
- @include upto-sm {
- margin-top: 0;
- }
- }
-
- ul {
- display: flex;
- flex-direction: column;
- justify-items: center;
-
- li {
- min-height: 90px;
- }
-
- li:last-child {
- border-bottom: 1px solid $tc-gray-10;
- }
- }
-}
diff --git a/src/shared/components/Settings/Profile/Organization/index.jsx b/src/shared/components/Settings/Profile/Organization/index.jsx
deleted file mode 100644
index 209b004a60..0000000000
--- a/src/shared/components/Settings/Profile/Organization/index.jsx
+++ /dev/null
@@ -1,487 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Organization' 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 } from 'topcoder-react-ui-kit';
-import OrganizationList from './List';
-
-import './styles.scss';
-
-export default class Organization extends ConsentComponent {
- constructor(props) {
- super(props);
- this.onHandleDeleteOrganization = this.onHandleDeleteOrganization.bind(this);
- this.onDeleteOrganization = this.onDeleteOrganization.bind(this);
- this.loadOrganizationTrait = this.loadOrganizationTrait.bind(this);
- this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
- this.onUpdateInput = this.onUpdateInput.bind(this);
- this.onHandleAddOrganization = this.onHandleAddOrganization.bind(this);
- this.onAddOrganization = this.onAddOrganization.bind(this);
- this.updatePredicate = this.updatePredicate.bind(this);
-
- const { userTraits } = props;
- this.state = {
- formInvalid: false,
- errorMessage: '',
- organizationTrait: this.loadOrganizationTrait(userTraits),
- personalizationTrait: this.loadPersonalizationTrait(userTraits),
- newOrganization: {
- name: '',
- sector: '',
- city: '',
- timePeriodFrom: '',
- timePeriodTo: '',
- },
- isMobileView: false,
- screenSM: 767,
- };
- }
-
- componentDidMount() {
- this.updatePredicate();
- window.addEventListener('resize', this.updatePredicate);
- }
-
- componentWillReceiveProps(nextProps) {
- const organizationTrait = this.loadOrganizationTrait(nextProps.userTraits);
- const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
- this.setState({
- organizationTrait,
- personalizationTrait,
- formInvalid: false,
- errorMessage: '',
- newOrganization: {
- name: '',
- sector: '',
- city: '',
- timePeriodFrom: '',
- timePeriodTo: '',
- },
- });
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.updatePredicate);
- }
-
- /**
- * Show User Consent Modal
- * @param e event
- */
- onHandleAddOrganization(e) {
- e.preventDefault();
- const { newOrganization } = this.state;
- if (this.onCheckFormValue(newOrganization)) {
- return;
- }
- this.showConsent(this.onAddOrganization.bind(this));
- }
-
- /**
- * Check form fields value,
- * Invalid value, can not save
- * @param newOrganization object
- */
- onCheckFormValue(newOrganization) {
- let invalid = false;
- let dateInvalid = false;
- let errorMessage = '';
- let dateCount = 0;
- let dateError = '';
- let haveFromDate = false;
- let haveToDate = false;
-
- if (!_.trim(newOrganization.name).length) {
- errorMessage += 'Organization Name, ';
- invalid = true;
- }
-
- if (!_.trim(newOrganization.sector).length) {
- errorMessage += 'Sector, ';
- invalid = true;
- }
-
- if (!_.trim(newOrganization.city).length) {
- errorMessage += 'City, ';
- invalid = true;
- }
-
- if (errorMessage.length > 0) {
- errorMessage += ' cannot be empty';
- }
-
- const fromDate = new Date(newOrganization.timePeriodFrom).getTime();
- const toDate = new Date(newOrganization.timePeriodTo).getTime();
- const nowDate = new Date(moment().format('YYYY-MM-DD')).getTime();
-
- if (_.trim(newOrganization.timePeriodFrom).length > 0) {
- haveFromDate = true;
- }
-
- if (_.trim(newOrganization.timePeriodTo).length > 0) {
- haveToDate = true;
- }
-
- if (fromDate >= nowDate) {
- dateError += 'From Date value should be smaller than current date. ';
- dateInvalid = true;
- }
-
- if (fromDate >= toDate) {
- dateError += 'From Date value should be smaller than To Date value. ';
- dateInvalid = true;
- }
-
- if (!haveFromDate || !haveToDate) {
- if (!_.trim(newOrganization.timePeriodFrom).length) {
- dateError += 'From Date, ';
- dateInvalid = true;
- dateCount += 1;
- }
-
- if (!_.trim(newOrganization.timePeriodTo).length) {
- dateError += 'To Date, ';
- dateInvalid = true;
- dateCount += 1;
- }
- if (dateError.length > 0) {
- dateError = `The ${dateError} ${dateCount > 1 ? 'are' : 'is'} incomplete or ${dateCount > 1 ? 'have' : 'has'} an invalid date.`;
- }
- }
-
- if (errorMessage.length > 0) {
- errorMessage = `${errorMessage}. ${dateError}`;
- } else if (dateError.length > 0) {
- errorMessage = dateError;
- invalid = dateInvalid;
- }
-
- this.setState({ errorMessage, formInvalid: invalid });
- return invalid;
- }
-
- onHandleDeleteOrganization(indexNo) {
- this.showConsent(this.onDeleteOrganization.bind(this, indexNo));
- }
-
- /**
- * Delete organization by index
- * @param indexNo the organization index no
- */
- onDeleteOrganization(indexNo) {
- const { organizationTrait } = this.state;
- const newOrganizationTrait = { ...organizationTrait };
- newOrganizationTrait.traits.data.splice(indexNo, 1);
- this.setState({
- organizationTrait: newOrganizationTrait,
- });
-
- const {
- handle,
- tokenV3,
- updateUserTrait,
- deleteUserTrait,
- } = this.props;
-
- if (newOrganizationTrait.traits.data.length > 0) {
- updateUserTrait(handle, 'organization', newOrganizationTrait.traits.data, tokenV3);
- } else {
- deleteUserTrait(handle, 'organization', tokenV3);
- }
- }
-
- /**
- * Add new organization
- * @param e from submit event
- * @param answer user consent answer value
- */
- onAddOrganization(answer) {
- const { newOrganization, organizationTrait, personalizationTrait } = this.state;
-
- const {
- handle,
- tokenV3,
- updateUserTrait,
- addUserTrait,
- } = this.props;
-
- newOrganization.timePeriodFrom = new Date(newOrganization.timePeriodFrom).getTime();
- newOrganization.timePeriodTo = new Date(newOrganization.timePeriodTo).getTime();
-
- // save organiazation
- if (organizationTrait.traits && organizationTrait.traits.data.length > 0) {
- const newOrganizationTrait = { ...organizationTrait };
- newOrganizationTrait.traits.data.push(newOrganization);
- this.setState({ organizationTrait: newOrganizationTrait });
- updateUserTrait(handle, 'organization', newOrganizationTrait.traits.data, tokenV3);
- } else {
- const newOrganizations = [];
- newOrganizations.push(newOrganization);
- const traits = {
- data: newOrganizations,
- };
- this.setState({ organizationTrait: { traits } });
- addUserTrait(handle, 'organization', newOrganizations, tokenV3);
- }
- const empty = {
- name: '',
- sector: '',
- city: '',
- timePeriodFrom: '',
- timePeriodTo: '',
- };
- this.setState({ newOrganization: empty });
-
- // 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 input value
- * @param e event
- */
- onUpdateInput(e) {
- const { newOrganization: oldOrganization } = this.state;
- const newOrganization = { ...oldOrganization };
- newOrganization[e.target.name] = e.target.value;
- this.setState({ newOrganization });
- }
-
- /**
- * Get organization trait
- * @param userTraits the all user traits
- */
- loadOrganizationTrait = (userTraits) => {
- const trait = userTraits.filter(t => t.traitId === 'organization');
- const organizations = trait.length === 0 ? {} : trait[0];
- return _.assign({}, organizations);
- }
-
- /**
- * 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);
- }
-
- updatePredicate() {
- const { screenSM } = this.state;
- this.setState({ isMobileView: window.innerWidth <= screenSM });
- }
-
- render() {
- const {
- settingsUI,
- } = this.props;
- const {
- organizationTrait,
- isMobileView,
- } = this.state;
- const tabs = settingsUI.TABS.PROFILE;
- const currentTab = settingsUI.currentProfileTab;
- const containerStyle = currentTab === tabs.ORGANIZATION ? '' : 'hide';
- const organizationItems = organizationTrait.traits
- ? organizationTrait.traits.data.slice() : [];
- const { newOrganization, formInvalid, errorMessage } = this.state;
-
- return (
-
- {
- this.shouldRenderConsent() && this.renderConsent()
- }
-
-
- { errorMessage }
-
-
- Organization
-
-
0 ? '' : 'hidden'}`}>
- Your organizations
-
- {
- !isMobileView && organizationItems.length > 0
- && (
-
- )
- }
-
0 ? 'second' : 'first'}`}>
- Add a new organization
-
-
-
-
-
- Add organizations to your list
-
-
-
-
- {
- isMobileView && organizationItems.length > 0
- && (
-
- )
- }
-
-
- );
- }
-}
-
-Organization.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/Profile/Organization/styles.scss b/src/shared/components/Settings/Profile/Organization/styles.scss
deleted file mode 100644
index dac07d0c69..0000000000
--- a/src/shared/components/Settings/Profile/Organization/styles.scss
+++ /dev/null
@@ -1,279 +0,0 @@
-@import "../../style";
-
-.hide {
- display: none;
-}
-
-.organization-container {
- display: flex;
- flex-direction: column;
- align-items: left;
-
- h1 {
- @include roboto-regular;
-
- font-size: 28px;
- line-height: 35px;
- font-weight: 400;
- color: $tc-black;
- margin-bottom: 20px;
-
- @include upto-sm {
- display: none;
- }
- }
-
- .sub-title {
- @include roboto-light;
-
- color: #888894;
- line-height: 35px;
- font-weight: 300;
- font-size: 28px;
- margin-bottom: 10px;
-
- &.second {
- margin-top: 50px;
- margin-bottom: 30px;
- }
-
- &.first {
- margin-bottom: 30px;
- }
-
- &.hidden {
- display: none;
- }
-
- @include upto-sm {
- display: none;
- }
- }
-}
-
-.error-message {
- display: none;
-
- &.active {
- @include roboto-medium;
-
- display: block;
- border-radius: 5px;
- background-color: $tc-red-10;
- color: $tc-red-110;
- font-size: 15px;
- padding: 15px;
- margin-bottom: 15px;
- }
-}
-
-.form-container-default {
- @include form-container-default;
-
- input {
- @include roboto-regular;
-
- height: 40px;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
- margin-bottom: 0;
- }
-
- .text-required {
- @include roboto-medium;
-
- font-size: 10px;
- color: $tc-red-110;
- margin-bottom: 5px;
- text-align: right;
- }
-}
-
-.form-container-mobile {
- display: none;
-
- @include upto-sm {
- border: 0;
- border-radius: 0;
- display: flex;
- flex-direction: column;
- padding: 20px 20px 20px 20px;
- background-color: $tc-gray-neutral-light;
- }
-
- p {
- @include roboto-regular;
-
- font-size: 20px;
- line-height: 30px;
- font-weight: 400;
- color: $tc-black;
-
- @include upto-sm {
- margin-bottom: 20px;
- }
- }
-
- .row {
- display: flex;
- flex-direction: row;
- margin-bottom: 20px;
- align-content: space-between;
-
- @include upto-sm {
- width: 100%;
- display: block;
- margin-bottom: 0;
- }
-
- div:last-child {
- margin-right: 0;
- }
-
- .field {
- display: flex;
- flex-direction: column;
- margin-right: 10px;
-
- @include upto-sm {
- display: block;
- padding-bottom: 10px;
- }
-
- label {
- @include roboto-medium;
-
- font-size: 12px;
- line-height: 15px;
- font-weight: 500;
- color: $tc-gray-80;
- margin-bottom: 5px;
- }
-
- .date-input {
- display: flex;
- align-items: center;
- }
-
- &.col-1 {
- width: 60%;
-
- @include xs-to-lg {
- width: 73%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.col-2 {
- width: 40%;
-
- @include xs-to-lg {
- width: 27%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.city {
- width: 131px;
-
- @include xs-to-lg {
- width: 44%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.date {
- width: 160px;
-
- @include xs-to-lg {
- width: 27%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
- }
- }
-
- input {
- @include roboto-regular;
-
- height: 36px;
- margin: 0;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
- @include upto-sm {
- margin-top: 5px;
- }
- }
-
- div.field:last-child {
- margin-right: 0;
- }
-}
-
-.button-save {
- align-self: center;
-
- @include upto-sm {
- margin-top: 10px;
- }
-
- .complete {
- color: $tc-white;
-
- button {
- @include roboto-medium;
-
- height: 40px;
- font-size: 15px;
- font-weight: 500;
- margin: 0;
- padding: 0 0;
- width: 250px;
-
- @include upto-sm {
- width: 156px;
- }
- }
- }
-}
-
-/*
- * React Select component styling
- */
-.organization-container .form-container .row .field :global .Select,
-.organization-container .form-container .row .field :global .Select-value span,
-.organization-container .form-container .row .field :global .Select-menu-outer,
-.organization-container .form-container .row .field :global .Select-placeholder,
-.organization-container .form-container .row .field :global .Select-input input {
- color: $tc-gray-80;
- font-size: 15px;
-
- @include upto-sm {
- margin-top: 5px;
- }
-}
-
-.organization-container .form-container .row .field :global .Select-placeholder {
- color: $tc-gray-50;
-}
diff --git a/src/shared/components/Settings/Profile/Skills/index.jsx b/src/shared/components/Settings/Profile/Skills/index.jsx
deleted file mode 100644
index d5fe137373..0000000000
--- a/src/shared/components/Settings/Profile/Skills/index.jsx
+++ /dev/null
@@ -1,683 +0,0 @@
-/**
- * Child component of Settings/Profile renders "Skills" section of profile setting page.
- */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-undef */
-import _ from 'lodash';
-import path from 'path';
-import React from 'react';
-import PT from 'prop-types';
-import ReactTouchEvents from 'react-touch-events';
-import requireContext from 'require-context';
-
-import Select from 'components/Select';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import ErrorMessage from 'components/Settings/ErrorMessage';
-import DevFallbackIcon from 'assets/images/profile/skills/id-develop.svg';
-import DesignFallbackIcon from 'assets/images/profile/skills/id-design.svg';
-import DataFallbackIcon from 'assets/images/profile/skills/id-data.svg';
-import VerifiedBadgeIcon from 'assets/images/verified-skill-badge.svg';
-import { isomorphy } from 'topcoder-react-utils';
-import ConfirmationModal from '../../CofirmationModal';
-
-import './styles.scss';
-
-let assets;
-if (isomorphy.isClientSide()) {
- // require.context is only available in webpack bundled client code
- assets = require.context('assets/images/profile/skills', false, /svg/);
-} else {
- assets = requireContext(path.dirname(require.resolve('assets/images/profile/skills/id-data.svg')), false, /svg/);
-}
-
-
-/**
- * Get image.
- * @param {String} imageFile The image file name
- * @returns {Element} React element
- */
-function getImage(imageFile) {
- if (isomorphy.isClientSide()) {
- return
})
;
- }
- const Image = assets(imageFile);
- return
;
-}
-
-/**
- * Check image exists.
- * @param {String} imageFile The image file name
- * @returns {Boolean} True if image exists; false otherwise
- */
-function imageExist(imageFile) {
- if (!assets) {
- return false;
- }
- return (isomorphy.isClientSide() && assets.keys().includes(`./${imageFile}`)) || assets.keys().includes(imageFile);
-}
-
-export default class Skills extends ConsentComponent {
- constructor(props) {
- super(props);
- this.onHandleAddSkill = this.onHandleAddSkill.bind(this);
- this.onHandleDeleteSkill = this.onHandleDeleteSkill.bind(this);
- this.onAddSkill = this.onAddSkill.bind(this);
- this.onUpdateSelect = this.onUpdateSelect.bind(this);
- this.toggleSkill = this.toggleSkill.bind(this);
- this.setPage = this.setPage.bind(this);
- this.updatePredicate = this.updatePredicate.bind(this);
- this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
- this.handleSwipe = this.handleSwipe.bind(this);
- this.lastValidInputPosition = 0;
- this.handleScroll = this.handleScroll.bind(this);
- this.handleInputRef = this.handleInputRef.bind(this);
-
- const { userTraits } = props;
- this.state = {
- formInvalid: false,
- personalizationTrait: this.loadPersonalizationTrait(userTraits),
- userSkills: [],
- selectedSkill: {},
- newSkill: {
- design: [],
- development: [],
- dataScience: [],
- },
- indexList: [],
- currentIndex: 0,
- pageSize: 6,
- totalPage: 0,
- isMobileView: false,
- screenSM: 767,
- deleteSkill: null,
- deleteSelector: null,
- showConfirmation: false,
- inputChanged: false,
- };
- }
-
- componentWillMount() {
- this.processUserSkills(this.props);
- }
-
- componentDidMount() {
- this.updatePredicate();
- window.addEventListener('resize', this.updatePredicate);
- if (this.isIos()) {
- window.addEventListener('scroll', this.handleScroll);
- }
- }
-
- componentDidUpdate() {
- this.removeHover();
- }
-
- componentWillReceiveProps(nextProps) {
- const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
- this.setState({
- personalizationTrait,
- formInvalid: false,
- userSkills: [],
- selectedSkill: {},
- newSkill: {
- design: [],
- development: [],
- dataScience: [],
- },
- indexList: [],
- totalPage: 0,
- });
-
- this.processUserSkills(nextProps);
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.updatePredicate);
- if (this.isIos()) {
- window.removeEventListener('scroll', this.handleScroll);
- }
- }
-
- /**
- * Show User Consent Modal
- * @param e event
- */
- onHandleAddSkill(e) {
- e.preventDefault();
- this.setState({ inputChanged: true });
- const { selectedSkill } = this.state;
- if (!selectedSkill.name) {
- this.setState({
- formInvalid: true,
- });
- return;
- }
-
- this.setState({
- formInvalid: false,
- });
- this.showConsent(this.onAddSkill.bind(this));
- }
-
- /**
- * Update select value
- * @param option selected value
- */
- onUpdateSelect(option) {
- if (option) {
- this.setState({
- selectedSkill: option,
- inputChanged: true,
- });
- }
- }
-
- /**
- * Add new skill
- * @param answer user consent answer value
- */
- onAddSkill(answer) {
- const { newSkill, selectedSkill, personalizationTrait } = this.state;
- const {
- handle,
- tokenV3,
- addUserSkill,
- } = this.props;
-
- if (!selectedSkill.name) {
- this.setState({
- formInvalid: true,
- });
- return;
- }
-
- this.setState({
- formInvalid: false,
- inputChanged: false,
- });
-
- let category = '';
- switch (selectedSkill.categories[0]) {
- case 'develop':
- category = 'development';
- break;
- case 'data_science':
- category = 'dataScience';
- break;
- default:
- category = 'design';
- break;
- }
-
- const index = _.findIndex(newSkill[category], skill => (
- skill.toLowerCase() === selectedSkill.name.toLowerCase()
- ));
-
- if (index > -1) {
- return;
- }
-
- newSkill[category].push(selectedSkill.name);
- 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);
- }
- }
- }
-
- /**
- * Update items to display
- */
- setPage(index) {
- const { userSkills, pageSize } = this.state;
- this.setState({
- indexList: userSkills.slice(index * pageSize, index * pageSize + pageSize),
- currentIndex: index,
- });
- }
-
- /*
- handle swipe in the skills section on mobile
- */
- handleSwipe(direction) {
- const { isMobileView, totalPage, currentIndex } = this.state;
-
- if (isMobileView) {
- switch (direction) {
- case 'right':
- if (currentIndex > 0) {
- this.setPage(currentIndex - 1);
- }
- break;
-
- case 'left':
- if (currentIndex < totalPage - 1) {
- this.setPage(currentIndex + 1);
- }
- break;
-
- default:
- break;
- }
- }
- }
-
- onHandleDeleteSkill(skill, selector) {
- this.setState({
- showConfirmation: true,
- deleteSkill: skill,
- deleteSelector: selector,
- });
- }
-
- /**
- * 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;
- const { pageSize, currentIndex } = this.state;
-
- // 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 development = [];
- const dataScience = [];
- 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].name);
- }
- if (_.some(result[0].categories, category => category.toLowerCase() === 'develop')) {
- development.push(result[0].name);
- }
- if (_.some(result[0].categories, category => category.toLowerCase() === 'data_science')) {
- dataScience.push(result[0].name);
- }
- }
- }
-
- const { newSkill } = this.state;
- newSkill.design = design.length > 0 ? design.slice() : [];
- newSkill.development = development.length > 0 ? development.slice() : [];
- newSkill.dataScience = dataScience.length > 0 ? dataScience.slice() : [];
- const totalPage = Math.ceil(filterUserSkills.length / pageSize);
- this.setState({ newSkill, userSkills: filterUserSkills, totalPage });
- if (currentIndex < totalPage) {
- this.setState({
- indexList:
- filterUserSkills.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize),
- });
- } else {
- this.setState({
- indexList: filterUserSkills.slice(0, pageSize),
- currentIndex: 0,
- });
- }
- }
- }
-
- isIos = () => (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
-
-
- removeHover = () => {
- setTimeout(() => {
- const btn = document.querySelector('a:hover');
- if (btn && this.selectedElement !== btn) {
- const par = btn.parentNode;
- const next = btn.nextSibling;
- par.removeChild(btn);
- setTimeout(() => { par.insertBefore(btn, next); }, 0);
- }
- if (!btn) {
- this.selectedElement = null;
- }
- }, 100);
- }
-
- /**
- * Toggle Skill to delete selected skill
- */
- toggleSkill = (e, skill, selector) => {
- const skillElement = document.querySelector(selector);
- if (this.selectedElement !== skillElement && this.isIos()) {
- this.selectedElement = skillElement;
- return;
- }
- this.selectedElement = skillElement;
-
- e.preventDefault();
- const { newSkill } = this.state;
- const {
- handle,
- tokenV3,
- deleteUserSkill,
- } = this.props;
- let category = '';
- switch (skill.categories[0]) {
- case 'develop':
- category = 'development';
- break;
- case 'data_science':
- category = 'dataScience';
- break;
- default:
- category = 'design';
- break;
- }
- const result = _.remove(newSkill[category], item => (
- item.toLowerCase() !== skill.name.toLowerCase()
- ));
- newSkill[category] = result.length > 0 ? result.slice() : [];
- deleteUserSkill(handle, skill, tokenV3);
- this.setState({
- deleteSkill: null,
- deleteSelector: null,
- showConfirmation: false,
- inputChanged: false,
- });
- };
-
- updatePredicate() {
- const { screenSM } = this.state;
- this.setState({ isMobileView: window.innerWidth <= screenSM });
- }
-
- handleScroll() {
- if (this.lastValidInputPosition === 0) {
- this.lastValidInputPosition = window.scrollY;
- }
- }
-
- handleInputRef(ref) {
- if (!this.isIos()) {
- return;
- }
- this.inputRef = ref;
- const keyPress = () => {
- window.scroll(0, this.lastValidInputPosition);
- };
- this.inputRef.control.onkeydown = keyPress;
- const input = this.inputRef.control.getElementsByTagName('input');
- input[0].onfocus = () => {
- this.lastValidInputPosition = 0;
- };
- }
-
- render() {
- const {
- lookupData,
- settingsUI,
- } = this.props;
-
- const {
- userSkills,
- selectedSkill,
- currentIndex,
- isMobileView,
- totalPage,
- indexList,
- showConfirmation,
- deleteSkill,
- deleteSelector,
- inputChanged,
- formInvalid,
- } = this.state;
-
- const canModifyTrait = !this.props.traitRequestCount;
- const tabs = settingsUI.TABS.PROFILE;
- const currentTab = settingsUI.currentProfileTab;
- const containerStyle = currentTab === tabs.SKILL ? '' : 'hide';
- // All lookup skills
- const allSkills = lookupData.skillTags ? lookupData.skillTags : [];
- const buttons = userSkills.slice(0, totalPage);
- let list = isMobileView ? indexList : 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,
- );
-
- return (
-
- {
- this.shouldRenderConsent() && this.renderConsent()
- }
- {
- showConfirmation && (
-
this.showConsent(this.toggleSkill
- .bind(this, deleteSkill, deleteSelector))}
- onCancel={() => this.setState({
- showConfirmation: false,
- deleteSkill: null,
- deleteSelector: null,
- })}
- name={deleteSelector.name}
- />
- )
- }
- 0 ? '' : 'no-skills'}`}>
-
- Skill
-
-
0 ? '' : 'hidden'}`}>
- Your skills
-
-
0 ? '' : 'hide'}`}>
-
-
- {
- _.map(list, (skill) => {
- let linkStyle = '';
- if (skill.hidden) {
- linkStyle = 'skill-hidden';
- }
- if (skill.isNew) {
- linkStyle += ' new';
- }
-
- let FallbackIcon;
- const category = skill.categories.length > 0 ? skill.categories[0].toUpperCase() : '';
- switch (category) {
- case 'DATA_SCIENCE':
- FallbackIcon = DataFallbackIcon;
- break;
- case 'DESIGN':
- FallbackIcon = DesignFallbackIcon;
- break;
- default:
- FallbackIcon = DevFallbackIcon;
- break;
- }
-
- return (
- -
-
-
- );
- })
- }
-
-
- {
- isMobileView && (
-
0 ? '' : 'hide'}`}>
- {
- buttons.map((item, index) => (
- this.setPage(index)}
- onKeyPress={() => this.setPage(index)}
- role="button"
- styleName={`mobile-button ${currentIndex === index ? 'mobile-active' : ''}`}
- />
- ))
- }
-
- )
- }
-
-
0 ? 'second' : 'first'}`}>
- Add a new skill
-
-
-
-
-
- Add skill to your list
-
-
-
-
0 ? '' : 'no-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(),
- /* eslint-disable react/no-unused-prop-types */
- settingsUI: PT.shape().isRequired,
- userTraits: PT.array.isRequired,
- traitRequestCount: PT.number.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Skills/styles.scss b/src/shared/components/Settings/Profile/Skills/styles.scss
deleted file mode 100644
index 58270a1157..0000000000
--- a/src/shared/components/Settings/Profile/Skills/styles.scss
+++ /dev/null
@@ -1,441 +0,0 @@
-@import "../../style";
-
-.hide {
- display: none;
-}
-
-.skill-container {
- display: flex;
- flex-direction: column;
- align-items: left;
-
- @include upto-sm {
- padding-bottom: 0;
- border-bottom: 1px solid #c3c3c8;
-
- &.no-skills {
- border-bottom: none;
- }
- }
-
- h1 {
- @include roboto-regular;
-
- font-size: 28px;
- line-height: 35px;
- font-weight: 400;
- color: $tc-black;
- margin-bottom: 20px;
-
- @include upto-sm {
- display: none;
- }
- }
-
- .sub-title {
- @include roboto-light;
-
- color: #888894;
- line-height: 35px;
- font-weight: 300;
- font-size: 28px;
- margin-bottom: 10px;
-
- &.second {
- margin-top: 50px;
- margin-bottom: 30px;
- }
-
- &.first {
- margin-top: 10px;
- margin-bottom: 30px;
- }
-
- &.hidden {
- display: none;
- }
-
- @include upto-sm {
- display: none;
- }
- }
-}
-
-.form-container-default {
- @include form-container-default;
-
- input {
- @include roboto-regular;
-
- height: 40px;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
- margin-bottom: 0;
- }
-
- .text-required {
- @include roboto-medium;
-
- font-size: 10px;
- color: $tc-red-110;
- margin-bottom: 5px;
- text-align: right;
- }
-}
-
-.form-container-mobile {
- display: none;
-
- @include upto-sm {
- border: 0;
- border-radius: 0;
- border-bottom: 1px solid #c3c3c8;
- display: flex;
- flex-direction: column;
- padding: 20px 20px 20px 20px;
- background-color: $tc-gray-neutral-light;
-
- &.no-skills {
- margin-bottom: 0;
- border-bottom: none;
- }
- }
-
- p {
- @include roboto-regular;
-
- font-size: 20px;
- line-height: 30px;
- color: $tc-black;
-
- @include upto-sm {
- margin-bottom: 20px;
- }
- }
-
- .row {
- display: flex;
- flex-direction: row;
- margin-bottom: 20px;
- align-content: space-between;
- width: 100%;
-
- @include upto-sm {
- display: block;
- margin-bottom: 0;
- }
-
- .field {
- display: flex;
- flex: 1;
- flex-direction: column;
- margin-right: 10px;
- align-content: space-between;
- width: 100%;
-
- @include upto-sm {
- display: flex;
- flex-direction: column;
- padding-bottom: 10px;
- }
-
- label {
- @include roboto-medium;
-
- font-size: 12px;
- line-height: 15px;
- color: $tc-gray-80;
- margin-bottom: 6px;
-
- .text-required {
- font-size: 10px;
- color: $tc-red-110;
- margin-left: 5px;
- }
- }
-
- .col-1,
- .col-2 {
- // width: auto;
- }
- }
-
- div.field:last-child {
- margin-right: 0;
- }
- }
-}
-
-.button-save {
- align-self: center;
-
- @include upto-sm {
- margin-top: 10px;
- }
-
- button,
- a {
- @include roboto-medium;
-
- height: 40px;
- font-size: 15px;
- margin: 0;
- padding: 0;
- width: 200px;
-
- @include upto-sm {
- width: 156px;
- }
- }
-
- .complete {
- color: $tc-white;
- }
-}
-
-.skill-list {
- ul {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- list-style: none;
- overflow: hidden;
- padding-left: 0;
- margin: 0 -10px;
-
- @include xs-to-lg {
- margin: 0 -15px;
- }
-
- @include upto-sm {
- padding: 30px 22px 0;
- margin: 0 -8px;
- justify-content: center;
- }
- }
-
- li {
- margin: 0 10px 10px;
- border-radius: 6px;
-
- @include xs-to-lg {
- margin: 0 15px 75px;
- }
-
- @include upto-sm {
- margin: 0 8px 75px;
- }
- }
-
- @include upto-sm {
- &.hide {
- display: none;
- }
- }
-}
-
-.skill-tile {
- a {
- cursor: pointer;
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 75px;
- width: 75px;
- }
-
- a:hover {
- text-decoration: none;
- }
-
- .name-wrapper {
- position: relative;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 75px;
- padding-top: 5px;
- padding-bottom: 10px;
- flex-shrink: 0;
-
- .name {
- @include roboto-regular;
-
- font-size: 12px;
- line-height: 15px;
- color: #262628;
- text-align: center;
- }
-
- .verified-badge {
- padding-left: 5px;
- font-size: 0;
- }
- }
-
- .skill-icon {
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #fbfbfb;
- padding: 10px;
- border: 1px solid $tc-gray-20;
- border-radius: 6px;
- height: 75px;
- width: 75px;
- flex-shrink: 0;
-
- .remove-indicator {
- position: absolute;
- display: none;
- top: 20px;
- left: 17px;
-
- @include background-image-size(40px, 50px);
-
- background: url(assets/images/profile/x-mark-red.svg);
- z-index: 100;
- }
-
- .hidden-indicator {
- position: absolute;
- display: none;
- top: 32px;
- left: 31px;
-
- @include background-image-size(36px, 36px);
-
- background: url(assets/images/profile/x-mark-gray.svg);
- }
-
- img {
- width: 48px;
- height: 48px;
-
- @media only screen and (min-width: 768px) {
- width: 60px;
- height: 60px;
- }
- }
- }
-
- .new {
- .skill-icon {
- background-color: #f2faff;
- border: 1px solid #85ccff;
- box-shadow: 0 0 3px #0096ff;
- }
- }
-
- a.skill-hidden {
- img {
- opacity: 0.3;
- }
-
- .hidden-indicator {
- display: block;
- }
-
- .name {
- text-decoration: line-through;
- color: $tc-gray-40;
- }
- }
-
- a:not(.skill-hidden):hover {
- div.skill-icon {
- background-color: #fee8ec;
- border: 1px solid #fcbbc5;
- box-shadow: none;
-
- .remove-indicator {
- display: block;
- }
- }
-
- img {
- opacity: 0.3;
- }
- }
-}
-
-.mobile-buttons {
- display: none;
- margin-top: 10px;
-
- @include upto-sm {
- display: flex;
- justify-content: center;
- margin-bottom: 20px;
-
- &.hide {
- display: none;
- }
- }
-}
-
-.mobile-button {
- background-color: #b3bac5;
- border-radius: 50%;
- cursor: pointer;
- height: 10px;
- margin: 0 6px;
- outline: none;
- width: 10px;
-
- &.mobile-active {
- background-color: #0681ff;
- }
-}
-
-/*
- * React Select component styling
- */
-.skill-container .form-container .row .field :global .Select,
-.skill-container .form-container .row .field :global .Select-value span,
-.skill-container.form-container .row .field :global .Select-menu-outer,
-.skill-container.form-container .row .field :global .Select-placeholder,
-.skill-container .form-container .row .field :global .Select-input input {
- color: $tc-gray-80;
- font-size: 15px;
-
- @include upto-sm {
- margin-top: 5px;
- }
-}
-
-.skill-container div[class="Select-control"] {
- height: 40px;
-
- div[class="Select-input"] {
- height: 38px;
- }
-
- div[class="Select-placeholder"] {
- height: 38px;
- line-height: 40px !important;
-
- @include upto-sm {
- line-height: 38px !important;
- }
- }
-
- div[class="Select-value"] {
- line-height: 40px !important;
- }
-}
-
-.skill-container .form-container .row .field :global .Select-placeholder {
- color: $tc-gray-50;
-
- @include upto-sm {
- margin-top: 5px;
- }
-}
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
deleted file mode 100644
index 5ec1e52cc7..0000000000
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ /dev/null
@@ -1,763 +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 } from 'topcoder-react-ui-kit';
-import DatePicker from 'components/challenge-listing/Filters/DatePicker';
-import ErrorMessage from 'components/Settings/ErrorMessage';
-import { validateStartDate, validateEndDate } from 'utils/settings';
-import ConfirmationModal from '../../CofirmationModal';
-import WorkList from './List';
-
-import './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.updatePredicate = this.updatePredicate.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,
- },
- isMobileView: false,
- screenSM: 767,
- isEdit: false,
- indexNo: null,
- showConfirmation: false,
- };
- }
-
- componentDidMount() {
- this.updatePredicate();
- window.addEventListener('resize', this.updatePredicate);
- }
-
- 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: '',
- });
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.updatePredicate);
- }
-
- /**
- * Show User Consent Modal
- * @param e event
- */
- onHandleAddWork(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;
- 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 {
- 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 (_.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 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);
- }
-
- updatePredicate() {
- const { screenSM } = this.state;
- this.setState({ isMobileView: window.innerWidth <= screenSM });
- }
-
- 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 {
- settingsUI,
- } = this.props;
- const {
- workTrait,
- isMobileView,
- isEdit,
- showConfirmation,
- indexNo,
- formInvalid,
- startDateInvalid,
- startDateInvalidMsg,
- endDateInvalid,
- endDateDisabled,
- endDateInvalidMsg,
- isSubmit,
- } = this.state;
- const tabs = settingsUI.TABS.PROFILE;
- const currentTab = settingsUI.currentProfileTab;
- const containerStyle = currentTab === tabs.WORK ? '' : 'hide';
- 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
-
-
0 ? '' : 'hidden'}`}>
- Your workplaces
-
- {
- !isMobileView && workItems.length > 0
- && (
-
- )
- }
-
0 ? 'second' : 'first'}`}>
- {
- isEdit ? (Edit workplace)
- : (Add a new workplace)
- }
-
-
-
-
-
-
- {
- isEdit ? (Edit workplace to your list)
- : (Add workplace to your list)
- }
-
-
- {
- isEdit && (
-
- )
- }
-
-
-
-
-
-
-
- {
- isEdit ? (Edit Workplace)
- : (Add Workplace)
- }
-
-
- {
- isEdit && (
-
- )
- }
-
-
- {
- isMobileView && workItems.length > 0
- && (
-
- )
- }
-
- );
- }
-}
-
-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,
- settingsUI: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
deleted file mode 100644
index a8e9a790f5..0000000000
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ /dev/null
@@ -1,425 +0,0 @@
-@import "../../style";
-
-$checkbox-size: $base-unit * 4;
-$checkbox-bg-empty: $tc-gray-neutral-light;
-$checkbox-bg-selected: $tc-dark-blue;
-
-.hide {
- display: none;
-}
-
-.error-message {
- display: none;
-
- &.active {
- @include roboto-medium;
-
- display: block;
- border-radius: 5px;
- background-color: $tc-red-10;
- color: $tc-red-110;
- font-size: 15px;
- margin-bottom: 15px;
- line-height: 21px;
- padding: 12px 15px;
- white-space: pre-line;
- }
-}
-
-label {
- @include roboto-medium;
-
- display: block;
- font-size: 12px;
- line-height: 15px;
- font-weight: 500;
- color: $tc-gray-80;
- margin-bottom: 5px;
-
- .text-required {
- font-size: 10px;
- color: $tc-red-110;
- margin-left: 5px;
- }
-}
-
-.tc-checkbox {
- height: $checkbox-size;
- width: $checkbox-size;
- margin-bottom: 125px;
- position: absolute;
- display: inline-block;
- bottom: auto;
-
- @include upto-sm {
- margin-bottom: 10px;
- }
-
- input[type=checkbox] {
- display: none;
- }
-
- label {
- cursor: pointer;
- position: absolute;
- display: inline-block;
- width: $checkbox-size;
- height: $checkbox-size;
- top: 0;
- left: 0;
- border-radius: $corner-radius;
- box-shadow: none;
- border: 1px solid $tc-gray-50;
- background: $tc-gray-neutral-light;
-
- &::after {
- opacity: 0;
- content: '';
- position: absolute;
- width: 13px;
- height: 7px;
- background: transparent;
- top: 4px;
- left: 3px;
- border: 3px solid $tc-dark-blue;
- border-top: none;
- border-right: none;
- transform: rotate(-45deg);
- }
-
- &:hover::after {
- opacity: 0.3;
- }
- }
-
- input[type=checkbox]:checked ~ label {
- background: $checkbox-bg-selected;
- border-color: $checkbox-bg-selected;
- }
-
- input[type=checkbox]:checked + label::after {
- opacity: 1;
- border-color: $tc-white;
- }
-}
-
-.form-container-default {
- @include form-container-default;
-
- input {
- @include roboto-regular;
-
- height: 40px;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
- margin-bottom: 0;
- }
-
- .text-required {
- @include roboto-medium;
-
- font-size: 10px;
- color: $tc-red-110;
- margin-bottom: 5px;
- text-align: right;
- }
-
- .tc-checkbox-label {
- display: inline-block;
-
- @include roboto-regular;
-
- font-size: 13px;
- line-height: $checkbox-size;
- vertical-align: middle;
- margin-left: $base-unit * 6;
- user-select: none;
- cursor: pointer;
- }
-}
-
-.form-container-mobile {
- display: none;
-
- @include upto-sm {
- border: 0;
- border-radius: 0;
- display: flex;
- flex-direction: column;
- padding: 20px 20px 20px 20px;
- background-color: $tc-gray-neutral-light;
- }
-
- p {
- @include roboto-regular;
-
- font-size: 20px;
- line-height: 30px;
- font-weight: 400;
- color: $tc-black;
-
- @include upto-sm {
- margin-bottom: 20px;
- }
- }
-
- .row {
- display: flex;
- flex-direction: row;
- margin-bottom: 20px;
- align-content: space-between;
-
- div:last-child {
- margin-right: 0;
- }
-
- @include upto-sm {
- display: block;
- margin-bottom: 0;
- }
-
- .field {
- display: flex;
- flex-direction: column;
- margin-right: 10px;
- align-content: space-between;
-
- @include upto-sm {
- display: flex;
- flex-direction: column;
- padding-bottom: 10px;
- }
-
- .date-input {
- display: flex;
- align-items: center;
- }
-
- &.col-1,
- &.col-long-text,
- &.col-1-long-text,
- &.col-1-no-padding {
- width: 42%;
-
- @include from-sm-to-lg {
- width: 46%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.col-2 {
- width: 32%;
-
- @include from-sm-to-lg {
- width: 27%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.col-3 {
- width: 26%;
-
- @include from-sm-to-lg {
- width: 27%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.col-city {
- width: 150px;
-
- @include from-sm-to-lg {
- width: 46%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- &.col-date {
- width: 160px;
-
- @include from-sm-to-lg {
- width: 27%;
- }
-
- @include upto-sm {
- width: 100%;
- }
- }
-
- .tc-checkbox-label {
- display: block;
-
- @include roboto-regular;
-
- font-size: 13px;
- line-height: $checkbox-size;
- vertical-align: middle;
- margin-left: $base-unit * 6;
- user-select: none;
- cursor: pointer;
- width: 500px;
- }
-
- &.col-checkbox {
- position: relative;
-
- @include upto-sm {
- top: 25px;
- }
- }
- }
- }
-
- input {
- @include roboto-regular;
-
- height: 36px;
- margin: 0;
- font-size: 15px;
- line-height: 20px;
- font-weight: 400;
- color: $tc-black;
- border: 1px solid $tc-gray-20;
- border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
- @include upto-sm {
- margin-top: 5px;
- }
- }
-}
-
-.work-container {
- display: flex;
- flex-direction: column;
- align-items: left;
-
- h1 {
- @include roboto-regular;
-
- font-size: 28px;
- line-height: 35px;
- font-weight: 400;
- color: $tc-black;
- margin-bottom: 20px;
-
- @include upto-sm {
- display: none;
- }
- }
-
- .sub-title {
- @include roboto-light;
-
- color: #888894;
- line-height: 35px;
- font-weight: 300;
- font-size: 28px;
- margin-bottom: 10px;
-
- &.second {
- margin-top: 50px;
- margin-bottom: 30px;
- }
-
- &.first {
- margin-bottom: 30px;
- }
-
- &.hidden {
- display: none;
- }
-
- @include upto-sm {
- display: none;
- }
- }
-
- :global {
- .SingleDatePickerInput_clearDate {
- height: 35px;
- width: 35px;
- display: flex;
- align-items: center;
- top: calc(50% - 5px);
- }
-
- .SingleDatePickerInput__showClearDate {
- padding-right: 0;
- }
- }
-}
-
-.button-container {
- display: flex;
- justify-content: center;
- align-items: center;
-
- .button-save,
- .button-cancel {
- align-self: center;
-
- @include upto-sm {
- margin-top: 30px;
- }
-
- button,
- a {
- @include roboto-medium;
-
- height: 40px;
- font-size: 15px;
- font-weight: 500;
- margin: 0;
- padding: 0;
- width: 250px;
-
- @include upto-sm {
- width: 156px;
- }
- }
-
- .complete {
- color: $tc-white;
- }
- }
-
- .button-cancel {
- margin-left: 10px;
- }
-}
-
-/*
- * React Select component styling
- */
-.work-container .form-container .row .field :global .Select,
-.devices-container .form-container .row .field :global .Select-value span,
-.work-container .form-container .row .field :global .Select-menu-outer,
-.work-container .form-container .row .field :global .Select-placeholder,
-.work-container .form-container .row .field :global .Select-input input {
- color: $tc-gray-80;
- font-size: 15px;
-
- @include upto-sm {
- margin-top: 5px;
- }
-}
-
-.work-container .form-container .row .field :global .Select-placeholder {
- color: $tc-gray-50;
-}
diff --git a/src/shared/components/Settings/Profile/index.jsx b/src/shared/components/Settings/Profile/index.jsx
deleted file mode 100644
index 63a7aad2a1..0000000000
--- a/src/shared/components/Settings/Profile/index.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Child component of Settings/Profile renders setting page for profile.
- */
-
-import React from 'react';
-import PT from 'prop-types';
-import _ from 'lodash';
-
-import Accordion from 'components/Settings/Accordion';
-import SideBar from 'components/Settings/SideBar';
-import InfoIcon from 'assets/images/profile/sideicons/basicinfo.svg';
-import LanguageIcon from 'assets/images/profile/sideicons/language.svg';
-import EducationIcon from 'assets/images/profile/sideicons/education.svg';
-import WorkIcon from 'assets/images/profile/sideicons/work.svg';
-import OrganizationIcon from 'assets/images/profile/sideicons/organization.svg';
-import SkillIcon from 'assets/images/profile/sideicons/skill.svg';
-import HobbyIcon from 'assets/images/profile/sideicons/hobby.svg';
-import CommunityIcon from 'assets/images/profile/sideicons/community.svg';
-import ErrorWrapper from 'components/Settings/ErrorWrapper';
-import BasicInfo from './BasicInfo';
-import Language from './Language';
-import Education from './Education';
-import Work from './Work';
-import Skills from './Skills';
-import Community from './Community';
-import Organization from './Organization';
-import Hobby from './Hobby';
-import ComingSoon from '../ComingSoon';
-import { SCREEN_SIZE } from '../constants';
-
-
-import './styles.scss';
-
-class Profile extends React.Component {
- constructor(props) {
- super(props);
-
- const hash = decodeURIComponent(_.get(props, 'location.hash', '').substring(1));
- this.tablink = hash.replace('-', ' ');
- const { toggleProfileSideTab } = this.props;
- if (this.tablink) {
- toggleProfileSideTab(this.tablink);
- }
- this.state = {
- isMobileView: false,
- };
- this.clearNotifiation = this.clearNotifiation.bind(this);
- this.updatePredicate = this.updatePredicate.bind(this);
- }
-
- componentDidMount() {
- this.clearNotifiation();
- this.updatePredicate();
- window.addEventListener('resize', this.updatePredicate);
- }
-
- componentDidUpdate(prevProps) {
- const { settingsUI: { currentProfileTab } } = this.props;
- if (prevProps.settingsUI.currentProfileTab !== currentProfileTab) {
- window.location.hash = currentProfileTab.replace(' ', '-');
- this.clearNotifiation();
- }
- }
-
- componentWillUnmount() {
- this.clearNotifiation();
- window.removeEventListener('resize', this.updatePredicate);
- }
-
- clearNotifiation() {
- const { clearToastrNotification } = this.props;
- if (clearToastrNotification) {
- clearToastrNotification();
- }
- }
-
- updatePredicate() {
- this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
- }
-
- render() {
- const { isMobileView } = this.state;
- const {
- settingsUI: { currentProfileTab, TABS },
- toggleProfileSideTab,
- } = this.props;
- const tabs = TABS.PROFILE;
- const names = Object.keys(tabs).map(key => tabs[key]);
- const currentTab = this.tablink || currentProfileTab;
-
- const icons = {
- 'basic info':
,
- language:
,
- education:
,
- work:
,
- organization:
,
- skills:
,
- hobbies:
,
- communities:
,
- };
-
- const renderTabContent = (tab) => {
- switch (tab) {
- case 'basic info':
- return
;
- case 'language':
- return
;
- case 'education':
- return
;
- case 'work':
- return
;
- case 'skills':
- return
;
- case 'communities':
- return
;
- case 'organization':
- return
;
- case 'hobbies':
- return
;
- default:
- return
;
- }
- };
- return (
-
- {
- isMobileView && (
-
- )
- }
-
-
-
-
-
- {
- !isMobileView && (
-
-
- { renderTabContent(currentTab) }
-
-
- )
- }
-
- );
- }
-}
-
-Profile.propTypes = {
- settingsUI: PT.shape().isRequired,
- toggleProfileSideTab: PT.func.isRequired,
- clearToastrNotification: PT.func.isRequired,
- location: PT.shape().isRequired,
-};
-
-export default Profile;
diff --git a/src/shared/components/Settings/Profile/styles.scss b/src/shared/components/Settings/Profile/styles.scss
deleted file mode 100644
index a5895a1eaf..0000000000
--- a/src/shared/components/Settings/Profile/styles.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../style";
-
-.profile-container {
- display: flex;
- flex-direction: row;
- box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
-
- @include upto-sm {
- padding: 0;
- }
-
- .mobile-view {
- display: none;
-
- @include from-sm-to-lg {
- display: none;
- }
-
- @include upto-sm {
- display: block;
- width: 100%;
- }
- }
-
- .col-bar {
- width: 250px;
- background-color: #fafafb;
- padding: 30px;
- border-bottom-left-radius: 6px;
-
- @include from-sm-to-lg {
- width: 90px;
- padding-right: 30px;
- margin-right: 0;
- }
-
- @include upto-sm {
- display: none;
- }
- }
-
- .col-content {
- flex: 1;
- padding: 30px 80px;
-
- @include upto-sm {
- display: none;
- }
- }
-}
diff --git a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
new file mode 100644
index 0000000000..747073bdb8
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
@@ -0,0 +1,75 @@
+/**
+ * About You Form
+ * Profile Settings Page
+ */
+import React from 'react';
+import PT from 'prop-types';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
+import FormInputTextArea from 'components/Settings/FormInputTextArea';
+
+import '../styles.scss';
+
+const AboutYou = (props) => {
+ const {
+ canModifyTrait,
+ newProfileInfo,
+ newBasicInfo,
+ onUpdateInput,
+ } = props;
+
+ return (
+
+ );
+};
+
+AboutYou.defaultProps = {
+ canModifyTrait: false,
+ newProfileInfo: {},
+ newBasicInfo: {},
+};
+
+AboutYou.propTypes = {
+ canModifyTrait: PT.bool,
+ newProfileInfo: PT.shape(),
+ newBasicInfo: PT.shape(),
+ onUpdateInput: PT.func.isRequired,
+};
+
+export default AboutYou;
diff --git a/src/shared/components/Settings/Profile/Hobby/List/Item/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
similarity index 55%
rename from src/shared/components/Settings/Profile/Hobby/List/Item/index.jsx
rename to src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
index 199f87e8bc..23e6795188 100644
--- a/src/shared/components/Settings/Profile/Hobby/List/Item/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
@@ -5,6 +5,8 @@ import _ from 'lodash';
import React from 'react';
import PT from 'prop-types';
import ReactSVG from 'react-svg';
+import Tooltip from 'components/Tooltip';
+
import { isomorphy } from 'topcoder-react-utils';
@@ -31,6 +33,18 @@ export default function Item(props) {
return true;
};
+ const deleteTip = (
+
+ );
+
+ const editTip = (
+
+ );
+
return (
@@ -51,30 +65,39 @@ export default function Item(props) {
-