From 874e5d3abcaffb7e232e180528244552c202b89f Mon Sep 17 00:00:00 2001 From: diazz Date: Fri, 11 Nov 2022 18:02:53 +0700 Subject: [PATCH 01/11] fix: side navigation doesn't work on mobile --- src/shared/containers/timeline-wall/index.jsx | 10 +++------- .../timeline-events/events/event-item/index.jsx | 6 ++++-- .../timeline-wall/timeline-events/events/index.jsx | 3 +++ 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index 33d25e08d0..2d80549ffe 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -42,7 +42,7 @@ function TimelineWallContainer(props) { const role = 'Admin User'; const authToken = _.get(auth, 'tokenV3'); const isMobile = useMediaQuery({ - query: '(max-device-width: 768px)', + query: '(max-width: 768px)', }); useEffect(() => { @@ -89,7 +89,7 @@ function TimelineWallContainer(props) { let date = moment(`${currentYear}-${currentMonth + 1}`).format('YYYY-MM'); while (!target) { - target = document.getElementById(`${moment(date).year()}-${(moment(date).month()).toString().padStart(2, '0')}`); + target = document.getElementById(`${isMobile ? 'mobile-' : 'desktop-'}${moment(date).year()}-${(moment(date).month()).toString().padStart(2, '0')}`); if (target || !moment(date).isValid() || moment(date).year() > maxYear) { break; @@ -100,11 +100,7 @@ function TimelineWallContainer(props) { if (target) { const yOffset = -10; const coordinate = target.getBoundingClientRect().top + window.pageYOffset + yOffset; - if (isMobile) { - setTimeout(target.scrollTo(), 100); - } else { - window.scrollTo({ top: coordinate, behavior: 'smooth' }); - } + window.scrollTo({ top: coordinate, behavior: 'smooth' }); } else { window.scrollTo({ top: 0, behavior: 'smooth' }); } diff --git a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx index c12b4c74c0..617770d2fa 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx @@ -16,7 +16,7 @@ import './styles.scss'; import { DEFAULT_AVATAR_URL } from '../../../../../utils/url'; function EventItem({ - className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars, + className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars, idPrefix, }) { const [isExpanded, setIsExpanded] = useState(false); const [showModalPhoto, setShowModalPhoto] = useState(false); @@ -33,7 +33,7 @@ function EventItem({ 'color-red': eventItem.color === 'red', 'color-purple': eventItem.color === 'purple', })} - id={moment(eventItem.eventDate).format('YYYY-MM')} + id={`${idPrefix}${moment(eventItem.eventDate).format('YYYY-MM')}`} > {isLeft ? null : (
)} {isLeft ? null : ()} @@ -137,6 +137,7 @@ EventItem.defaultProps = { }, isAdmin: false, userAvatars: {}, + idPrefix: '', }; /** @@ -149,6 +150,7 @@ EventItem.propTypes = { isAdmin: PT.bool, userAvatars: PT.shape(), deleteEvent: PT.func.isRequired, + idPrefix: PT.string, }; export default EventItem; diff --git a/src/shared/containers/timeline-wall/timeline-events/events/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/index.jsx index a53e0409ad..784f6d4ed1 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/events/index.jsx @@ -67,6 +67,7 @@ function Events({ userAvatars={userAvatars} isAdmin={isAdmin} deleteEvent={deleteEvent} + idPrefix="desktop-" /> ))}
@@ -84,6 +85,7 @@ function Events({ userAvatars={userAvatars} isAdmin={isAdmin} deleteEvent={deleteEvent} + idPrefix="desktop-" /> ))} @@ -101,6 +103,7 @@ function Events({ userAvatars={userAvatars} isAdmin={isAdmin} deleteEvent={deleteEvent} + idPrefix="mobile-" /> ))} From fdc09560b2e46c0497610b2b1bf9f93d8aaf6930 Mon Sep 17 00:00:00 2001 From: diazz Date: Fri, 11 Nov 2022 22:25:14 +0700 Subject: [PATCH 02/11] fix: handle errors from backend properly --- src/shared/containers/timeline-wall/index.jsx | 5 +++++ .../timeline-wall/modal-event-add/index.jsx | 11 ++++++++--- .../timeline-wall/timeline-events/add-event/index.jsx | 5 ++++- .../timeline-wall/timeline-events/index.jsx | 4 ++++ src/shared/reducers/timelineWall.js | 4 +++- src/shared/services/timelineWall.js | 8 ++++++-- 6 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index 2d80549ffe..c8c829fd05 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -37,6 +37,7 @@ function TimelineWallContainer(props) { userAvatars, pendingApprovals, uploading, + uploadResult, } = props; const role = 'Admin User'; @@ -199,6 +200,7 @@ function TimelineWallContainer(props) { getAvatar={getAvatar} userAvatars={userAvatars} uploading={uploading} + uploadResult={uploadResult} deleteEvent={deleteEvent} /> @@ -231,6 +233,7 @@ TimelineWallContainer.defaultProps = { isAdmin: false, loading: false, uploading: false, + uploadResult: '', events: [], userAvatars: {}, pendingApprovals: [], @@ -244,6 +247,7 @@ TimelineWallContainer.propTypes = { isAdmin: PT.bool, loading: PT.bool, uploading: PT.bool, + uploadResult: PT.string, events: PT.arrayOf(PT.shape()), loadUserDetails: PT.func.isRequired, createNewEvent: PT.func.isRequired, @@ -261,6 +265,7 @@ const mapStateToProps = state => ({ isAdmin: state.timelineWall.isAdmin, loading: state.timelineWall.loading, uploading: state.timelineWall.uploading, + uploadResult: state.timelineWall.uploadResult, events: state.timelineWall.events, userAvatars: state.timelineWall.userAvatars, pendingApprovals: state.timelineWall.pendingApprovals, diff --git a/src/shared/containers/timeline-wall/modal-event-add/index.jsx b/src/shared/containers/timeline-wall/modal-event-add/index.jsx index 41eda7aaff..c4cde0570c 100644 --- a/src/shared/containers/timeline-wall/modal-event-add/index.jsx +++ b/src/shared/containers/timeline-wall/modal-event-add/index.jsx @@ -6,7 +6,11 @@ import LoadingIndicator from 'components/LoadingIndicator'; import style from './styles.scss'; -function ModalEventAdd({ onClose, isAdmin, uploading }) { +function ModalEventAdd({ + onClose, isAdmin, uploading, uploadResult, +}) { + const successMessage = !isAdmin ? 'Thank you! Your event was submitted for review. You’ll receive an email once the review is completed' + : 'Thank you! Your event was added to the Timeline Wall.'; return ( { - !isAdmin ? 'Thank you! Your event was submitted for review. You’ll receive an email once the review is completed' - : 'Thank you! Your event was added to the Timeline Wall.' + uploadResult || successMessage } ) @@ -56,6 +59,7 @@ ModalEventAdd.defaultProps = { onClose: () => { }, isAdmin: false, uploading: false, + uploadResult: '', }; /** @@ -65,6 +69,7 @@ ModalEventAdd.propTypes = { onClose: PT.func, isAdmin: PT.bool, uploading: PT.bool, + uploadResult: PT.string, }; export default ModalEventAdd; diff --git a/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx b/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx index fc8f790e2a..0d2e1dc20e 100644 --- a/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx @@ -18,7 +18,7 @@ import ModalEventAdd from '../../modal-event-add'; import style from './styles.scss'; function AddEvents({ - className, isAuthenticated, createNewEvent, isAdmin, onDoneAddEvent, uploading, + className, isAuthenticated, createNewEvent, isAdmin, onDoneAddEvent, uploading, uploadResult, }) { const [formData, setFormData] = useState({ eventName: '', @@ -197,6 +197,7 @@ function AddEvents({ }} isAdmin={isAdmin} uploading={uploading} + uploadResult={uploadResult} /> ) : null } @@ -212,6 +213,7 @@ AddEvents.defaultProps = { isAuthenticated: false, isAdmin: false, uploading: false, + uploadResult: '', }; /** @@ -224,6 +226,7 @@ AddEvents.propTypes = { isAdmin: PT.bool, onDoneAddEvent: PT.func.isRequired, uploading: PT.bool, + uploadResult: PT.string, }; export default AddEvents; diff --git a/src/shared/containers/timeline-wall/timeline-events/index.jsx b/src/shared/containers/timeline-wall/timeline-events/index.jsx index ffb87e8166..582a74d478 100644 --- a/src/shared/containers/timeline-wall/timeline-events/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/index.jsx @@ -22,6 +22,7 @@ function TimelineEvents({ userAvatars, onDoneAddEvent, uploading, + uploadResult, deleteEvent, }) { return ( @@ -34,6 +35,7 @@ function TimelineEvents({ isAdmin={isAdmin} onDoneAddEvent={onDoneAddEvent} uploading={uploading} + uploadResult={uploadResult} /> {events.length ? ( { }, body: form, }); + if (res.status >= 300) { + const result = await res.json(); + return result.message || 'There was an error during add event.'; + } - return res.json(); + return ''; } catch (error) { - return []; + return 'There was an error during add event.'; } }; From e2e74bddd23baedde188ade84672983153c31946 Mon Sep 17 00:00:00 2001 From: diazz Date: Fri, 11 Nov 2022 23:31:03 +0700 Subject: [PATCH 03/11] fix: forums link --- .../images/timeline-wall/icon-arrow-right.svg | 3 ++ src/shared/containers/timeline-wall/index.jsx | 28 +++++++++++- .../containers/timeline-wall/styles.scss | 45 +++++++++++++++++-- 3 files changed, 71 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/timeline-wall/icon-arrow-right.svg diff --git a/src/assets/images/timeline-wall/icon-arrow-right.svg b/src/assets/images/timeline-wall/icon-arrow-right.svg new file mode 100644 index 0000000000..c4bff53b27 --- /dev/null +++ b/src/assets/images/timeline-wall/icon-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index c8c829fd05..ca3a1d6da3 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -1,9 +1,10 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import PT from 'prop-types'; import { connect } from 'react-redux'; import TopBanner from 'assets/images/timeline-wall/top-banner.png'; import TopBannerMobile from 'assets/images/timeline-wall/top-banner-mobile.png'; import IconCheveronDownBlue from 'assets/images/timeline-wall/cheveron-down-blue.svg'; +import IconArrowRight from 'assets/images/timeline-wall/icon-arrow-right.svg'; import { deleteEventById, approveEventById, rejectEventById } from 'services/timelineWall'; import cn from 'classnames'; import moment from 'moment'; @@ -134,10 +135,23 @@ function TimelineWallContainer(props) { }; const sortedEvents = _.orderBy(events, ['eventDate'], ['desc']); + const shouldShowDiscuss = useMemo(() => { + if (tab !== 0) { + return false; + } + if (isAdmin) { + return !isMobile; + } + return true; + }, [isAdmin, isMobile, tab]); return (
-
+
top-banner top-banner @@ -167,6 +181,16 @@ function TimelineWallContainer(props) {
) : (

Topcoder Timeline Wall

)} + {shouldShowDiscuss ? ( + + ) : null} +
diff --git a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx index 617770d2fa..cd77aedc18 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx @@ -84,7 +84,13 @@ function EventItem({
avatar - {eventItem.createdBy} + {eventItem.createdBy} +   •  {moment(eventItem.eventDate).format('MMM DD, YYYY')}
{isAdmin ? ( From 5fb311b3e2632e9642857c97f1b7a6bfe82fd0a3 Mon Sep 17 00:00:00 2001 From: diazz Date: Sat, 12 Nov 2022 11:05:26 +0700 Subject: [PATCH 06/11] fix: change new event labels --- .../timeline-wall/timeline-events/add-event/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx b/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx index 0d2e1dc20e..35ab83d0fb 100644 --- a/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx @@ -86,7 +86,7 @@ function AddEvents({ id="eventName" name="eventName" type="text" - placeholder="In 38 characters or less, write event name here" + placeholder="Enter event title" onChange={(e) => { setFormData({ ...formData, @@ -122,7 +122,7 @@ function AddEvents({ id="description" name="description" type="text" - placeholder="In 240 characters or less, tell the Topcoder community a bit about yourself" + placeholder="Tell your community about this memory" onChange={(e) => { setFormData({ ...formData, From de13eb38f0ecf8a927145f04247bab724e0b5ca5 Mon Sep 17 00:00:00 2001 From: diazz Date: Tue, 15 Nov 2022 09:16:03 +0700 Subject: [PATCH 07/11] fix: dropdown options for rejection of submission --- config/default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/default.js b/config/default.js index 604fe4a34b..4e5d7fd135 100644 --- a/config/default.js +++ b/config/default.js @@ -465,7 +465,7 @@ module.exports = { PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com', DICE_VERIFY_URL: 'https://accounts-auth0.topcoder-dev.com', TIMELINE: { - REJECTION_EVENT_REASONS: ['Duplicate Event'], + REJECTION_EVENT_REASONS: ['Duplicate Event', 'Violates the Topcoder terms', 'Inaccurate or Invalid'], ALLOWED_FILETYPES: ['image/jpeg', 'image/png', 'video/mp4', 'video/x-msvideo', 'video/webm'], }, }; From 0eb9250345ef0d852d9635c726351f8835ed9466 Mon Sep 17 00:00:00 2001 From: Igor Goroshko Date: Tue, 15 Nov 2022 18:56:32 +0700 Subject: [PATCH 08/11] fixed config property name TIMELNE_EVENT_API => TIMELINE_WALL_API --- config/default.js | 2 +- config/production.js | 2 +- src/shared/services/timelineWall.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/config/default.js b/config/default.js index 4e5d7fd135..cc33b54f29 100644 --- a/config/default.js +++ b/config/default.js @@ -167,7 +167,7 @@ module.exports = { SUBDOMAIN_PROFILE_CONFIG: [{ groupId: '20000000', communityId: 'wipro', communityName: 'topgear', userProfile: 'https://topgear-app.wipro.com/user-details', }], - TIMELNE_EVENT_API: 'https://api.topcoder-dev.com/v5/timeline-wall', + TIMELINE_WALL_API: 'http://localhost:3001/v5/timeline-wall', }, /* Information about Topcoder user groups can be cached in various places. diff --git a/config/production.js b/config/production.js index 1d94a3fab5..1774e20c4e 100644 --- a/config/production.js +++ b/config/production.js @@ -62,7 +62,7 @@ module.exports = { }, EMAIL_VERIFY_URL: 'http://www.topcoder.com/settings/account/changeEmail', THRIVE_FEED: 'https://topcoder.com/api/feeds/thrive', - TIMELNE_EVENT_API: 'https://api.topcoder.com/v5/timeline-wall', + TIMELINE_WALL_API: 'https://api.topcoder.com/v5/timeline-wall', }, /* Filestack configuration for uploading Submissions * These are for the production back end */ diff --git a/src/shared/services/timelineWall.js b/src/shared/services/timelineWall.js index 3816cef950..3e0e6c8e47 100644 --- a/src/shared/services/timelineWall.js +++ b/src/shared/services/timelineWall.js @@ -4,7 +4,7 @@ import { logger } from 'topcoder-react-lib'; import _ from 'lodash'; import { DEFAULT_AVATAR_URL } from '../utils/url'; -const baseUrl = config.URL.TIMELNE_EVENT_API; +const baseUrl = config.URL.TIMELINE_WALL_API; const v5ApiUrl = config.API.V5; /** From 3084810339640ca2790e2b94d6bc84a8557b627f Mon Sep 17 00:00:00 2001 From: diazz Date: Wed, 16 Nov 2022 09:11:22 +0700 Subject: [PATCH 09/11] fix: approvals number should increase automatically --- .../__snapshots__/JoinCommunity.jsx.snap | 1 + config/default.js | 1 + .../components/LoadingIndicator/index.jsx | 10 ++++- src/shared/containers/timeline-wall/index.jsx | 39 ++++++++++++++++--- src/shared/reducers/timelineWall.js | 5 +-- 5 files changed, 45 insertions(+), 11 deletions(-) diff --git a/__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap b/__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap index 0d9dc3b3dd..653f417362 100644 --- a/__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap +++ b/__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap @@ -65,6 +65,7 @@ exports[`Matches shallow shapshot 2`] = ` Joining... ( +const LoadingIndicator = ({ theme, className }) => ( ( ); +LoadingIndicator.defaultProps = { + className: '', +}; + LoadingIndicator.propTypes = { theme: PT.shape().isRequired, + className: PT.string, }; export default themr('LoadingIndicator', style)(LoadingIndicator); diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index c8c829fd05..351d35bb64 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import PT from 'prop-types'; import { connect } from 'react-redux'; import TopBanner from 'assets/images/timeline-wall/top-banner.png'; @@ -9,6 +9,7 @@ import cn from 'classnames'; import moment from 'moment'; import { useMediaQuery } from 'react-responsive'; import _ from 'lodash'; +import { config } from 'topcoder-react-utils'; import timelineActions from 'actions/timelineWall'; import LoadingIndicator from 'components/LoadingIndicator'; import TimelineEvents from './timeline-events'; @@ -16,8 +17,11 @@ import PendingApprovals from './pending-approvals'; import './styles.scss'; + +const FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL = _.get(config, 'TIMELINE.FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL', 0); function TimelineWallContainer(props) { const [tab, setTab] = useState(0); + const fetchingApprovalsInterval = useRef(null); const [showRightFilterMobile, setShowRightFilterMobile] = useState(false); const [selectedFilterValue, setSelectedFilterValue] = useState({ year: 0, @@ -36,6 +40,7 @@ function TimelineWallContainer(props) { getAvatar, userAvatars, pendingApprovals, + loadingApprovals, uploading, uploadResult, } = props; @@ -55,9 +60,25 @@ function TimelineWallContainer(props) { }, []); useEffect(() => { - if (authToken && isAdmin && !pendingApprovals.length) { + if (fetchingApprovalsInterval.current) { + clearInterval(fetchingApprovalsInterval.current); + fetchingApprovalsInterval.current = null; + } + if (authToken && isAdmin) { getPendingApprovals(authToken); + if (FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL) { + fetchingApprovalsInterval.current = setInterval(() => { + getPendingApprovals(authToken); + }, FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL); + } } + + return () => { + if (fetchingApprovalsInterval.current) { + clearInterval(fetchingApprovalsInterval.current); + fetchingApprovalsInterval.current = null; + } + }; }, [isAdmin]); useEffect(() => { @@ -72,7 +93,7 @@ function TimelineWallContainer(props) { }, [events]); useEffect(() => { - if ((pendingApprovals || []).length) { + if (pendingApprovals.length) { _.uniqBy(pendingApprovals, 'createdBy').forEach((eventItem) => { const photoURL = _.get(userAvatars, eventItem.createdBy); if (!photoURL) { @@ -205,8 +226,10 @@ function TimelineWallContainer(props) { /> { - loading ? ( - + loadingApprovals ? ( + ) : ( ({ }, isAdmin: state.timelineWall.isAdmin, loading: state.timelineWall.loading, + loadingApprovals: state.timelineWall.loadingApprovals + && !(state.timelineWall.pendingApprovals || []).length, uploading: state.timelineWall.uploading, uploadResult: state.timelineWall.uploadResult, events: state.timelineWall.events, userAvatars: state.timelineWall.userAvatars, - pendingApprovals: state.timelineWall.pendingApprovals, + pendingApprovals: state.timelineWall.pendingApprovals || [], }); function mapDispatchToProps(dispatch) { diff --git a/src/shared/reducers/timelineWall.js b/src/shared/reducers/timelineWall.js index 0658fc73f1..be117c61fe 100644 --- a/src/shared/reducers/timelineWall.js +++ b/src/shared/reducers/timelineWall.js @@ -60,8 +60,7 @@ function onEventsDone(state, { payload }) { function onPendingApprovalInit(state) { return { ...state, - loading: true, - pendingApprovals: [], + loadingApprovals: true, }; } @@ -74,7 +73,7 @@ function onPendingApprovalDone(state, { payload }) { const approvals = _.isArray(payload) ? payload : []; return { ...state, - loading: false, + loadingApprovals: false, pendingApprovals: approvals, }; } From ac525596fa2623a326d562b6dcfd0bdea9ca2870 Mon Sep 17 00:00:00 2001 From: Igor Goroshko Date: Wed, 16 Nov 2022 19:57:55 +0700 Subject: [PATCH 10/11] Update Timeline Wall backend API for DEV deployment --- config/default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/default.js b/config/default.js index 1e9854263c..2a06bb3054 100644 --- a/config/default.js +++ b/config/default.js @@ -167,7 +167,7 @@ module.exports = { SUBDOMAIN_PROFILE_CONFIG: [{ groupId: '20000000', communityId: 'wipro', communityName: 'topgear', userProfile: 'https://topgear-app.wipro.com/user-details', }], - TIMELINE_WALL_API: 'http://localhost:3001/v5/timeline-wall', + TIMELINE_WALL_API: 'https://api.topcoder-dev.com/v5/timeline-wall', }, /* Information about Topcoder user groups can be cached in various places. From 8c4680b1a51c6ec88d3fe66797dc70b4d9c0ac7f Mon Sep 17 00:00:00 2001 From: Luiz Ricardo Rodrigues Date: Wed, 16 Nov 2022 19:11:30 -0300 Subject: [PATCH 11/11] Revert "Prod 2905" --- .../Settings/__snapshots__/index.jsx.snap | 16 - src/assets/images/PayPal_logo_gray.svg | 8 - src/assets/images/Payoneer_log_gray.svg | 4 - src/assets/images/Western_Union_Logo_gray.svg | 13 - src/assets/images/arrow-right-green.svg | 3 - src/assets/images/icon-back-arrow.svg | 3 - src/assets/images/icon-dollar.svg | 3 - src/assets/images/icon-speed.svg | 3 - src/assets/images/icon-world.svg | 3 - src/assets/images/selected-payment.svg | 3 - src/shared/actions/page/settings.js | 1 - src/shared/components/ProfilePage/styles.scss | 2 +- .../Settings/Payment/EmailDetails/index.jsx | 47 --- .../Settings/Payment/EmailDetails/styles.scss | 43 -- .../Settings/Payment/PaymentInfo/index.jsx | 35 -- .../Settings/Payment/PaymentInfo/styles.scss | 64 --- .../Settings/Payment/PaymentMethod/index.jsx | 158 ------- .../Payment/PaymentMethod/styles.scss | 392 ------------------ .../Payment/PaymentProvider/index.jsx | 221 ---------- .../Payment/PaymentProvider/styles.scss | 327 --------------- .../components/Settings/Payment/constants.js | 123 ------ .../components/Settings/Payment/index.jsx | 63 --- .../components/Settings/Payment/styles.scss | 119 ------ .../Settings/Preferences/List/data.jsx | 10 + src/shared/components/Settings/constants.js | 1 - src/shared/components/Settings/index.jsx | 12 - src/shared/routes/Settings/Router.jsx | 2 +- src/shared/utils/url.js | 23 +- 28 files changed, 13 insertions(+), 1689 deletions(-) delete mode 100644 src/assets/images/PayPal_logo_gray.svg delete mode 100644 src/assets/images/Payoneer_log_gray.svg delete mode 100644 src/assets/images/Western_Union_Logo_gray.svg delete mode 100644 src/assets/images/arrow-right-green.svg delete mode 100644 src/assets/images/icon-back-arrow.svg delete mode 100644 src/assets/images/icon-dollar.svg delete mode 100644 src/assets/images/icon-speed.svg delete mode 100644 src/assets/images/icon-world.svg delete mode 100644 src/assets/images/selected-payment.svg delete mode 100644 src/shared/components/Settings/Payment/EmailDetails/index.jsx delete mode 100644 src/shared/components/Settings/Payment/EmailDetails/styles.scss delete mode 100644 src/shared/components/Settings/Payment/PaymentInfo/index.jsx delete mode 100644 src/shared/components/Settings/Payment/PaymentInfo/styles.scss delete mode 100644 src/shared/components/Settings/Payment/PaymentMethod/index.jsx delete mode 100644 src/shared/components/Settings/Payment/PaymentMethod/styles.scss delete mode 100644 src/shared/components/Settings/Payment/PaymentProvider/index.jsx delete mode 100644 src/shared/components/Settings/Payment/PaymentProvider/styles.scss delete mode 100644 src/shared/components/Settings/Payment/constants.js delete mode 100644 src/shared/components/Settings/Payment/index.jsx delete mode 100644 src/shared/components/Settings/Payment/styles.scss diff --git a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap index a9d8e5dde4..73f0c5c1d3 100644 --- a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap @@ -48,10 +48,6 @@ exports[`renders account setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, - Object { - "link": "payment", - "title": "Payment", - }, ] } /> @@ -809,10 +805,6 @@ exports[`renders preferences setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, - Object { - "link": "payment", - "title": "Payment", - }, ] } /> @@ -1567,10 +1559,6 @@ exports[`renders profile setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, - Object { - "link": "payment", - "title": "Payment", - }, ] } /> @@ -2331,10 +2319,6 @@ exports[`renders tools setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, - Object { - "link": "payment", - "title": "Payment", - }, ] } /> diff --git a/src/assets/images/PayPal_logo_gray.svg b/src/assets/images/PayPal_logo_gray.svg deleted file mode 100644 index 8ed6edcecc..0000000000 --- a/src/assets/images/PayPal_logo_gray.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/assets/images/Payoneer_log_gray.svg b/src/assets/images/Payoneer_log_gray.svg deleted file mode 100644 index 13a13fa00f..0000000000 --- a/src/assets/images/Payoneer_log_gray.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/images/Western_Union_Logo_gray.svg b/src/assets/images/Western_Union_Logo_gray.svg deleted file mode 100644 index 8cb8fcaf8c..0000000000 --- a/src/assets/images/Western_Union_Logo_gray.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/assets/images/arrow-right-green.svg b/src/assets/images/arrow-right-green.svg deleted file mode 100644 index 2c28fcca4a..0000000000 --- a/src/assets/images/arrow-right-green.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/icon-back-arrow.svg b/src/assets/images/icon-back-arrow.svg deleted file mode 100644 index 4231f4c3da..0000000000 --- a/src/assets/images/icon-back-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/icon-dollar.svg b/src/assets/images/icon-dollar.svg deleted file mode 100644 index ac96c7b159..0000000000 --- a/src/assets/images/icon-dollar.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/icon-speed.svg b/src/assets/images/icon-speed.svg deleted file mode 100644 index 6d782e8fa3..0000000000 --- a/src/assets/images/icon-speed.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/icon-world.svg b/src/assets/images/icon-world.svg deleted file mode 100644 index a1d05cdfe7..0000000000 --- a/src/assets/images/icon-world.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/selected-payment.svg b/src/assets/images/selected-payment.svg deleted file mode 100644 index e53d566850..0000000000 --- a/src/assets/images/selected-payment.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/actions/page/settings.js b/src/shared/actions/page/settings.js index 51c47cb86a..c143e9a322 100644 --- a/src/shared/actions/page/settings.js +++ b/src/shared/actions/page/settings.js @@ -11,7 +11,6 @@ export const TABS = { TOOLS: 'tools', ACCOUNT: 'account', PREFERENCES: 'preferences', - PAYMENT: 'payment', }; export default createActions({ diff --git a/src/shared/components/ProfilePage/styles.scss b/src/shared/components/ProfilePage/styles.scss index f08347904a..c31eb78e7f 100644 --- a/src/shared/components/ProfilePage/styles.scss +++ b/src/shared/components/ProfilePage/styles.scss @@ -66,7 +66,7 @@ } .modal-container { - width: 1200px; + width: 1232px; min-height: 700px; max-width: 1232px; border-radius: 8px; diff --git a/src/shared/components/Settings/Payment/EmailDetails/index.jsx b/src/shared/components/Settings/Payment/EmailDetails/index.jsx deleted file mode 100644 index aed513288e..0000000000 --- a/src/shared/components/Settings/Payment/EmailDetails/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable react/no-danger */ -import React from 'react'; -import PT from 'prop-types'; - -import { PAYMENT_METHOD_DETAILS_MAP, PAYMENT_METHOD_MAP } from '../constants'; -import './styles.scss'; - -/** - * This component shows the steps to be done to - * subscribe to this payment method - * @returns - */ -const EmailDetails = ({ paymentMethod }) => { - const { instructions } = PAYMENT_METHOD_DETAILS_MAP[paymentMethod]; - - return ( -
-
- Do you have your {PAYMENT_METHOD_MAP[paymentMethod]} account details? - Great! -
-
    - {instructions.map(instruction => ( -
  • - -
      - {instruction.children - && instruction.children.map(child => ( -
    • - ))} -
    -
    • - ))} -
-
- ); -}; - -EmailDetails.defaultProps = { - paymentMethod: '', -}; - -EmailDetails.propTypes = { - paymentMethod: PT.string, -}; - -export default EmailDetails; diff --git a/src/shared/components/Settings/Payment/EmailDetails/styles.scss b/src/shared/components/Settings/Payment/EmailDetails/styles.scss deleted file mode 100644 index 7ad4f8fc38..0000000000 --- a/src/shared/components/Settings/Payment/EmailDetails/styles.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import '~styles/mixins'; - -.email-details { - padding: 16px; - background-color: $color-orange-25; - margin-right: 32px; - border-radius: 8px; - margin-bottom: 16px; - - @include xs-to-sm { - margin-right: 0; - } - - .title { - @include barlow; - - font-size: 18px; - line-height: 22px; - font-weight: 600; - margin-bottom: 24px; - color: $tco-black; - text-transform: uppercase; - } - - .instructions { - list-style: disc; - list-style-position: outside; - padding-left: 23px; - - li { - @include roboto-regular; - - font-size: 16px; - line-height: 24px; - font-weight: 400; - color: $tco-black; - - a { - color: #2e55b9; - } - } - } -} diff --git a/src/shared/components/Settings/Payment/PaymentInfo/index.jsx b/src/shared/components/Settings/Payment/PaymentInfo/index.jsx deleted file mode 100644 index 9cc54633d8..0000000000 --- a/src/shared/components/Settings/Payment/PaymentInfo/index.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import cn from 'classnames'; -import PT from 'prop-types'; - -import './styles.scss'; - -const PaymentInfo = ({ - icon, label, value, isLastChild, -}) => ( -
-
-
{icon}
-
{label}
-
-
-
{value}
-
-
-); - -PaymentInfo.defaultProps = { - icon: null, - label: '', - value: '', - isLastChild: false, -}; - -PaymentInfo.propTypes = { - icon: PT.node, - label: PT.string, - value: PT.string, - isLastChild: PT.bool, -}; - -export default PaymentInfo; diff --git a/src/shared/components/Settings/Payment/PaymentInfo/styles.scss b/src/shared/components/Settings/Payment/PaymentInfo/styles.scss deleted file mode 100644 index 13427c3b3d..0000000000 --- a/src/shared/components/Settings/Payment/PaymentInfo/styles.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import '~styles/mixins'; - -.payment-info { - display: flex; - flex-direction: column; - margin-bottom: 22px; - - .header { - display: flex; - margin-left: -4px; - margin-top: -6px; - } - - .icon-wrapper { - margin-right: 5px; - - svg { - width: 13px; - height: 13px; - } - } - - .label { - font-weight: 700; - font-size: 12px; - - @include roboto-bold; - - line-height: 16px; - color: $color-teal-140; - letter-spacing: 1px; - text-transform: uppercase; - - @include xs-to-sm { - font-size: 10px; - line-height: 12px; - } - } - - .content { - display: flex; - - .value { - font-weight: 400; - font-size: 16px; - - @include roboto-regular; - - line-height: 24px; - color: $tco-black; - margin-top: 4px; - margin-left: -4px; - - @include xs-to-sm { - font-size: 14px; - line-height: 24px; - } - } - } - - &.last-child { - margin-bottom: 0; - } -} diff --git a/src/shared/components/Settings/Payment/PaymentMethod/index.jsx b/src/shared/components/Settings/Payment/PaymentMethod/index.jsx deleted file mode 100644 index 757000a40a..0000000000 --- a/src/shared/components/Settings/Payment/PaymentMethod/index.jsx +++ /dev/null @@ -1,158 +0,0 @@ -/* eslint-disable react/no-danger */ -import React, { useState } from 'react'; -import PT from 'prop-types'; - -import { Modal, Button } from 'topcoder-react-ui-kit'; - -import IconClose from 'assets/images/icon-close-green.svg'; -import Checkbox from 'components/GUIKit/Checkbox'; -import EmailDetails from '../EmailDetails'; - -import { - PAYMENT_METHOD_MAP, - PAYMENT_METHOD_DETAILS_MAP, - PAYMENT_PROVIDER, -} from '../constants'; - -import styles from './styles.scss'; - -const PaymentMethod = ({ - paymentMethod, - show, - handleClose, - handleConfirm, - handle, - setSelectedMode, - setPaymentService, -}) => { - const [emailedDetails, setEmailedDetails] = useState(false); - - - const onChange = () => { - setEmailedDetails(!emailedDetails); - }; - - const { important, conditions, url } = PAYMENT_METHOD_DETAILS_MAP[ - paymentMethod - ]; - - const onVisitPaymentProvider = () => { - window.open(url, '_blank'); - }; - - const onConfirm = () => { - localStorage.setItem( - `${handle}_${PAYMENT_PROVIDER}`, - paymentMethod, - ); - setPaymentService(paymentMethod); - handleConfirm(); - handleClose(); - setSelectedMode(true); - }; - - return ( - -
-
-
-
-
-
- {`connect your ${PAYMENT_METHOD_MAP[paymentMethod]} account`} -
-
-
- -
-
-
- -
-
- -
- - - Yes, I have emailed my details to{' '} - - support@topcoder.com - - -
-
-
-
{`Create ${PAYMENT_METHOD_MAP[paymentMethod]} account`}
-

{important}

-
-
- -
-
-
-
- -
-
- -
-
-
-
-
- - ); -}; - - -PaymentMethod.defaultProps = { - paymentMethod: '', - show: false, - handle: '', - handleClose: () => {}, - handleConfirm: () => {}, - setPaymentService: () => {}, - setSelectedMode: () => {}, -}; - -PaymentMethod.propTypes = { - paymentMethod: PT.string, - show: PT.bool, - handle: PT.string, - handleClose: PT.func, - handleConfirm: PT.func, - setSelectedMode: PT.func, - setPaymentService: PT.func, -}; - -export default PaymentMethod; diff --git a/src/shared/components/Settings/Payment/PaymentMethod/styles.scss b/src/shared/components/Settings/Payment/PaymentMethod/styles.scss deleted file mode 100644 index 69e8a6294b..0000000000 --- a/src/shared/components/Settings/Payment/PaymentMethod/styles.scss +++ /dev/null @@ -1,392 +0,0 @@ -@import '~styles/mixins'; - -.page-wrapper { - padding: 0; - - /* rc checkbox custom style */ - :global { - .rc-checkbox.payment-service-rc-checkbox { - display: flex; - margin-top: 3px; - - .rc-checkbox-inner { - width: 24px !important; - height: 24px !important; - } - - &.rc-checkbox-checked { - .rc-checkbox-inner { - background-color: #0ab88a; - border-color: #0ab88a; - } - } - - .rc-checkbox-inner::after { - left: 7px !important; - top: 0 !important; - width: 8px !important; - height: 16px !important; - } - } - } - - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0 0 8px 8px; - text-transform: uppercase; - - @include barlow-condensed; - - font-size: 17px; - font-weight: 500; - color: $tco-black; - } - - .payment-method { - @include xs-to-sm { - padding: 16px 8px 16px 8px; - } - - .page-content { - margin: 0; - - @include xs-to-sm { - padding: 16px 19px; - margin: 0; - } - - .page-header { - display: flex; - margin-bottom: 24px; - - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - - .payment-service-title { - @include barlow; - - margin: 0; - font-size: 22px; - line-height: 26px; - font-weight: 500; - text-transform: uppercase; - - @include xs-to-sm { - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - - @include xs-to-sm { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - - .user-name { - margin-top: 30px; - font-size: 16px; - line-height: 26px; - - @include roboto-regular; - - color: $tco-black; - - @include xs-to-sm { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .container { - display: flex; - margin-top: 25px; - margin-bottom: 29px; - - @include xs-to-sm { - flex-direction: column; - margin-bottom: 32px; - } - - .left-pane { - width: 34.5%; - display: flex; - border-right: 2px solid $profile-border-gray; - flex-direction: column; - - @include xs-to-sm { - width: auto; - border-right: 0; - border-bottom: 2px solid $profile-border-gray; - padding-bottom: 32px; - } - - .form-input-checkbox { - display: flex; - align-items: flex-start; - margin-top: 17px; - - .label { - font-size: 16px; - line-height: 26px; - margin-left: 10px; - - @include roboto-regular; - - font-weight: 400; - - .support-email { - color: #2e55b9; - } - } - } - } - - .right-pane { - display: flex; - flex: 1; - flex-direction: column; - margin-left: 32px; - - @include xs-to-sm { - margin-left: 0; - } - - .title { - @include barlow; - - font-weight: 600; - font-size: 18px; - line-height: 22px; - text-transform: uppercase; - - @include xs-to-sm { - font-weight: 600; - font-size: 16px; - line-height: 20px; - margin: 24px 0; - color: $tco-black; - } - } - - .important-text { - @include roboto-regular; - - font-weight: 700; - font-size: 16px; - line-height: 24px; - color: $color-red-120; - margin-bottom: 16px; - margin-top: 22px; - - @include xs-to-sm { - margin-top: 0; - font-size: 14px; - line-height: 22px; - } - } - - .condition-text { - p { - @include roboto-regular; - - font-weight: 400; - font-size: 16px; - color: $tco-black; - margin-bottom: 16px; - line-height: 24px; - } - } - - .visit-button-wrapper { - margin-top: 12px; - - .visit-button-desktop-disabled { - @include roboto-bold; - - font-weight: 700; - font-size: 13px; - line-height: 24px; - height: 32px !important; - padding: 4px 20px !important; - border-radius: 24px; - color: #767676 !important; - background: #fff !important; - border: 2px solid #f4f4f4 !important; - text-transform: uppercase; - } - - .visit-button-desktop { - @include roboto-bold; - - font-weight: 700; - font-size: 13px; - height: 32px !important; - padding: 4px 20px !important; - border-radius: 24px; - line-height: 24px; - text-transform: uppercase; - border: 1px solid #137d60 !important; - background-color: #137d60 !important; - color: #fff !important; - - &:hover { - border: 1px solid #137d60 !important; - background: #137d60 !important; - color: #fff !important; - opacity: 0.8; - } - } - - .visit-button-mobile { - @include roboto-bold; - - font-weight: 700; - font-size: 14px; - padding: 14px 20px; - height: 40px; - border-radius: 25px; - display: none; - - @include xs-to-sm { - height: 32px; - padding: 10px 15px; - font-size: 12px; - display: flex; - } - } - } - } - } - - .footer { - margin-top: 18px; - margin-bottom: 32px; - - @include xs-to-sm { - flex-direction: row; - align-items: center !important; - justify-content: center !important; - margin-top: 32px; - } - - .footer-back-button { - padding: 18px 30px 18px 34px; - border-radius: 25px; - height: 48px; - - @include xs-to-sm { - height: 40px; - padding: 14px 14px 14px 24px; - } - - .footer-back-button-text { - margin-left: 9px; - font-size: 20px; - font-weight: 700; - - @include roboto-bold; - - @include xs-to-sm { - font-size: 14px; - line-height: 12px; - } - } - } - - .confirm-button-wrapper { - flex: 1; - display: flex; - justify-content: flex-end; - - @include xs-to-sm { - margin-bottom: 0; - } - - .footer-confirm-button { - height: 48px; - font-size: 16px !important; - line-height: 24px !important; - color: $tc-white !important; - font-weight: 700; - background: #137d60 !important; - border-radius: 50px !important; - padding: 12px 24px !important; - text-transform: uppercase; - - @include roboto-bold; - - @include xs-to-sm { - height: 40px; - padding: 14px 20px; - font-size: 14px; - line-height: 12px; - } - } - } - } - } - - .page-divider { - border-bottom: 2px solid $profile-border-gray; - } - } -} - -@media screen and (max-width: 425px) { - .footer { - .footer-back-button { - padding: 14px 24px 14px 24px !important; - } - } -} - -.modal-inner-no-max-width { - max-width: none !important; -} - -.modal-overlay { - background: #000; -} - -.modal-container { - width: 1200px; - min-height: 596px; - max-width: 1232px; - border-radius: 8px; - padding: 32px 32px 0 32px; - gap: 24px; - overflow-y: scroll; - - @include xs-to-md { - width: 100%; - max-width: 100% !important; - height: 100% !important; - max-height: 100% !important; - padding: 24px 16px 48px 16px; - } -} - -.icon { - width: 14.4px; - height: 14.4px; - margin-right: 5px; - margin-top: 4px; - cursor: pointer !important; -} diff --git a/src/shared/components/Settings/Payment/PaymentProvider/index.jsx b/src/shared/components/Settings/Payment/PaymentProvider/index.jsx deleted file mode 100644 index 232b50d744..0000000000 --- a/src/shared/components/Settings/Payment/PaymentProvider/index.jsx +++ /dev/null @@ -1,221 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import cn from 'classnames'; -import PT from 'prop-types'; - -import { Button } from 'topcoder-react-ui-kit'; - -import ChevronDownGreen from 'assets/images/chevron-down-green.svg'; -import IconDollar from 'assets/images/icon-dollar.svg'; -import IconSpeed from 'assets/images/icon-speed.svg'; -import IconWorld from 'assets/images/icon-world.svg'; -import SelectedPaymentLogo from 'assets/images/selected-payment.svg'; -import PayoneerLogo from 'assets/images/Payoneer_log_gray.svg'; -import PayPalLogo from 'assets/images/PayPal_logo_gray.svg'; -import WesternUnionLogo from 'assets/images/Western_Union_Logo_gray.svg'; -import PaymentInfo from '../PaymentInfo'; -import PaymentMethod from '../PaymentMethod'; - -import { PAYMENT_METHODS, PAYMENT_METHOD_MAP, PAYMENT_PROVIDER } from '../constants'; - -import styles from './styles.scss'; - - -const PaymentProvider = ({ handleConfirm, handle }) => { - const [collapse, setCollapse] = useState(true); - const [selectedMethod, setSelectedMethod] = useState(''); - const [paymentService, setPaymentService] = useState( - localStorage.getItem(`${handle}_${PAYMENT_PROVIDER}`), - ); - const [selectedMode, setSelectedMode] = useState(false); - - useEffect(() => { - if (paymentService) { - setSelectedMode(true); - } - }, []); - - const onRemove = () => { - localStorage.removeItem(`${handle}_${PAYMENT_PROVIDER}`); - setPaymentService(null); - setSelectedMethod(''); - }; - - return ( -
-
-

PAYMENT PROVIDER

- - setCollapse(!collapse)} - > - - -
- - { - collapse && ( -
-
- Topcoder is partnered with several payment - providers to send payments to our community members. - Once a provider is set up, payments will be routed to your selected payment - provider at the completion of work. - Currently, members can be paid through one of the following providers: - Payoneer®, PayPal®, or Western Union. - -
- - { - selectedMode ? ( -
-
-
- -
-
-

Payment Provider Detail Submitted

- -

- You have submitted account details to use {paymentService} as your - payment service provider. - Processing may take up to 48 hours. -

-
-
- -
- -
- -
- ) : null - } - - { - paymentService && !selectedMode ? ( -
-
-

- - Your currently selected payment provider is:{' '} - {PAYMENT_METHOD_MAP[paymentService]} - -

- -

- Note: You have chosen to change your - selected payment provider. - This change may take up to 48 hours to be reflected in your account. -

-
- - -
- ) : null - } - - { - !selectedMode ? ( -
-
- {PAYMENT_METHODS.map(method => ( -
-
- {PAYMENT_METHOD_MAP[method.name] === 'Payoneer' && ( - - )} - {PAYMENT_METHOD_MAP[method.name] === 'PayPal' && } - {PAYMENT_METHOD_MAP[method.name] === 'Western Union' && ( - - )} -
-
-
- } - label="Fees" - value={method.fees} - isLastChild={false} - /> - } - label="countries" - value={`Available in ${method.countries}+ countries`} - isLastChild={false} - /> - } - label="Speed" - value={`Up to ${method.speed} Business Day`} - isLastChild - /> -
-
- -
-
- ))} - - {selectedMethod && ( - { - setSelectedMethod(''); - }} - handleConfirm={() => { - handleConfirm(); - }} - paymentService={paymentService} - setPaymentService={setPaymentService} - setSelectedMode={setSelectedMode} - /> - )} -
-
- The information above is gathered from each payment provider's - respective website. We encourage you to do any additional information - gathering you see fit prior to making a payment provider decision. -
-
- ) : null - } -
- ) - } -
- ); -}; - -PaymentProvider.defaultProps = { - handleConfirm: () => {}, - handle: '', -}; - -PaymentProvider.propTypes = { - handleConfirm: PT.func, - handle: PT.string, -}; - -export default PaymentProvider; diff --git a/src/shared/components/Settings/Payment/PaymentProvider/styles.scss b/src/shared/components/Settings/Payment/PaymentProvider/styles.scss deleted file mode 100644 index b4cc35b6fd..0000000000 --- a/src/shared/components/Settings/Payment/PaymentProvider/styles.scss +++ /dev/null @@ -1,327 +0,0 @@ -@import '~styles/mixins'; - -.platform-banner { - background-color: $tc-white; - border-radius: 4px; - width: 100%; - padding: 32px; - - @include xs-to-sm { - padding: 24px 16px; - } -} - -.banner-title { - @include xs-to-sm { - font-size: 18px; - } -} - -.header { - display: flex; - justify-content: space-between; - - h3 { - @include barlow-bold; - - font-size: 22px; - line-height: 26px; - font-weight: 600; - color: $tco-black; - } - - .icon { - margin-top: 5px; - margin-right: 6px; - cursor: pointer; - - &.up { - transform: rotate(180deg); - } - } -} - -.content { - margin-top: 33px; - - .description { - @include roboto-regular; - - font-size: 16px; - line-height: 24px; - font-weight: 400; - color: $tco-black; - padding-right: calc(38% - 18px); - - @include sm-to-md { - padding-right: 77px; - } - - @include xs-to-sm { - width: unset; - font-size: 14px; - padding-right: 0; - } - } -} - -.selected-payment-logo { - width: 64px; - height: 64px; - min-height: 64px; - border-radius: 4px; - min-width: 64px; - background: linear-gradient(264.69deg, #198807 2.17%, #017c6d 97.49%); - align-self: center; - justify-content: center; - display: flex; - margin-right: 20px; - flex-direction: column; - - @include xs-to-sm { - align-self: flex-start; - margin-bottom: 12px; - } - - svg { - margin: 0 auto; - } -} - -.payment-logo { - height: 40px; - margin-top: -4px; - - svg { - height: 56px; - - @include xs-to-sm { - width: -webkit-fill-available; - } - } -} - -.payment-methods { - display: flex; - margin-top: 32px; - flex-wrap: wrap; - - @include xs-to-sm { - flex-direction: column; - margin-top: 16px; - } - - .payment-method-card { - background-color: $tc-white; - border: 1px solid $listing-light-gray; - border-radius: 8px; - padding: 30px; - display: flex; - min-width: 31%; - max-width: 31%; - flex: 1; - margin-right: 2%; - flex-direction: column; - - svg { - max-width: 68vw !important; - } - - @include xs-to-md { - margin-bottom: 32px; - } - - @include xs-to-sm { - margin-right: 0; - margin-bottom: 16px; - min-width: unset; - max-width: 100% !important; - } - - .button-wrapper { - margin-top: 18px; - margin-left: -10px; - - @include xs-to-sm { - margin-top: 24px; - } - } - - .content-wrapper { - flex-direction: column; - } - } - - .payment-method-card:last-child { - margin-right: 0; - - @include xs-to-sm { - margin-bottom: 0; - } - } -} - -.info-text { - font-family: Roboto, sans-serif; - font-size: 14px; - line-height: 22px; - margin-top: 24px; - margin-bottom: 24px; -} - -.divider { - margin-top: 36px; - margin-bottom: 30px; - height: 2px; - border-radius: 1px; - background: $profile-border-gray; -} - -.payment-method-card .button { - @include roboto-bold; - - font-size: 14px; - font-weight: 700; - line-height: 24px; - height: 40px; - color: #137d60 !important; - border: 2px solid #137d60 !important; - border-radius: 24px !important; - text-transform: uppercase; - padding: 5px 17px !important; - letter-spacing: 0.008em; - - &:hover { - background-image: unset !important; - color: #219174 !important; - border: 2px solid #219174 !important; - } - - &:focus, - &:focus-within, - &:focus-visible { - outline: 0 !important; - box-shadow: none !important; - color: #219174 !important; - border: 2px solid #219174 !important; - } - - @include xs-to-sm { - height: 32px; - } -} - -.desc-container { - display: flex; - justify-content: space-between; - margin-top: 32px; - margin-bottom: 32px; - - @include xs-to-sm { - display: flex; - flex-direction: column; - } -} - -.desc { - @include roboto-regular; - - font-size: 16px; - line-height: 24px; - - strong { - @include roboto-bold; - - font-weight: 700; - } - - @include xs-to-sm { - margin-bottom: 24px; - font-size: 14px; - } -} - -.desc-button { - @include roboto-bold; - - padding: 4px 20px !important; - border: 2px solid #137d60 !important; - border-radius: 24px !important; - background: #fff !important; - font-weight: 700; - font-size: 13px; - color: #137d60 !important; - line-height: 24px; - white-space: nowrap; - height: 32px; - - &:hover { - background-image: unset !important; - color: #219174 !important; - border: 2px solid #219174 !important; - } - - @include xs-to-sm { - height: 32px; - width: 162px; - margin: 0; - } -} - -.selectedWrapper { - display: flex; - justify-content: space-between; - border: 1px solid #d4d4d4; - border-radius: 8px; - background: #fff; - height: 96px; - margin-top: 32px; - padding: 24px 10px; - - .selected-left { - display: flex; - - @include xs-to-sm { - flex-direction: column; - } - } - - @include xs-to-md { - min-height: 96px; - height: unset; - } - - @include xs-to-sm { - height: auto; - flex-direction: column; - } -} - -.payment-wrapper { - @include xs-to-sm { - width: 87%; - } -} - -.payment-title { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 20px; - letter-spacing: 0.5px; -} - -.payment-desc { - @include roboto-regular; - - font-weight: 400; - font-size: 16px; - line-height: 20px; - letter-spacing: 0.5px; - color: #767676; - - @include xs-to-sm { - margin-bottom: 24px; - } -} diff --git a/src/shared/components/Settings/Payment/constants.js b/src/shared/components/Settings/Payment/constants.js deleted file mode 100644 index f1c5f161bf..0000000000 --- a/src/shared/components/Settings/Payment/constants.js +++ /dev/null @@ -1,123 +0,0 @@ -export const PAYMENT_PROVIDER = 'payment_provider'; - -/** - * List of payment methods supported - */ -export const PAYMENT_METHODS = [ - { - name: 'payoneer', - fees: '$0–$3 + Currency Conversion Rates May Apply', - countries: 150, - speed: 1, - }, - { - name: 'paypal', - fees: '3.49% + an international fee (non US) + a fixed fee depending upon currency', - countries: 200, - speed: 1, - }, - { - name: 'western-union', - fees: '$8 per transaction (your bank may charge additional fees)', - countries: 200, - speed: 3, - }, -]; - -/** - * Map of payment method to the display name - */ -export const PAYMENT_METHOD_MAP = { - payoneer: 'Payoneer', - paypal: 'PayPal', - 'western-union': 'Western Union', -}; - -/** - * The payment method details map - */ -export const PAYMENT_METHOD_DETAILS_MAP = { - payoneer: { - instructions: [ - { - label: - "Email support@topcoder.com", - }, - { - label: 'Subject Line: Topcoder Payment Provider', - }, - { - label: 'In the email include:', - children: [ - 'Topcoder handle (your username when registering)', - 'Payoneer Customer ID', - 'Payoneer Email Address', - ], - }, - ], - conditions: ` -

You can elect to receive payments through Payoneer either to your Payoneer prepaid MasterCard or by using their Global Bank Transfer service. The Payoneer Bank Transfer Service offers a local bank transfer option (where available) and a wire transfer option. Certain fees may apply.

- `, - important: - 'Important: After you create an account, please email support@topcoder.com with the information outlined', - url: 'https://www.payoneer.com', - }, - paypal: { - instructions: [ - { - label: - "Email support@topcoder.com", - }, - { - label: 'Subject Line: Topcoder Payment Provider', - }, - { - label: 'In the email include:', - children: [ - 'Topcoder handle (your username when registering)', - 'PayPal Email Address', - ], - }, - { - label: - 'Please DO NOT provide a link to your PayPal account. We only need your PayPal email address.', - }, - ], - conditions: ` -

You can elect to receive payments deposited directly to your PayPal account. Certain fees may apply.

- `, - important: - 'Important: After you create an account, please email support@topcoder.com with the information outlined', - url: 'https://www.paypal.com/cgi-bin/webscr?cmd=_registration-run', - }, - 'western-union': { - instructions: [ - { - label: - "Email support@topcoder.com", - }, - { - label: 'Subject Line: Topcoder Payment Provider', - }, - { - label: 'In the email include:', - children: [ - 'Topcoder handle (your username when registering)', - 'Topcoder Email Address (the email address you used to register)', - ], - }, - ], - conditions: ` -

You can elect to be paid via wire transfer through Western Union. There is a US $8 charge for each payment processed by Western Union, which will be deducted from the amount owed to you. You can elect to be paid in either USD or your local currency. However, Western Union does not disclose it’s fees to convert to your local currency so we recommend you choose to receive USD. You may then be subject to conversion fees by your local bank.

-

Important: Use your Topcoder handle as the Payee ID during registration. Use the Preferred Form of Payment as “Fastest,” rather than “Least Cost.” “Least Cost” uses ACH as a form of payment, which is not supported in all countries.

-

If you elect to be paid by Western Union, your payment request will be queued and processed semi-monthly, on the 15th and last business day of the month. If the 15th or last day of the month falls on a weekend or holiday, Western Union payments will be processed the next business day.

-

In order to be included in the semi-monthly payments, you need to select which payments you would like to be paid for by 10:00 AM EST on the day of the scheduled payment.

- `, - important: - 'Important: After you create an account, please return to this screen and enter the appropriate account details.', - url: - 'https://payee.globalpay.westernunion.com/PayeeManager/BeneficiaryEnrollment/SpecifyPayeeID.aspx?id=9E63C90B520F830246DA2FD728CDAEBF', - }, -}; - -export default undefined; diff --git a/src/shared/components/Settings/Payment/index.jsx b/src/shared/components/Settings/Payment/index.jsx deleted file mode 100644 index 0313bbe0a3..0000000000 --- a/src/shared/components/Settings/Payment/index.jsx +++ /dev/null @@ -1,63 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import React from 'react'; -import PT from 'prop-types'; - -import ArrowRightIcon from 'assets/images/arrow-right-green.svg'; -import { PrimaryButton } from 'topcoder-react-ui-kit'; - -import { getPaymentPageUrl } from 'utils/url'; - -import ErrorWrapper from '../ErrorWrapper'; -import PaymentProvider from './PaymentProvider'; - - -import styles from './styles.scss'; - -export default class Payment extends React.Component { - constructor(props) { - super(props); - this.state = {}; - } - - render() { - const { handle } = this.props; - - return ( - -
-
-

Payment Settings

- - - Manage Your Payments - - -
- {}} /> - - Manage Your Payments - - -
-
- - Save Changes - -
- - ); - } -} - -Payment.defaultProps = { - handle: '', -}; - -Payment.propTypes = { - handle: PT.string, -}; diff --git a/src/shared/components/Settings/Payment/styles.scss b/src/shared/components/Settings/Payment/styles.scss deleted file mode 100644 index 2cbca1a034..0000000000 --- a/src/shared/components/Settings/Payment/styles.scss +++ /dev/null @@ -1,119 +0,0 @@ -@import '~styles/mixins'; - -.payment-container { - background-color: $listing-filter-bg; - padding: $pad-xxxxl; - border-radius: 8px; - margin: 40px 0 32px; - - @include xs-to-sm { - padding: $pad-xxl $pad-lg; - } - - .header { - margin: 0 0 40px; - display: flex; - justify-content: space-between; - - @include xs-to-sm { - margin: 24px 0 24px; - flex-direction: column; - } - - h3 { - @include barlow-bold; - - font-size: 24px; - font-weight: 600; - line-height: 28px; - color: $tco-black; - text-transform: uppercase; - - @include xs-to-md { - @include barlow-condensed-semi-bold; - - font-weight: 500; - font-size: 20px; - line-height: 24px; - } - } - } - - .header__link { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 16px; - text-transform: uppercase; - color: $listing-checkbox-green; - margin-right: 1px; - margin-top: 7px; - - span { - margin-right: 4px; - } - - @include xs-to-sm { - display: none; - } - } - - .header__link__mobile { - display: none; - - @include xs-to-sm { - @include roboto-bold; - - display: inline-block; - font-weight: 700; - font-size: 16px; - line-height: 16px; - text-transform: uppercase; - color: $listing-checkbox-green; - margin-top: 24px; - margin-left: 16px; - - span { - margin-right: 4px; - } - } - } -} - -.footer { - display: flex; - flex-direction: row-reverse; - - .save-changes-btn { - @include roboto-bold; - - font-weight: 700; - font-size: 16px; - line-height: 24px; - border-radius: 50px !important; - background: #137d60 !important; - color: #fff !important; - text-transform: uppercase; - padding: 11px 23px; - margin: 0; - - &.disabled { - opacity: 0.5; - } - - &:hover { - background: #219174 !important; - } - } - - @include xs-to-md { - padding: $pad-xxxxl 0 $pad-sm; - border-top: 2px solid $color-black-10; - - .save-changes-btn { - font-size: 14px; - line-height: 20px; - } - } -} diff --git a/src/shared/components/Settings/Preferences/List/data.jsx b/src/shared/components/Settings/Preferences/List/data.jsx index 1e50c56030..9d96be6255 100644 --- a/src/shared/components/Settings/Preferences/List/data.jsx +++ b/src/shared/components/Settings/Preferences/List/data.jsx @@ -1,4 +1,5 @@ import forum from 'assets/images/preferences/forum.svg'; +import payment from 'assets/images/preferences/payment.svg'; import { config } from 'topcoder-react-utils'; @@ -11,6 +12,15 @@ const data = [ link: `${config.URL.FORUMS_VANILLA}/profile/preferences`, linkTitle: 'GO TO FORUM', }, + { + id: 'payment', + icon: payment, + name: 'Payment', + description: 'To setup your payments preferences, please click the “Go To Payments” button.', + link: `${config.URL.COMMUNITY}/PactsMemberServlet?module=PaymentHistory&full_list=false`, + altLink: `${config.URL.THRIVE}/articles/Payment%20Methods`, + linkTitle: 'GO TO PAYMENTS', + }, ]; export default data; diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js index f84a0ebd03..ef912b9e04 100644 --- a/src/shared/components/Settings/constants.js +++ b/src/shared/components/Settings/constants.js @@ -12,7 +12,6 @@ export const SETTINGS_TABS = [ { title: 'Tools', link: TABS.TOOLS }, { title: 'Account', link: TABS.ACCOUNT }, { title: 'Preferences', link: TABS.PREFERENCES }, - { title: 'Payment', link: TABS.PAYMENT }, ]; export const PROFILE_SETTINGS = { diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx index ae58cd6b2f..22ebb5b32f 100644 --- a/src/shared/components/Settings/index.jsx +++ b/src/shared/components/Settings/index.jsx @@ -16,7 +16,6 @@ import Tools from './Tools'; import './style.scss'; import Account from './Account'; import Preferences from './Preferences'; -import Payment from './Payment'; import TabSelector from './TabSelector'; import { SETTINGS_TABS } from './constants'; @@ -141,26 +140,15 @@ export default function Settings(props) { /> ) } - { - newProps.settingsTab === TABS.PAYMENT - && ( - - ) - }
); } -Settings.defaultProps = { - handle: '', -}; - Settings.propTypes = { settingsTab: PT.string.isRequired, profileState: PT.shape().isRequired, settingsPageState: PT.shape().isRequired, history: PT.shape().isRequired, selectTab: PT.func.isRequired, - handle: PT.string, }; diff --git a/src/shared/routes/Settings/Router.jsx b/src/shared/routes/Settings/Router.jsx index 90e394edd6..125a0e0aea 100644 --- a/src/shared/routes/Settings/Router.jsx +++ b/src/shared/routes/Settings/Router.jsx @@ -16,7 +16,7 @@ import Error404 from 'components/Error404'; export default function Router({ base }) { return ( - + diff --git a/src/shared/utils/url.js b/src/shared/utils/url.js index d0ec864979..60f083112c 100644 --- a/src/shared/utils/url.js +++ b/src/shared/utils/url.js @@ -6,7 +6,7 @@ import _ from 'lodash'; import qs from 'qs'; -import { isomorphy, config } from 'topcoder-react-utils'; +import { isomorphy } from 'topcoder-react-utils'; import { BUCKETS } from 'utils/challenge-listing/buckets'; /** @@ -123,27 +123,6 @@ export function removeTrailingSlash(url) { : url; } -/** - * Get Payment page url from header menu. - * - * @return {String} - */ -export function getPaymentPageUrl() { - const headerMenu = config.HEADER_MENU || []; - const communityMenu = headerMenu.filter(item => item.id === 'community'); - - if (communityMenu && communityMenu.length) { - const { secondaryMenu = [] } = communityMenu[0]; - const paymentLink = secondaryMenu.filter(item => item.title === 'Payments'); - - if (paymentLink && paymentLink.length) { - return paymentLink[0].href; - } - } - - return ''; -} - export function isImage(url) { return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(`${url}`.toLowerCase()); }