From 56d3b4a8b48caeba22e37b196e04207496108cae Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 4 Oct 2022 20:53:41 +0700 Subject: [PATCH 1/5] fix: hide payment on preferences tab --- .../components/Settings/Preferences/List/data.jsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/shared/components/Settings/Preferences/List/data.jsx b/src/shared/components/Settings/Preferences/List/data.jsx index 9d96be6255..1e50c56030 100644 --- a/src/shared/components/Settings/Preferences/List/data.jsx +++ b/src/shared/components/Settings/Preferences/List/data.jsx @@ -1,5 +1,4 @@ import forum from 'assets/images/preferences/forum.svg'; -import payment from 'assets/images/preferences/payment.svg'; import { config } from 'topcoder-react-utils'; @@ -12,15 +11,6 @@ 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; From 3fe380b6c0c725738da001b7d149af3893652b69 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 4 Oct 2022 21:03:51 +0700 Subject: [PATCH 2/5] fix: add new payment tab --- .../Settings/__snapshots__/index.jsx.snap | 16 ++++ src/shared/actions/page/settings.js | 1 + .../components/Settings/Payment/index.jsx | 33 ++++++++ .../components/Settings/Payment/styles.scss | 83 +++++++++++++++++++ src/shared/components/Settings/constants.js | 1 + src/shared/components/Settings/index.jsx | 7 ++ src/shared/routes/Settings/Router.jsx | 2 +- 7 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 src/shared/components/Settings/Payment/index.jsx create 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 73f0c5c1d3..a9d8e5dde4 100644 --- a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap @@ -48,6 +48,10 @@ exports[`renders account setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, + Object { + "link": "payment", + "title": "Payment", + }, ] } /> @@ -805,6 +809,10 @@ exports[`renders preferences setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, + Object { + "link": "payment", + "title": "Payment", + }, ] } /> @@ -1559,6 +1567,10 @@ exports[`renders profile setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, + Object { + "link": "payment", + "title": "Payment", + }, ] } /> @@ -2319,6 +2331,10 @@ exports[`renders tools setting page correctly 1`] = ` "link": "preferences", "title": "Preferences", }, + Object { + "link": "payment", + "title": "Payment", + }, ] } /> diff --git a/src/shared/actions/page/settings.js b/src/shared/actions/page/settings.js index c143e9a322..51c47cb86a 100644 --- a/src/shared/actions/page/settings.js +++ b/src/shared/actions/page/settings.js @@ -11,6 +11,7 @@ export const TABS = { TOOLS: 'tools', ACCOUNT: 'account', PREFERENCES: 'preferences', + PAYMENT: 'payment', }; export default createActions({ diff --git a/src/shared/components/Settings/Payment/index.jsx b/src/shared/components/Settings/Payment/index.jsx new file mode 100644 index 0000000000..96b04be5cd --- /dev/null +++ b/src/shared/components/Settings/Payment/index.jsx @@ -0,0 +1,33 @@ +/* eslint-disable prefer-destructuring */ +import React from 'react'; + +import ErrorWrapper from '../ErrorWrapper'; + +import './styles.scss'; + +export default class Payment extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( + +
+
+

Payment Settings

+
+
+
+
+ + ); + } +} + +Payment.defaultProps = { +}; + +Payment.propTypes = { +}; diff --git a/src/shared/components/Settings/Payment/styles.scss b/src/shared/components/Settings/Payment/styles.scss new file mode 100644 index 0000000000..f8418ce5c1 --- /dev/null +++ b/src/shared/components/Settings/Payment/styles.scss @@ -0,0 +1,83 @@ +@import '~styles/mixins'; + +.payment-container { + background-color: $listing-filter-bg; + padding: $pad-xxxxl; + border-radius: 8px; + margin: 32px 0 32px; + + @include xs-to-sm { + padding: $pad-xxl $pad-lg; + margin: 24px 0 24px; + } + + .header { + margin: 0 0 40px; + + @include xs-to-sm { + margin: 0 0 $pad-xxl; + } + + h3 { + @include barlow-bold; + + font-size: 20px; + font-weight: 600; + line-height: 22px; + color: $tco-black; + text-transform: uppercase; + + @include xs-to-md { + @include barlow-condensed-semi-bold; + + font-weight: 500; + font-size: 22px; + line-height: 24px; + } + } + } + + .platform-banner { + background-color: $tc-white; + border-radius: 4px; + width: 100%; + padding: 32px; + + @include xs-to-sm { + padding: 24px 16px; + } + } +} + +.footer { + display: flex; + flex-direction: row-reverse; + + .save-changes-btn { + @include roboto-bold; + + font-weight: 700; + font-size: 16px; + line-height: 24px; + border-radius: 50px !important; + background: #137d60 !important; + color: #fff !important; + text-transform: uppercase; + padding: 11px 23px; + margin: 0; + + &.disabled { + opacity: 0.5; + } + } + + @include xs-to-md { + padding: $pad-xxxxl 0 $pad-sm; + border-top: 2px solid $color-black-10; + + .save-changes-btn { + font-size: 14px; + line-height: 20px; + } + } +} diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js index ef912b9e04..f84a0ebd03 100644 --- a/src/shared/components/Settings/constants.js +++ b/src/shared/components/Settings/constants.js @@ -12,6 +12,7 @@ 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 22ebb5b32f..6266603deb 100644 --- a/src/shared/components/Settings/index.jsx +++ b/src/shared/components/Settings/index.jsx @@ -16,6 +16,7 @@ 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'; @@ -140,6 +141,12 @@ export default function Settings(props) { /> ) } + { + newProps.settingsTab === TABS.PAYMENT + && ( + + ) + }
); diff --git a/src/shared/routes/Settings/Router.jsx b/src/shared/routes/Settings/Router.jsx index 125a0e0aea..90e394edd6 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 ( - + From a1068cc6dd07f906bf6caa66b88fbe7cfbf77d3a Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Wed, 12 Oct 2022 11:35:14 +0700 Subject: [PATCH 3/5] fix: 48hr payment tab --- 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/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 | 215 ++++++++++ .../Payment/PaymentProvider/styles.scss | 314 ++++++++++++++ .../components/Settings/Payment/constants.js | 123 ++++++ .../components/Settings/Payment/index.jsx | 36 +- .../components/Settings/Payment/styles.scss | 60 ++- src/shared/components/Settings/index.jsx | 7 +- src/shared/utils/url.js | 23 +- 23 files changed, 1544 insertions(+), 18 deletions(-) create mode 100644 src/assets/images/PayPal_logo_gray.svg create mode 100644 src/assets/images/Payoneer_log_gray.svg create mode 100644 src/assets/images/Western_Union_Logo_gray.svg create mode 100644 src/assets/images/arrow-right-green.svg create mode 100644 src/assets/images/icon-back-arrow.svg create mode 100644 src/assets/images/icon-dollar.svg create mode 100644 src/assets/images/icon-speed.svg create mode 100644 src/assets/images/icon-world.svg create mode 100644 src/assets/images/selected-payment.svg create mode 100644 src/shared/components/Settings/Payment/EmailDetails/index.jsx create mode 100644 src/shared/components/Settings/Payment/EmailDetails/styles.scss create mode 100644 src/shared/components/Settings/Payment/PaymentInfo/index.jsx create mode 100644 src/shared/components/Settings/Payment/PaymentInfo/styles.scss create mode 100644 src/shared/components/Settings/Payment/PaymentMethod/index.jsx create mode 100644 src/shared/components/Settings/Payment/PaymentMethod/styles.scss create mode 100644 src/shared/components/Settings/Payment/PaymentProvider/index.jsx create mode 100644 src/shared/components/Settings/Payment/PaymentProvider/styles.scss create mode 100644 src/shared/components/Settings/Payment/constants.js diff --git a/src/assets/images/PayPal_logo_gray.svg b/src/assets/images/PayPal_logo_gray.svg new file mode 100644 index 0000000000..8ed6edcecc --- /dev/null +++ b/src/assets/images/PayPal_logo_gray.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/Payoneer_log_gray.svg b/src/assets/images/Payoneer_log_gray.svg new file mode 100644 index 0000000000..13a13fa00f --- /dev/null +++ b/src/assets/images/Payoneer_log_gray.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/Western_Union_Logo_gray.svg b/src/assets/images/Western_Union_Logo_gray.svg new file mode 100644 index 0000000000..8cb8fcaf8c --- /dev/null +++ b/src/assets/images/Western_Union_Logo_gray.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/images/arrow-right-green.svg b/src/assets/images/arrow-right-green.svg new file mode 100644 index 0000000000..2c28fcca4a --- /dev/null +++ b/src/assets/images/arrow-right-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-back-arrow.svg b/src/assets/images/icon-back-arrow.svg new file mode 100644 index 0000000000..4231f4c3da --- /dev/null +++ b/src/assets/images/icon-back-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-dollar.svg b/src/assets/images/icon-dollar.svg new file mode 100644 index 0000000000..ac96c7b159 --- /dev/null +++ b/src/assets/images/icon-dollar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-speed.svg b/src/assets/images/icon-speed.svg new file mode 100644 index 0000000000..6d782e8fa3 --- /dev/null +++ b/src/assets/images/icon-speed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-world.svg b/src/assets/images/icon-world.svg new file mode 100644 index 0000000000..a1d05cdfe7 --- /dev/null +++ b/src/assets/images/icon-world.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/selected-payment.svg b/src/assets/images/selected-payment.svg new file mode 100644 index 0000000000..e53d566850 --- /dev/null +++ b/src/assets/images/selected-payment.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/components/ProfilePage/styles.scss b/src/shared/components/ProfilePage/styles.scss index c31eb78e7f..f08347904a 100644 --- a/src/shared/components/ProfilePage/styles.scss +++ b/src/shared/components/ProfilePage/styles.scss @@ -66,7 +66,7 @@ } .modal-container { - width: 1232px; + width: 1200px; 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 new file mode 100644 index 0000000000..aed513288e --- /dev/null +++ b/src/shared/components/Settings/Payment/EmailDetails/index.jsx @@ -0,0 +1,47 @@ +/* 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 new file mode 100644 index 0000000000..7ad4f8fc38 --- /dev/null +++ b/src/shared/components/Settings/Payment/EmailDetails/styles.scss @@ -0,0 +1,43 @@ +@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 new file mode 100644 index 0000000000..9cc54633d8 --- /dev/null +++ b/src/shared/components/Settings/Payment/PaymentInfo/index.jsx @@ -0,0 +1,35 @@ +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 new file mode 100644 index 0000000000..13427c3b3d --- /dev/null +++ b/src/shared/components/Settings/Payment/PaymentInfo/styles.scss @@ -0,0 +1,64 @@ +@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 new file mode 100644 index 0000000000..294779080c --- /dev/null +++ b/src/shared/components/Settings/Payment/PaymentMethod/index.jsx @@ -0,0 +1,158 @@ +/* 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 new file mode 100644 index 0000000000..69e8a6294b --- /dev/null +++ b/src/shared/components/Settings/Payment/PaymentMethod/styles.scss @@ -0,0 +1,392 @@ +@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 new file mode 100644 index 0000000000..8367e60ee1 --- /dev/null +++ b/src/shared/components/Settings/Payment/PaymentProvider/index.jsx @@ -0,0 +1,215 @@ +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} + /> + )} +
+ + ) : 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 new file mode 100644 index 0000000000..a166f4d0c7 --- /dev/null +++ b/src/shared/components/Settings/Payment/PaymentProvider/styles.scss @@ -0,0 +1,314 @@ +@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; + width: 77vw; + + @include xs-to-sm { + width: unset; + font-size: 14px; + } + } +} + +.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; + } + } +} + +.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 new file mode 100644 index 0000000000..6cc8c00e5b --- /dev/null +++ b/src/shared/components/Settings/Payment/constants.js @@ -0,0 +1,123 @@ +export const PAYMENT_PROVIDER = 'payment_provider'; + +/** + * List of payment methods supported + */ +export const PAYMENT_METHODS = [ + { + name: 'payoneer', + fees: 'Check with Payoneer directly for current transaction, conversion or bank fees.', + countries: 150, + speed: 1, + }, + { + name: 'paypal', + fees: 'Check with PayPal directly for current transaction, conversion or bank fees.', + countries: 200, + speed: 1, + }, + { + name: 'western-union', + fees: 'Check with WesternUnion directly for current transaction, conversion or bank 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 index 96b04be5cd..0313bbe0a3 100644 --- a/src/shared/components/Settings/Payment/index.jsx +++ b/src/shared/components/Settings/Payment/index.jsx @@ -1,9 +1,17 @@ /* 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.scss'; +import styles from './styles.scss'; export default class Payment extends React.Component { constructor(props) { @@ -12,22 +20,44 @@ export default class Payment extends React.Component { } render() { + const { handle } = this.props; + return (

Payment Settings

+ + + 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 index f8418ce5c1..2cbca1a034 100644 --- a/src/shared/components/Settings/Payment/styles.scss +++ b/src/shared/components/Settings/Payment/styles.scss @@ -4,26 +4,28 @@ background-color: $listing-filter-bg; padding: $pad-xxxxl; border-radius: 8px; - margin: 32px 0 32px; + margin: 40px 0 32px; @include xs-to-sm { padding: $pad-xxl $pad-lg; - margin: 24px 0 24px; } .header { margin: 0 0 40px; + display: flex; + justify-content: space-between; @include xs-to-sm { - margin: 0 0 $pad-xxl; + margin: 24px 0 24px; + flex-direction: column; } h3 { @include barlow-bold; - font-size: 20px; + font-size: 24px; font-weight: 600; - line-height: 22px; + line-height: 28px; color: $tco-black; text-transform: uppercase; @@ -31,20 +33,50 @@ @include barlow-condensed-semi-bold; font-weight: 500; - font-size: 22px; + font-size: 20px; line-height: 24px; } } } - .platform-banner { - background-color: $tc-white; - border-radius: 4px; - width: 100%; - padding: 32px; + .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 { - padding: 24px 16px; + @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; + } } } } @@ -69,6 +101,10 @@ &.disabled { opacity: 0.5; } + + &:hover { + background: #219174 !important; + } } @include xs-to-md { diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx index 6266603deb..ae58cd6b2f 100644 --- a/src/shared/components/Settings/index.jsx +++ b/src/shared/components/Settings/index.jsx @@ -144,7 +144,7 @@ export default function Settings(props) { { newProps.settingsTab === TABS.PAYMENT && ( - + ) }
@@ -152,10 +152,15 @@ export default function Settings(props) { ); } +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/utils/url.js b/src/shared/utils/url.js index a705d57ed4..a8243a2658 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 } from 'topcoder-react-utils'; +import { isomorphy, config } from 'topcoder-react-utils'; import { BUCKETS } from 'utils/challenge-listing/buckets'; /** @@ -123,4 +123,25 @@ 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 default undefined; From 7395f2b2265763a746a710385426c35e4cfc7d02 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Thu, 13 Oct 2022 19:32:35 +0700 Subject: [PATCH 4/5] fix: payment providers modal text --- .../Settings/Payment/PaymentMethod/index.jsx | 2 +- .../Payment/PaymentProvider/index.jsx | 132 +++++++++--------- .../Payment/PaymentProvider/styles.scss | 8 ++ .../components/Settings/Payment/constants.js | 6 +- 4 files changed, 81 insertions(+), 67 deletions(-) diff --git a/src/shared/components/Settings/Payment/PaymentMethod/index.jsx b/src/shared/components/Settings/Payment/PaymentMethod/index.jsx index 294779080c..757000a40a 100644 --- a/src/shared/components/Settings/Payment/PaymentMethod/index.jsx +++ b/src/shared/components/Settings/Payment/PaymentMethod/index.jsx @@ -109,7 +109,7 @@ const PaymentMethod = ({ onClick={onVisitPaymentProvider} disabled={emailedDetails} > - {`Visit ${PAYMENT_METHOD_MAP[paymentMethod]} to create account`} + {`Visit ${PAYMENT_METHOD_MAP[paymentMethod]} to create an account`}
diff --git a/src/shared/components/Settings/Payment/PaymentProvider/index.jsx b/src/shared/components/Settings/Payment/PaymentProvider/index.jsx index 8367e60ee1..232b50d744 100644 --- a/src/shared/components/Settings/Payment/PaymentProvider/index.jsx +++ b/src/shared/components/Settings/Payment/PaymentProvider/index.jsx @@ -128,71 +128,77 @@ const PaymentProvider = ({ handleConfirm, handle }) => { { !selectedMode ? ( -
- {PAYMENT_METHODS.map(method => ( -
-
- {PAYMENT_METHOD_MAP[method.name] === 'Payoneer' && ( - - )} - {PAYMENT_METHOD_MAP[method.name] === 'PayPal' && } - {PAYMENT_METHOD_MAP[method.name] === 'Western Union' && ( - - )} +
+
+ {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 + /> +
+
+ +
-
-
- } - 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} - /> - )} + ))} + + {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 }
diff --git a/src/shared/components/Settings/Payment/PaymentProvider/styles.scss b/src/shared/components/Settings/Payment/PaymentProvider/styles.scss index a166f4d0c7..f0d5c25d70 100644 --- a/src/shared/components/Settings/Payment/PaymentProvider/styles.scss +++ b/src/shared/components/Settings/Payment/PaymentProvider/styles.scss @@ -156,6 +156,14 @@ } } +.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; diff --git a/src/shared/components/Settings/Payment/constants.js b/src/shared/components/Settings/Payment/constants.js index 6cc8c00e5b..f1c5f161bf 100644 --- a/src/shared/components/Settings/Payment/constants.js +++ b/src/shared/components/Settings/Payment/constants.js @@ -6,19 +6,19 @@ export const PAYMENT_PROVIDER = 'payment_provider'; export const PAYMENT_METHODS = [ { name: 'payoneer', - fees: 'Check with Payoneer directly for current transaction, conversion or bank fees.', + fees: '$0–$3 + Currency Conversion Rates May Apply', countries: 150, speed: 1, }, { name: 'paypal', - fees: 'Check with PayPal directly for current transaction, conversion or bank fees.', + fees: '3.49% + an international fee (non US) + a fixed fee depending upon currency', countries: 200, speed: 1, }, { name: 'western-union', - fees: 'Check with WesternUnion directly for current transaction, conversion or bank fees.', + fees: '$8 per transaction (your bank may charge additional fees)', countries: 200, speed: 3, }, From 5dbe0dbe9e397a570f4f72f6c3df5c6da19f282e Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 18 Oct 2022 19:58:37 +0700 Subject: [PATCH 5/5] fix: payment text on widescreen --- .../Settings/Payment/PaymentProvider/styles.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/shared/components/Settings/Payment/PaymentProvider/styles.scss b/src/shared/components/Settings/Payment/PaymentProvider/styles.scss index f0d5c25d70..b4cc35b6fd 100644 --- a/src/shared/components/Settings/Payment/PaymentProvider/styles.scss +++ b/src/shared/components/Settings/Payment/PaymentProvider/styles.scss @@ -51,11 +51,16 @@ line-height: 24px; font-weight: 400; color: $tco-black; - width: 77vw; + padding-right: calc(38% - 18px); + + @include sm-to-md { + padding-right: 77px; + } @include xs-to-sm { width: unset; font-size: 14px; + padding-right: 0; } } }