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/__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... - - - - - - - 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/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/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/LoadingIndicator/index.jsx b/src/shared/components/LoadingIndicator/index.jsx index 69a109ddcf..18a98d0945 100644 --- a/src/shared/components/LoadingIndicator/index.jsx +++ b/src/shared/components/LoadingIndicator/index.jsx @@ -8,11 +8,12 @@ import PT from 'prop-types'; import React from 'react'; import { themr } from 'react-css-super-themr'; +import cn from 'classnames'; import style from './styles.scss'; -const LoadingIndicator = ({ theme }) => ( +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/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/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index 33d25e08d0..3b1cbf0f0f 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -1,14 +1,18 @@ -import React, { useState, useEffect } from 'react'; +import React, { + useState, useEffect, useRef, 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'; 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 +20,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,13 +43,15 @@ function TimelineWallContainer(props) { getAvatar, userAvatars, pendingApprovals, + loadingApprovals, uploading, + uploadResult, } = props; const role = 'Admin User'; const authToken = _.get(auth, 'tokenV3'); const isMobile = useMediaQuery({ - query: '(max-device-width: 768px)', + query: '(max-width: 768px)', }); useEffect(() => { @@ -54,9 +63,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(() => { @@ -71,7 +96,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) { @@ -89,7 +114,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 +125,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' }); } @@ -137,10 +158,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 @@ -170,6 +204,16 @@ function TimelineWallContainer(props) {
) : (

Topcoder Timeline Wall

)} + {shouldShowDiscuss ? ( + + ) : null} +
diff --git a/src/shared/containers/timeline-wall/styles.scss b/src/shared/containers/timeline-wall/styles.scss index cfb126ce8e..04e7ecebfa 100644 --- a/src/shared/containers/timeline-wall/styles.scss +++ b/src/shared/containers/timeline-wall/styles.scss @@ -17,10 +17,16 @@ @media (max-width: 768px) { min-height: 190px; } -} -.header-admin { - min-height: 207px; + &.header-with-discuss { + @media (max-width: 768px) { + min-height: 214px; + } + } + + &.header-admin { + min-height: 207px; + } } .header-content-1 { @@ -68,6 +74,40 @@ display: none !important; } +.btn-discuss { + margin-top: 11px; + display: flex; + align-items: center; + position: absolute; + top: 33px; + left: 1408px; + padding: 0; + background: transparent; + border: none; + color: white; + + @media (max-width: 1500px) { + left: unset; + right: 0; + } + + @media (max-width: 768px) { + position: relative; + right: unset; + top: 0; + margin-left: 27px; + } + + span { + @include roboto-bold; + + font-weight: 700; + font-size: 16px; + line-height: 16px; + margin-right: 4px; + } +} + .tab-item { border: none; background-color: transparent; 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..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 @@ -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: '', @@ -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, @@ -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/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx index c12b4c74c0..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 @@ -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 : ()} @@ -84,7 +84,13 @@ function EventItem({
avatar - {eventItem.createdBy} + {eventItem.createdBy} +   •  {moment(eventItem.eventDate).format('MMM DD, YYYY')}
{isAdmin ? ( @@ -137,6 +143,7 @@ EventItem.defaultProps = { }, isAdmin: false, userAvatars: {}, + idPrefix: '', }; /** @@ -149,6 +156,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-" /> ))}
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 ? ( - + diff --git a/src/shared/services/timelineWall.js b/src/shared/services/timelineWall.js index fd7865a887..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; /** @@ -85,10 +85,14 @@ export const createEvent = async (tokenV3, formData) => { }, 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.'; } }; 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()); }