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! -
- -
- ); -}; - -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()); }