From 10cf5d59e73e3009c3535f3f5bc481bc38093aa0 Mon Sep 17 00:00:00 2001 From: Justin Gasper Date: Fri, 13 May 2022 15:39:07 +1000 Subject: [PATCH 1/2] Update payment setup step and flow https://github.com/topcoder-platform/micro-frontends-onboarding-app/issues/184 --- src/assets/images/PayPal_logo.svg | 52 +++ src/assets/images/PayPal_logo_gray.svg | 52 +++ src/assets/images/Payoneer_log_gray.svg | 9 + src/assets/images/Payoneer_logo.svg | 9 + src/assets/images/Western_Union_Logo.svg | 16 + src/assets/images/Western_Union_Logo_gray.svg | 16 + src/components/Modal/index.jsx | 13 +- src/components/Modal/styles.module.scss | 4 + src/components/PaymentMethods/index.jsx | 113 ++++--- .../PaymentMethods/styles.module.scss | 25 +- src/components/RadioButton/index.jsx | 113 +++++++ src/components/RadioButton/styles.module.scss | 168 ++++++++++ src/constants/index.js | 4 +- src/root.component.jsx | 40 --- src/routes/BuildMyProfile/index.jsx | 34 +- src/routes/ContactDetails/index.jsx | 11 +- src/routes/PaymentSetup/Form/index.jsx | 169 ---------- .../PaymentSetup/Form/styles.module.scss | 307 ------------------ .../PaymentSetup/PaymentComplete/index.jsx | 103 ------ .../PaymentComplete/styles.module.scss | 166 ---------- .../PaymentSetup/PaymentMethod/index.jsx | 191 +++++------ .../PaymentMethod/styles.module.scss | 22 +- .../PaymentSetup/PaymentProviders/index.jsx | 113 ------- .../PaymentProviders/styles.module.scss | 179 ---------- src/routes/PaymentSetup/TaxComplete/index.jsx | 101 ------ .../TaxComplete/styles.module.scss | 167 ---------- src/routes/PaymentSetup/TaxConfirm/index.jsx | 155 --------- .../TaxConfirm/styles.module.scss | 282 ---------------- src/routes/PaymentSetup/TaxForm/index.jsx | 118 ------- .../PaymentSetup/TaxForm/styles.module.scss | 181 ----------- src/routes/PaymentSetup/TaxInfo/index.jsx | 139 -------- .../PaymentSetup/TaxInfo/styles.module.scss | 214 ------------ src/routes/PaymentSetup/index.jsx | 210 +++++++----- src/routes/PaymentSetup/styles.module.scss | 31 +- 34 files changed, 808 insertions(+), 2719 deletions(-) create mode 100644 src/assets/images/PayPal_logo.svg 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/Payoneer_logo.svg create mode 100644 src/assets/images/Western_Union_Logo.svg create mode 100644 src/assets/images/Western_Union_Logo_gray.svg create mode 100644 src/components/RadioButton/index.jsx create mode 100644 src/components/RadioButton/styles.module.scss delete mode 100644 src/routes/PaymentSetup/Form/index.jsx delete mode 100644 src/routes/PaymentSetup/Form/styles.module.scss delete mode 100644 src/routes/PaymentSetup/PaymentComplete/index.jsx delete mode 100644 src/routes/PaymentSetup/PaymentComplete/styles.module.scss delete mode 100644 src/routes/PaymentSetup/PaymentProviders/index.jsx delete mode 100644 src/routes/PaymentSetup/PaymentProviders/styles.module.scss delete mode 100644 src/routes/PaymentSetup/TaxComplete/index.jsx delete mode 100644 src/routes/PaymentSetup/TaxComplete/styles.module.scss delete mode 100644 src/routes/PaymentSetup/TaxConfirm/index.jsx delete mode 100644 src/routes/PaymentSetup/TaxConfirm/styles.module.scss delete mode 100644 src/routes/PaymentSetup/TaxForm/index.jsx delete mode 100644 src/routes/PaymentSetup/TaxForm/styles.module.scss delete mode 100644 src/routes/PaymentSetup/TaxInfo/index.jsx delete mode 100644 src/routes/PaymentSetup/TaxInfo/styles.module.scss diff --git a/src/assets/images/PayPal_logo.svg b/src/assets/images/PayPal_logo.svg new file mode 100644 index 0000000..56bd282 --- /dev/null +++ b/src/assets/images/PayPal_logo.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + diff --git a/src/assets/images/PayPal_logo_gray.svg b/src/assets/images/PayPal_logo_gray.svg new file mode 100644 index 0000000..a57089a --- /dev/null +++ b/src/assets/images/PayPal_logo_gray.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + diff --git a/src/assets/images/Payoneer_log_gray.svg b/src/assets/images/Payoneer_log_gray.svg new file mode 100644 index 0000000..94565f9 --- /dev/null +++ b/src/assets/images/Payoneer_log_gray.svg @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/Payoneer_logo.svg b/src/assets/images/Payoneer_logo.svg new file mode 100644 index 0000000..92084e1 --- /dev/null +++ b/src/assets/images/Payoneer_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/Western_Union_Logo.svg b/src/assets/images/Western_Union_Logo.svg new file mode 100644 index 0000000..69b20c1 --- /dev/null +++ b/src/assets/images/Western_Union_Logo.svg @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file 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 0000000..978a48c --- /dev/null +++ b/src/assets/images/Western_Union_Logo_gray.svg @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx index a3144a4..7aea7b4 100644 --- a/src/components/Modal/index.jsx +++ b/src/components/Modal/index.jsx @@ -9,12 +9,21 @@ import cn from "classnames"; import "./styles.module.scss"; import IconCross from "../../assets/images/icon-cross.svg"; -const Modal = ({ children, show = false, handleClose = (f) => f }) => { +const Modal = ({ + children, + noMaxWith = false, + show = false, + handleClose = (f) => f, +}) => { return ( show && (
handleClose(e)}>
-
+
{children} { - const onGoToPaymentMethod = (name) => { - navigate(`/onboard/payment-setup/payment-provider/${name}`); - }; +const PaymentMethods = ({ handleConfirm = (f) => f }) => { + const [selectedMethod, setSelectedMethod] = useState(""); return ( -
- {PAYMENT_METHODS.map((method) => ( -
-
- +
+
+ {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={true} + /> +
+
+ +
-
- } - 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={true} - /> -
-
- ))} + ))} +
+ +
+ The information above is gathered from each payment provider's + perspective website. We encourage you to do any additional information + gathering you see fit prior to making a payment provider decision. +
+ + {selectedMethod && ( + { + setSelectedMethod(""); + }} + handleConfirm={() => { + handleConfirm(); + }} + /> + )}
); }; diff --git a/src/components/PaymentMethods/styles.module.scss b/src/components/PaymentMethods/styles.module.scss index 5d72f35..60f2ec0 100644 --- a/src/components/PaymentMethods/styles.module.scss +++ b/src/components/PaymentMethods/styles.module.scss @@ -9,7 +9,7 @@ } .payment-method-card { background-color: $grey-bg; - padding: 24px; + padding: 30px; display: flex; flex: 1; margin-right: 24px; @@ -20,9 +20,9 @@ margin-bottom: 16px; } .button-wrapper { - margin-bottom: 32px; + margin-top: 32px; @include mobile { - margin-bottom: 24px; + margin-top: 24px; } .payment-button { font-size: 14px; @@ -46,3 +46,22 @@ } } } + +.payment-logo { + height: 40px; + + svg { + height: 100%; + } +} + +.info-text { + font-size: 12px; + margin-top: 24px; + margin-bottom: 24px; +} + +.divider { + margin-top: 30px; + margin-bottom: 30px; +} diff --git a/src/components/RadioButton/index.jsx b/src/components/RadioButton/index.jsx new file mode 100644 index 0000000..65c47c7 --- /dev/null +++ b/src/components/RadioButton/index.jsx @@ -0,0 +1,113 @@ +/* eslint-disable jsx-a11y/label-has-for */ +/* eslint-disable jsx-a11y/label-has-associated-control */ +/** + * Radio button component. + */ +import PT from "prop-types"; +import _ from "lodash"; +import React, { useEffect, useState } from "react"; +import "./styles.module.scss"; + +function RadioButton({ options, selectedOption, onChange, size, errorMsg }) { + const [internalOptions, setInternalOptions] = useState( + (options || []).map((o, i) => ({ ...o, key: i })) + ); + let sizeStyle = size === "lg" ? "lgSize" : null; + if (!sizeStyle) { + sizeStyle = size === "xs" ? "xsSize" : "smSize"; + } + + useEffect(() => { + if ( + !options || + !options.length || + _.isEqualWith(internalOptions, options, "label") + ) { + return; + } else if (!internalOptions || !internalOptions.length) { + setInternalOptions( + options.map((option, index) => ({ ...option, key: index })) + ); + } else { + const newOptions = _.cloneDeep(internalOptions); + for (let i = 0; i < options.length; i += 1) { + newOptions[i].label = options[i]?.label; + newOptions[i].key = i; + if ( + _.isUndefined(newOptions[i].value) && + !_.isUndefined(options[i].value) + ) { + newOptions[i].value = options[i].value; + } + } + setInternalOptions(newOptions); + } + }, [options]); + + useEffect(() => { + if (!internalOptions || !internalOptions.length) { + return; + } else if (selectedOption) { + const newOptions = _.cloneDeep(internalOptions); + for (let i = 0; i < newOptions.length; i += 1) { + if (selectedOption === newOptions[i].label) { + newOptions[i].value = true; + } else { + newOptions[i].value = false; + } + } + setInternalOptions(newOptions); + } + }, [selectedOption]); + + return ( + +
+ {internalOptions.map((o) => ( +
+ + {o.label ? {o.label} : null} +
+ ))} +
+ {errorMsg ? {errorMsg} : null} + + ); +} + +RadioButton.defaultProps = { + onChange: () => {}, + size: "sm", + errorMsg: "", +}; + +RadioButton.propTypes = { + options: PT.arrayOf( + PT.shape({ + label: PT.string, + value: PT.bool.isRequired, + }) + ).isRequired, + onChange: PT.func, + size: PT.oneOf(["xs", "sm", "lg"]), + errorMsg: PT.string, +}; + +export default RadioButton; diff --git a/src/components/RadioButton/styles.module.scss b/src/components/RadioButton/styles.module.scss new file mode 100644 index 0000000..b8321bd --- /dev/null +++ b/src/components/RadioButton/styles.module.scss @@ -0,0 +1,168 @@ +@import "styles/include"; + +/* Create a custom radio button */ +.checkmark { + position: absolute; + top: 0; + left: 0; + background-color: white; + border-radius: 50%; + border: 1px solid $gray-80; + + /* Create the indicator (the dot/circle - hidden when not checked) */ + &::after { + content: ""; + position: absolute; + display: none; + top: 50%; + left: 50%; + margin-top: -6px; + margin-left: -6px; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: $green1; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35); + } + + &.hasError { + border: 2px solid $red-120; + } +} + +.radioButton { + display: flex; + align-items: center; + margin-top: 10px; +} + +.label { + @include font-roboto; + font-size: 16px; + line-height: 22px; + font-weight: 400; + color: $black; + cursor: pointer; +} + +/* The container */ +.container { + display: block; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: $gray-80; + + /* Hide the browser's default radio button */ + input { + position: absolute; + opacity: 0; + cursor: pointer; + + /* When the radio button is checked, add a blue background */ + &:checked ~ .checkmark { + background-color: white; + box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29); + border: 1px solid $green1; + + /* Show the indicator (dot/circle) when checked */ + &::after { + display: block; + } + } + } +} + +.radioButtonContainer { + display: flex; + flex-direction: column; + + .label { + color: $gray-80; + } + + // lg size + &.lgSize { + .container { + padding-left: 24px; + line-height: 24px; + height: 24px; + + .checkmark { + height: 24px; + width: 24px; + + &::after { + margin-top: -6px; + margin-left: -6px; + width: 12px; + height: 12px; + } + } + } + + .label { + margin-left: 8px; + } + } + + // sm size + &.smSize { + .container { + padding-left: 20px; + line-height: 20px; + height: 20px; + + .checkmark { + height: 20px; + width: 20px; + + &::after { + margin-top: -5px; + margin-left: -5px; + width: 10px; + height: 10px; + } + } + } + + .label { + margin-left: 8px; + } + } + + // xs size + &.xsSize { + .container { + padding-left: 15px; + line-height: 15px; + height: 15px; + + .checkmark { + height: 16px; + width: 16px; + + &::after { + margin-top: -4px; + margin-left: -4px; + width: 8px; + height: 8px; + } + } + } + + .label { + margin-left: 8px; + } + } +} + +.errorMessage { + display: block; + + color: #ef476f; + margin-left: 0; +} diff --git a/src/constants/index.js b/src/constants/index.js index df3dd52..48e9eb9 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -59,8 +59,8 @@ export const writtenLevels = writtenLevel.map((v) => v.name); export const ProgressLevels = [ { label: "Get Started", url: "/onboard" }, { label: "Contact Details", url: "/onboard/contact-details" }, - { label: "Payment Setup", url: "/onboard/payment-setup" }, { label: "Building My Profile", url: "/onboard/build-my-profile" }, + { label: "Payment Setup", url: "/onboard/payment-setup" }, ]; /** @@ -267,7 +267,7 @@ export const FORM_DETAILS = { infoLabel: "See Topcoder Tax Information for Form W-8BEN for details", extraDetails: `

- The W-8BEN is required to: + The W-8BEN is required to:

  • Establish that you are not a U.S. person
  • Claim that you are the beneficial owner of the income for which Form W-8BEN is being provided.
    • diff --git a/src/root.component.jsx b/src/root.component.jsx index 6a2932b..2ef048e 100644 --- a/src/root.component.jsx +++ b/src/root.component.jsx @@ -10,15 +10,7 @@ import { import GetStarted from "./routes/GetStarted"; import ContactDetails from "./routes/ContactDetails"; import PaymentSetup from "./routes/PaymentSetup"; -import PaymentProviders from "./routes/PaymentSetup/PaymentProviders"; -import PaymentMethod from "./routes/PaymentSetup/PaymentMethod"; -import PaymentComplete from "./routes/PaymentSetup/PaymentComplete"; import BuildMyProfile from "./routes/BuildMyProfile"; -import TaxForm from "./routes/PaymentSetup/TaxForm"; -import Form from "./routes/PaymentSetup/Form"; -import TaxInfo from "./routes/PaymentSetup/TaxInfo"; -import TaxConfirm from "./routes/PaymentSetup/TaxConfirm"; -import TaxComplete from "./routes/PaymentSetup/TaxComplete"; import store from "./store"; import "./styles/main.vendor.scss"; import styles from "./styles/main.module.scss"; @@ -36,28 +28,6 @@ export default function Root() { disableSidebarForRoute("/onboard/contact-details"); disableSidebarForRoute("/onboard/payment-setup"); disableSidebarForRoute("/onboard/build-my-profile"); - disableSidebarForRoute("/onboard/payment-setup/payment-provider"); - disableSidebarForRoute("/onboard/payment-setup/payment-provider/paypal"); - disableSidebarForRoute("/onboard/payment-setup/payment-provider/payoneer"); - disableSidebarForRoute( - "/onboard/payment-setup/payment-provider/western-union" - ); - disableSidebarForRoute( - "/onboard/payment-setup/payment-provider/paypal/complete" - ); - disableSidebarForRoute( - "/onboard/payment-setup/payment-provider/payoneer/complete" - ); - disableSidebarForRoute( - "/onboard/payment-setup/payment-provider/western-union/complete" - ); - disableSidebarForRoute("/onboard/payment-setup/tax-form"); - disableSidebarForRoute("/onboard/payment-setup/tax-form/:formName"); - disableSidebarForRoute("/onboard/payment-setup/tax-form/:formName/info"); - disableSidebarForRoute("/onboard/payment-setup/tax-form/:formName/confirm"); - disableSidebarForRoute( - "/onboard/payment-setup/tax-form/:formName/complete" - ); }, []); return ( @@ -70,16 +40,6 @@ export default function Root() { - - - - - -
    - - - - diff --git a/src/routes/BuildMyProfile/index.jsx b/src/routes/BuildMyProfile/index.jsx index 6f59c98..4829c48 100644 --- a/src/routes/BuildMyProfile/index.jsx +++ b/src/routes/BuildMyProfile/index.jsx @@ -28,8 +28,6 @@ import LoadingSpinner from "components/LoadingSpinner"; import ImgTestimonial2 from "../../assets/images/testimonial-2.png"; import IconCross from "../../assets/images/icon-cross.svg"; import IconBackArrow from "../../assets/images/icon-back-arrow.svg"; -import config from "../../../config"; -import { MAX_COMPLETED_STEP, PAYMENT_PROVIDER, TAX_FORM } from "constants/"; import { industries, @@ -47,7 +45,6 @@ import moment from "moment"; import _ from "lodash"; import { createTraits, updateTraits } from "services/traits"; import { updateMemberData } from "services/memberData"; -import { getCookie } from "utils/"; import { updateOnboardingWizardTraits } from "services/onboardingChecklist"; const formatDate = (date) => { @@ -63,9 +60,9 @@ const BuildMyProfile = () => { const [isLoading, setIsLoading] = useState(false); const [myProfileData, setMyProfileData] = useState({}); const [bio, setBio] = useState(""); - const [redirectUrl, setRedirectUrl] = useState( - config.TOPCODER_COMMUNITY_WEBSITE_URL + "/home" - ); + + // reach router, navigate programmatically + const navigate = useNavigate(); // form states const [formData, setFormData] = useState({ @@ -234,10 +231,6 @@ const BuildMyProfile = () => { ) { onboardingChecklist.traits.data[0].onboarding_wizard.status = "completed"; - const url = getCookie("returnAfterOnboard"); - if (url != null) { - setRedirectUrl(url); - } updateOnboardingWizardTraits( authUser.handle, onboardingChecklist.traits.data, @@ -562,7 +555,7 @@ const BuildMyProfile = () => { } setIsLoading(false); - window.location.href = redirectUrl; + navigate("/onboard/payment-setup"); }; return ( @@ -1038,32 +1031,25 @@ const BuildMyProfile = () => { - + - handleSubmit(e)} > - + - + diff --git a/src/routes/ContactDetails/index.jsx b/src/routes/ContactDetails/index.jsx index f0465ce..301ab64 100644 --- a/src/routes/ContactDetails/index.jsx +++ b/src/routes/ContactDetails/index.jsx @@ -266,7 +266,7 @@ const ContactDetails = () => { setIsLoading(false); // toastr.success("Success", "Successfully saved contact details!"); - navigate("/onboard/payment-setup"); + navigate("/onboard/build-my-profile"); }; const selectedCountryObj = React.useMemo( @@ -445,9 +445,14 @@ const ContactDetails = () => {  Back - handleSubmit(e)}> + handleSubmit(e)} + > diff --git a/src/routes/PaymentSetup/Form/index.jsx b/src/routes/PaymentSetup/Form/index.jsx deleted file mode 100644 index e41c61d..0000000 --- a/src/routes/PaymentSetup/Form/index.jsx +++ /dev/null @@ -1,169 +0,0 @@ -import React from "react"; -import { navigate } from "@reach/router"; - -import Page from "components/Page"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import ForwardIcon from "../../../assets/images/icon-forward.svg"; -import { - BUTTON_TYPE, - PAYMENT_STEPS, - FORM_DETAILS, - IRS_W9_URL, - IRS_W8_BEN_URL, -} from "constants"; -import { useSelector } from "react-redux"; -import withAuthentication from "hoc/withAuthentication"; -import PageDivider from "components/PageDivider"; -import StepsIndicator from "components/StepsIndicator"; -import PageH1 from "components/PageElements/PageH1"; -import PageP from "components/PageElements/PageP"; -import IconBackArrow from "../../../assets/images/icon-back-arrow.svg"; -import PageFoot from "components/PageElements/PageFoot"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import "./styles.module.scss"; - -/** - * This component shows the different tax forms available - * @returns - */ -const TaxForm = ({ formName }) => { - const authUser = useSelector((state) => state.authUser); - const formDetails = FORM_DETAILS[formName]; - const [myProfileData, setMyProfileData] = React.useState({}); - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - const onBack = () => { - navigate("/onboard/payment-setup/tax-form"); - }; - - const onGotoTaxInfo = () => { - navigate(`/onboard/payment-setup/tax-form/${formName}/info`); - }; - - const onCompleteForm = () => { - window.open(formDetails.formUrl); - navigate(`/onboard/payment-setup/tax-form/${formName}/confirm`); - }; - - const onSeeInstructions = () => { - window.open(formName === "w-9" ? IRS_W9_URL : IRS_W8_BEN_URL, "_blank"); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - Complete tax form -
    -
    - -
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - {`Form ${formName}`} - -
    - - - - {`Why do I need to complete Form ${formName}?`} - -
    -
    - {formDetails.answer} - {formName === "w-8ben" && ( - <> -
    -
    {formDetails.infoLabel}
    -
    - -
    -
    -
    - - )} -
    -
    - - - -
    -
    - - - - - - - -
    - - ); -}; - -export default withAuthentication(TaxForm); diff --git a/src/routes/PaymentSetup/Form/styles.module.scss b/src/routes/PaymentSetup/Form/styles.module.scss deleted file mode 100644 index 71d7c3d..0000000 --- a/src/routes/PaymentSetup/Form/styles.module.scss +++ /dev/null @@ -1,307 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - padding: 0 95px 32px 95px; - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .tax-form-w9 { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .complete-tax-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .tax-form-title { - @include font-barlow-condensed; - font-weight: 500; - font-size: 48px; - line-height: 48px; - margin-top: 22px; - margin-bottom: 24px; - @include mobile { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - // The margin top is 14px which combines with the margin of the divider to become 24px - margin-top: 14px; - margin-bottom: 16px; - } - } - - .tax-form-description { - @include font-roboto; - font-weight: 500; - font-size: 16px; - line-height: 24px; - color: $grey-text; - margin-bottom: 48px; - @include mobile { - font-size: 14px; - line-height: 22px; - margin-bottom: 32px; - } - } - - .why-complete { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - color: $grey-text; - margin-top: 24px; - margin-bottom: 24px; - @include mobile { - font-size: 16px; - line-height: 20px; - } - } - - .container { - display: flex; - flex-direction: row; - margin-bottom: 48px; - @include mobile { - flex-direction: column; - margin-bottom: 46px; - } - .left-pane { - flex: 1; - margin-right: 48px; - @include mobile { - margin-right: 0; - margin-bottom: 32px; - } - .answer { - @include font-roboto; - font-weight: 400; - font-size: 16px; - line-height: 26px; - color: $grey-text; - margin: 0; - } - - .tax-info { - font-size: 16px; - @include font-roboto; - font-weight: 500; - line-height: 16px; - padding: 0; - color: $green1; - margin-top: 24px; - margin-bottom: 16px; - display: flex; - align-items: center; - cursor: pointer; - .forward-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 14px; - @include font-roboto; - font-weight: 500; - line-height: 22px; - } - .button-text { - margin-right: 10px; - @include mobile { - word-break: break-all; - } - } - } - - .extra-details { - p { - @include font-roboto; - font-size: 16px; - line-height: 26px; - color: $grey-text; - } - ul { - list-style: disc; - list-style-position: outside; - padding-left: 24px; - margin-bottom: 16px; - li { - @include font-roboto; - font-size: 16px; - line-height: 26px; - color: $grey-text; - } - } - } - } - .right-pane { - flex: 1; - .see-instructions-desktop { - height: 40px; - padding: 14px 20px; - margin-bottom: 16px; - border-radius: 25px; - @include font-roboto; - font-size: 14px; - line-height: 12px; - @include mobile { - display: none; - } - } - - .see-instructions-mobile { - height: 40px; - padding: 14px 20px; - margin-bottom: 16px; - border-radius: 25px; - @include font-roboto; - font-size: 14px; - line-height: 12px; - @include desktop { - display: none; - } - } - - .complete-form-cta { - height: 40px; - padding: 14px 20px; - border-radius: 25px; - @include font-roboto; - font-size: 14px; - line-height: 12px; - } - } - } - - .footer { - @include mobile { - margin-top: 32px; - justify-content: flex-start !important; - align-items: flex-start !important; - } - justify-content: flex-start; - .footer-back-button { - padding: 18px 30px 18px 34px; - border-radius: 25px; - height: 48px; - @include mobile { - height: 40px; - padding: 14px 14px 14px 24px; - } - .footer-back-button-text { - margin-left: 9px; - font-size: 20px; - font-weight: 700; - @include font-roboto; - @include mobile { - font-size: 14px; - line-height: 12px; - } - } - } - } - - .page-divider { - border-bottom: 2px solid $divider-color; - } - } - } -} - -@media screen and (max-width: 425px) { - .footer { - .footer-back-button { - padding: 14px 24px 14px 24px !important; - } - - .footer-back-button-text { - display: none; - } - } -} \ No newline at end of file diff --git a/src/routes/PaymentSetup/PaymentComplete/index.jsx b/src/routes/PaymentSetup/PaymentComplete/index.jsx deleted file mode 100644 index a93ecdc..0000000 --- a/src/routes/PaymentSetup/PaymentComplete/index.jsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from "react"; -import { useSelector } from "react-redux"; -import { navigate } from "@reach/router"; - -import Page from "components/Page"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import { BUTTON_TYPE, PAYMENT_STEPS } from "constants"; -import PageDivider from "components/PageDivider"; -import withAuthentication from "hoc/withAuthentication"; -import PageH1 from "components/PageElements/PageH1"; -import PageH3 from "components/PageElements/PageH3"; -import PageP from "components/PageElements/PageP"; -import PageFoot from "components/PageElements/PageFoot"; -import StepsIndicator from "components/StepsIndicator"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import "./styles.module.scss"; - -const PaymentComplete = () => { - const authUser = useSelector((state) => state.authUser); - const [myProfileData, setMyProfileData] = React.useState({}); - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - - select your payment service - -
    -
    - -
    -
    - -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - Thank You! - - - - You have submitted account details to topcoder support - - - Once Payments Set-up has been confirmed, you will be able to manage - payments from your Topcoder account.
    For more information, - see:{" "} - - Topcoder Payment Policies - -     - - - - -     -
    -     - ); -}; - -export default withAuthentication(PaymentComplete); diff --git a/src/routes/PaymentSetup/PaymentComplete/styles.module.scss b/src/routes/PaymentSetup/PaymentComplete/styles.module.scss deleted file mode 100644 index 6fff5a2..0000000 --- a/src/routes/PaymentSetup/PaymentComplete/styles.module.scss +++ /dev/null @@ -1,166 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .payment-complete { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .payment-service-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .thank-you { - font-size: 48px; - @include font-barlow-condensed; - font-weight: 500; - margin-top: 32px; - margin-bottom: 48px; - color: $grey-text; - @include mobile { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - margin-top: 24px; - margin-bottom: 32px; - } - } - - .submitted-text { - font-size: 20px; - line-height: 20px; - font-family: Barlow; - font-weight: 600; - margin: 24px 0; - color: $grey-text; - @include mobile { - font-size: 16px; - line-height: 20px; - font-weight: 600; - } - } - - .instructions { - @include font-roboto; - font-size: 16px; - line-height: 26px; - color: $grey-text; - max-width: 568px; - a { - color: #2e55b9; - } - } - - .link { - color: #2e55b9; - } - - .complete-page-footer { - justify-content: flex-start; - @include mobile { - margin-top: 32px; - justify-content: flex-start !important; - align-items: flex-start !important; - } - .continue-button { - padding: 14px 20px; - border-radius: 25px; - height: 40px; - } - } - } - .page-divider { - border-bottom: 2px solid $divider-color; - } - } -} diff --git a/src/routes/PaymentSetup/PaymentMethod/index.jsx b/src/routes/PaymentSetup/PaymentMethod/index.jsx index f24a677..f8736d0 100644 --- a/src/routes/PaymentSetup/PaymentMethod/index.jsx +++ b/src/routes/PaymentSetup/PaymentMethod/index.jsx @@ -5,13 +5,12 @@ import PageContent from "components/PageContent"; import PageH2 from "components/PageElements/PageH2"; import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; +import Modal from "components/Modal"; import IconBackArrow from "../../../assets/images/icon-back-arrow.svg"; import { BUTTON_TYPE, PAYMENT_METHOD_MAP, PAYMENT_METHOD_DETAILS_MAP, - PAYMENT_STEPS, PAYMENT_METHOD_MOBILE_MAP, } from "constants"; import { useSelector } from "react-redux"; @@ -21,7 +20,6 @@ import Checkbox from "rc-checkbox"; import EmailDetails from "components/EmailDetails"; import PageFoot from "components/PageElements/PageFoot"; import PageP from "components/PageElements/PageP"; -import StepsIndicator from "components/StepsIndicator"; import "rc-checkbox/assets/index.css"; import styles from "./styles.module.scss"; @@ -33,7 +31,12 @@ import { PAYMENT_PROVIDER } from "constants/"; * This page is shown when the user selects one of the payment methods from payment providers page * @returns */ -const PaymentMethod = ({ paymentMethod }) => { +const PaymentMethod = ({ + paymentMethod, + show = false, + handleClose = (f) => f, + handleConfirm = (f) => f, +}) => { const authUser = useSelector((state) => state.authUser); const [emailedDetails, setEmailedDetails] = useState(false); const [myProfileData, setMyProfileData] = React.useState({}); @@ -51,14 +54,6 @@ const PaymentMethod = ({ paymentMethod }) => { setEmailedDetails(event.target.checked); }; - const onBack = () => { - navigate("/onboard/payment-setup/payment-provider"); - }; - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - const { important, conditions, url } = PAYMENT_METHOD_DETAILS_MAP[ paymentMethod ]; @@ -72,9 +67,8 @@ const PaymentMethod = ({ paymentMethod }) => { `${authUser?.handle}_${PAYMENT_PROVIDER}`, paymentMethod ); - navigate( - `/onboard/payment-setup/payment-provider/${paymentMethod}/complete` - ); + handleConfirm(); + handleClose(); }; // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData @@ -84,112 +78,93 @@ const PaymentMethod = ({ paymentMethod }) => { .then((result) => { setMyProfileData(result); }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); + .catch((e) => {}); }, [authUser]); return ( - -
    Member Onboarding
    -
    - -
    -
    - - - select your payment service - -
    -
    - + + +
    + +
    +
    + + {`connect your ${PAYMENT_METHOD_MAP[paymentMethod]} account`} + +
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - + -
    -
    - -
    - +
    + +
    + + +
    +     +     ); }; diff --git a/src/routes/PaymentSetup/PaymentMethod/styles.module.scss b/src/routes/PaymentSetup/PaymentMethod/styles.module.scss index c49c1f2..3e8a1b2 100644 --- a/src/routes/PaymentSetup/PaymentMethod/styles.module.scss +++ b/src/routes/PaymentSetup/PaymentMethod/styles.module.scss @@ -1,9 +1,8 @@ @import "styles/include"; .page-wrapper { - @include mobile { - padding: 0; - } + padding: 0; + .page-title { background-color: white; padding: 12px 24px; @@ -23,7 +22,9 @@ padding: 16px 8px 16px 8px; } .page-content { - padding: 38px 32px 32px 32px; + padding: 20px; + margin: 0; + @include mobile { padding: 16px 19px; margin: 0; @@ -53,9 +54,6 @@ @include font-roboto; margin-bottom: 10px; } - .button-text { - margin-left: 6px; - } } .payment-service-title { margin: 0; @@ -296,9 +294,9 @@ .footer-back-button { padding: 14px 24px 14px 24px !important; } - - .footer-back-button-text { - display: none; - } } -} \ No newline at end of file +} + +.modal-inner-no-max-width { + max-width: none !important; +} diff --git a/src/routes/PaymentSetup/PaymentProviders/index.jsx b/src/routes/PaymentSetup/PaymentProviders/index.jsx deleted file mode 100644 index 096b628..0000000 --- a/src/routes/PaymentSetup/PaymentProviders/index.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import React from "react"; -import { navigate } from "@reach/router"; - -import Page from "components/Page"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import { BUTTON_TYPE, PAYMENT_STEPS } from "constants"; -import { useSelector } from "react-redux"; -import withAuthentication from "hoc/withAuthentication"; -import PageDivider from "components/PageDivider"; -import PageH1 from "components/PageElements/PageH1"; -import PageP from "components/PageElements/PageP"; -import PaymentMethods from "components/PaymentMethods"; -import StepsIndicator from "components/StepsIndicator"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import "./styles.module.scss"; - -/** - * The page shown where the payment providers are shown - * @returns - */ -const PaymentProviders = () => { - const authUser = useSelector((state) => state.authUser); - const [myProfileData, setMyProfileData] = React.useState({}); - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - - select your payment service - -
    -
    - -
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - - Connect a Payment Service Provider - - - Topcoder currently supports 3 payment providers - Payoneer, PayPal, - and Western Union. After you set up an account with a provider, you - must complete the process by emailing the provider and account - details to Topcoder support. See More Information about each - provider below and at the provider’s website. - - - Select a provider below to get more information to set up an - account. Make sure your legal name and address are accurate in your - profile in order to be paid. - - - Select a provider below to get more information to set up an - account. - - - Make sure your legal name and address are accurate in your profile - in order to be paid. - - - - 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.{" "} - -     -
    -     - ); -}; - -export default withAuthentication(PaymentProviders); diff --git a/src/routes/PaymentSetup/PaymentProviders/styles.module.scss b/src/routes/PaymentSetup/PaymentProviders/styles.module.scss deleted file mode 100644 index dea208a..0000000 --- a/src/routes/PaymentSetup/PaymentProviders/styles.module.scss +++ /dev/null @@ -1,179 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .payment-providers { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .payment-service-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - .connect-service-title { - font-size: 48px; - line-height: 48px; - font-weight: 500; - margin-bottom: 24px; - margin-top: 32px; - color: $grey-text; - @include font-barlow-condensed; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 20px; - line-height: 20px; - } - } - .description { - margin-top: 0; - margin-bottom: 48px; - @include font-roboto; - font-weight: 400; - font-size: 16px; - line-height: 26px; - color: $grey-text; - } - - .select-info-desktop { - font-weight: 500; - font-size: 16px; - @include font-roboto; - line-height: 24px; - color: $grey-text; - margin: 0; - @include mobile { - display: none; - } - } - - .select-info-mobile-part-one { - font-weight: 500; - font-size: 14px; - line-height: 22px; - @include font-roboto; - margin-bottom: 32px; - @include desktop { - display: none; - } - } - - .select-info-mobile-part-two { - font-weight: 500; - font-size: 14px; - line-height: 22px; - @include font-roboto; - margin-bottom: 0; - @include desktop { - display: none; - } - } - - .footer-note { - font-size: 12px; - line-height: 16px; - font-weight: 400; - line-height: 16px; - @include font-roboto; - color: $black; - margin-top: 22px; - @include mobile { - display: none; - } - } - - .page-divider { - border-bottom: 2px solid $divider-color; - } - } - } -} diff --git a/src/routes/PaymentSetup/TaxComplete/index.jsx b/src/routes/PaymentSetup/TaxComplete/index.jsx deleted file mode 100644 index fc629f7..0000000 --- a/src/routes/PaymentSetup/TaxComplete/index.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from "react"; -import { navigate } from "@reach/router"; - -import Page from "components/Page"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import { BUTTON_TYPE, PAYMENT_STEPS } from "constants"; -import { useSelector } from "react-redux"; -import withAuthentication from "hoc/withAuthentication"; -import PageDivider from "components/PageDivider"; -import StepsIndicator from "components/StepsIndicator"; -import PageH1 from "components/PageElements/PageH1"; -import PageP from "components/PageElements/PageP"; -import PageFoot from "components/PageElements/PageFoot"; -import PageH3 from "components/PageElements/PageH3"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import "./styles.module.scss"; - -/** - * Page shown after the successful completion of the tax form submission - * @returns - */ -const TaxComplete = ({ formName }) => { - const authUser = useSelector((state) => state.authUser); - const [myProfileData, setMyProfileData] = React.useState({}); - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - Complete tax form -
    -
    - -
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - Thank You! - - {`Your ${formName} Tax Form was submitted via DocuSign.`} - -

    - You will receive confirmation from Topcoder via email to - acknowledge receipt. -

    - After processing, your Member Profile will reflect that you have - completed this step. -     - - - -     -
    -     - ); -}; - -export default withAuthentication(TaxComplete); diff --git a/src/routes/PaymentSetup/TaxComplete/styles.module.scss b/src/routes/PaymentSetup/TaxComplete/styles.module.scss deleted file mode 100644 index 537a5a4..0000000 --- a/src/routes/PaymentSetup/TaxComplete/styles.module.scss +++ /dev/null @@ -1,167 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .tax-complete { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .complete-tax-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .tax-complete-title { - @include font-barlow-condensed; - font-weight: 500; - font-size: 48px; - line-height: 48px; - margin-top: 32px; - margin-bottom: 48px; - @include mobile { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - margin-top: 24px; - margin-bottom: 32px; - } - } - - .information { - margin-top: 24px; - margin-bottom: 24px; - font-family: Barlow; - font-weight: 600; - font-size: 20px; - line-height: 20px; - } - - .confirmation-text { - max-width: 568px; - font-size: 16px; - @include font-roboto; - font-weight: 400; - line-height: 26px; - @include mobile { - p { - margin-bottom: 38px; - } - } - } - - .footer { - margin-top: 32px; - @include mobile { - margin-top: 32px; - justify-content: flex-start !important; - align-items: flex-start !important; - } - justify-content: flex-start; - .footer-continue-button { - padding: 18px 30px 18px 34px; - border-radius: 25px; - height: 48px; - font-size: 14px; - line-height: 12px; - @include mobile { - height: 40px; - padding: 14px 14px 14px 24px; - } - } - } - - .page-divider { - border-bottom: 2px solid $divider-color; - } - } - } -} diff --git a/src/routes/PaymentSetup/TaxConfirm/index.jsx b/src/routes/PaymentSetup/TaxConfirm/index.jsx deleted file mode 100644 index 4d2b68f..0000000 --- a/src/routes/PaymentSetup/TaxConfirm/index.jsx +++ /dev/null @@ -1,155 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "@reach/router"; -import Checkbox from "rc-checkbox"; - -import Page from "components/Page"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import { BUTTON_TYPE, PAYMENT_STEPS, FORM_DETAILS } from "constants"; -import { useSelector } from "react-redux"; -import withAuthentication from "hoc/withAuthentication"; -import PageDivider from "components/PageDivider"; -import StepsIndicator from "components/StepsIndicator"; -import PageH1 from "components/PageElements/PageH1"; -import PageP from "components/PageElements/PageP"; -import IconBackArrow from "../../../assets/images/icon-back-arrow.svg"; -import PageFoot from "components/PageElements/PageFoot"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import styles from "./styles.module.scss"; -import "rc-checkbox/assets/index.css"; -import { TAX_FORM } from "constants/"; - -/** - * Page shown to get the confirmation from the user on the tax form - * @param {*} param0 - * @returns - */ -const TaxConfirm = ({ formName }) => { - const authUser = useSelector((state) => state.authUser); - const [completedForm, setCompletedForm] = useState(false); - const [myProfileData, setMyProfileData] = useState({}); - const formDetails = FORM_DETAILS[formName]; - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - const onBack = () => { - navigate(`/onboard/payment-setup/tax-form/${formName}`); - }; - - const onChange = (event) => { - setCompletedForm(event.target.checked); - }; - - const onConfirm = () => { - localStorage.setItem(`${authUser?.handle}_${TAX_FORM}`, formName); - navigate(`/onboard/payment-setup/tax-form/${formName}/complete`); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - - Complete tax form - -
    -
    - -
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - {`Form ${formName}`} - -
    - - - - - Did you complete your DocuSign Tax Form? - - -
    -
    - Great! Check that box and click CONTINUE. If not,{" "} - {`please complete Form ${formName.toUpperCase()}`} -
    -
    - -
    -
    - - - - - -
    - -
    -     - -
    - - ); -}; - -export default withAuthentication(TaxConfirm); diff --git a/src/routes/PaymentSetup/TaxConfirm/styles.module.scss b/src/routes/PaymentSetup/TaxConfirm/styles.module.scss deleted file mode 100644 index a601f6d..0000000 --- a/src/routes/PaymentSetup/TaxConfirm/styles.module.scss +++ /dev/null @@ -1,282 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .tax-confirm { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .complete-tax-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .tax-confirm-title { - @include font-barlow-condensed; - font-weight: 500; - font-size: 48px; - line-height: 48px; - margin-top: 22px; - margin-bottom: 24px; - @include mobile { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - margin-top: 24px; - margin-bottom: 16px; - } - } - - .tax-confirm-description { - @include font-roboto; - font-weight: 500; - font-size: 16px; - line-height: 24px; - color: $grey-text; - margin-bottom: 48px; - @include mobile { - font-size: 14px; - line-height: 22px; - margin-bottom: 32px; - } - } - - .did-you-complete { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - color: $grey-text; - margin-top: 24px; - margin-bottom: 24px; - @include mobile { - font-size: 16px; - line-height: 20px; - } - } - - .container { - display: flex; - flex-direction: row; - margin-bottom: 48px; - @include mobile { - flex-direction: column; - margin-bottom: 46px; - } - .left-pane { - flex: 1; - margin-right: 48px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - a { - color: #2e55b9; - } - @include mobile { - margin-right: 0; - margin-bottom: 32px; - } - } - .right-pane { - flex: 1; - .form-input-checkbox { - display: flex; - align-items: center; - - .label { - font-size: 16px; - line-height: 26px; - margin-left: 10px; - @include font-roboto; - font-weight: 400; - .support-email { - color: #2e55b9; - } - } - } - } - } - - .footer { - @include mobile { - 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 mobile { - height: 40px; - padding: 14px 14px 14px 24px; - } - .footer-back-button-text { - margin-left: 9px; - font-size: 20px; - font-weight: 700; - @include font-roboto; - @include mobile { - font-size: 14px; - line-height: 12px; - } - } - } - - .confirm-button-wrapper { - flex: 1; - display: flex; - justify-content: flex-end; - @include mobile { - margin-bottom: 0; - } - .footer-confirm-button { - padding: 18px 30px 18px 34px; - border-radius: 25px; - height: 48px; - font-size: 20px; - font-weight: 700; - @include font-roboto; - @include mobile { - height: 40px; - padding: 14px 20px; - font-size: 14px; - line-height: 12px; - } - } - } - } - - .page-divider { - border-bottom: 2px solid $divider-color; - } - } - } - - /* rc checkbox custom style */ - :global { - .rc-checkbox.confirm-tax-rc-checkbox { - display: flex; - margin-top: 3px; - &.rc-checkbox-checked { - .rc-checkbox-inner { - background-color: #0ab88a; - border-color: #0ab88a; - } - } - .rc-checkbox-inner { - width: 24px !important; - height: 24px !important; - } - - .rc-checkbox-inner:after { - left: 7px !important; - top: 0px !important; - width: 8px !important; - height: 16px !important; - } - } - } -} - -@media screen and (max-width: 425px) { - .footer { - .footer-back-button { - padding: 14px 24px 14px 24px !important; - } - - .footer-back-button-text { - display: none; - } - } -} \ No newline at end of file diff --git a/src/routes/PaymentSetup/TaxForm/index.jsx b/src/routes/PaymentSetup/TaxForm/index.jsx deleted file mode 100644 index 71b38a5..0000000 --- a/src/routes/PaymentSetup/TaxForm/index.jsx +++ /dev/null @@ -1,118 +0,0 @@ -import React from "react"; -import { navigate } from "@reach/router"; -import cn from "classnames"; - -import Page from "components/Page"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import { BUTTON_TYPE, PAYMENT_STEPS } from "constants"; -import { useSelector } from "react-redux"; -import withAuthentication from "hoc/withAuthentication"; -import PageDivider from "components/PageDivider"; -import StepsIndicator from "components/StepsIndicator"; -import PageH1 from "components/PageElements/PageH1"; -import PageP from "components/PageElements/PageP"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import "./styles.module.scss"; - -/** - * This component shows the different tax forms available - * @returns - */ -const TaxForm = () => { - const authUser = useSelector((state) => state.authUser); - const [myProfileData, setMyProfileData] = React.useState({}); - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - const navigateToTaxForm = (name) => { - navigate(`/onboard/payment-setup/tax-form/${name}`); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - Complete tax form -
    -
    - -
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - Select a Tax Form - - All members need to have a tax form on file before they can be paid. - There are two options: a W-9 or a W-8BEN.
    Select a form below - for more information. -     -
    -
    - - - For individuals who are a US citizen or other US person (such as - a resident alien).{" "} - -
    -
    - - - For individuals who are NOT a US citizen or other US person - (such as a foreign person, non-resident alien or foreign - national).{" "} - -
    -
    -     -
    -     - ); -}; - -export default withAuthentication(TaxForm); diff --git a/src/routes/PaymentSetup/TaxForm/styles.module.scss b/src/routes/PaymentSetup/TaxForm/styles.module.scss deleted file mode 100644 index 6fe1a6a..0000000 --- a/src/routes/PaymentSetup/TaxForm/styles.module.scss +++ /dev/null @@ -1,181 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .tax-form { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .complete-tax-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .tax-form-title { - @include font-barlow-condensed; - font-weight: 500; - font-size: 48px; - line-height: 48px; - margin-top: 22px; - margin-bottom: 24px; - @include mobile { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - margin-top: 24px; - margin-bottom: 16px; - } - } - - .tax-form-description { - @include font-roboto; - font-weight: 500; - font-size: 16px; - line-height: 24px; - color: $grey-text; - margin-bottom: 48px; - @include mobile { - font-size: 14px; - line-height: 22px; - margin-bottom: 32px; - } - } - - .forms-list { - display: flex; - flex-direction: row; - @include mobile { - flex-direction: column; - } - .form-item { - flex: 1; - background-color: $grey-bg; - padding: 24px; - border-radius: 8px; - - &.with-margin { - margin-right: 24px; - @include mobile { - margin-right: 0; - margin-bottom: 16px; - } - } - .select-form { - padding: 14px 20px; - height: 40px; - font-weight: 700; - @include font-roboto; - font-size: 14px; - line-height: 12px; - border-radius: 25px; - @include mobile { - height: 32px; - padding: 10px 15px; - } - } - .form-condition { - @include font-roboto; - font-size: 16px; - line-height: 26px; - font-weight: 400; - color: $grey-text; - margin-top: 16px; - } - } - } - - .page-divider { - border-bottom: 2px solid $divider-color; - } - } - } -} diff --git a/src/routes/PaymentSetup/TaxInfo/index.jsx b/src/routes/PaymentSetup/TaxInfo/index.jsx deleted file mode 100644 index c6d398d..0000000 --- a/src/routes/PaymentSetup/TaxInfo/index.jsx +++ /dev/null @@ -1,139 +0,0 @@ -import React, { useEffect } from "react"; -import { navigate } from "@reach/router"; -import cn from "classnames"; - -import Page from "components/Page"; -import PageContent from "components/PageContent"; -import PageH2 from "components/PageElements/PageH2"; -import Button from "components/Button"; -import BackIcon from "../../../assets/images/arrow-left-turquoise.svg"; -import { - BUTTON_TYPE, - PAYMENT_STEPS, - TAX_INFO_CONTENT, - IRS_W8_BEN_URL, -} from "constants"; -import { useSelector } from "react-redux"; -import withAuthentication from "hoc/withAuthentication"; -import PageDivider from "components/PageDivider"; -import StepsIndicator from "components/StepsIndicator"; -import PageH1 from "components/PageElements/PageH1"; -import PageFoot from "components/PageElements/PageFoot"; -import { getAuthUserProfile } from "@topcoder/mfe-header"; - -import "./styles.module.scss"; -import { FORM_DETAILS } from "constants/"; - -/** - * The page shows the information on w-8ben tax form - */ -const TaxInfo = ({ formName }) => { - const authUser = useSelector((state) => state.authUser); - const [myProfileData, setMyProfileData] = React.useState({}); - const formDetails = FORM_DETAILS[formName]; - - useEffect(() => { - // Scroll to top on load of the page - window.scroll({ - top: 0, - left: 0, - behavior: "smooth", - }); - }, []); - - const goToPaymentSetup = () => { - navigate("/onboard/payment-setup"); - }; - - const onCompleteForm = () => { - window.open(formDetails.formUrl); - navigate("/onboard/payment-setup/tax-form/w-8ben/confirm"); - }; - - const onSeeInstructions = () => { - window.open(IRS_W8_BEN_URL, "_blank"); - }; - - // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData - React.useEffect(() => { - if (!authUser || !authUser.handle) return; - getAuthUserProfile() - .then((result) => { - setMyProfileData(result); - }) - .catch((e) => { - // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); - }); - }, [authUser]); - - return ( - -
    Member Onboarding
    -
    - -
    -
    - - Complete tax form -
    -
    - -
    -
    -
    - {`${myProfileData?.firstName || ""} ${ - myProfileData?.lastName || "" - } | ${myProfileData?.handle || ""}`} -
    - - - - Topcoder Tax Information for Form W-8BEN - - - -
    - - -
    - -
    -
    - - -
    -     -     -
    -     - ); -}; - -export default withAuthentication(TaxInfo); diff --git a/src/routes/PaymentSetup/TaxInfo/styles.module.scss b/src/routes/PaymentSetup/TaxInfo/styles.module.scss deleted file mode 100644 index a5b2a4a..0000000 --- a/src/routes/PaymentSetup/TaxInfo/styles.module.scss +++ /dev/null @@ -1,214 +0,0 @@ -@import "styles/include"; - -.page-wrapper { - @include mobile { - padding: 0; - } - .page-title { - background-color: white; - padding: 12px 24px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); - border-radius: 0px 0px 8px 8px; - text-transform: uppercase; - @include font-barlow-condensed; - font-size: 17px; - font-weight: 500; - color: $grey-text; - @include desktop { - display: none; - } - } - .tax-info { - @include mobile { - padding: 16px 8px 16px 8px; - } - .page-content { - padding: 38px 32px 32px 32px; - @include mobile { - padding: 16px 19px; - margin: 0; - } - .page-header { - display: flex; - @include mobile { - flex-direction: column; - } - .left-pane { - flex: 1; - display: flex; - flex-direction: column; - .back-button { - font-size: 16px; - font-family: Barlow; - font-weight: 600; - line-height: 16px; - padding: 0; - color: $green1; - .back-icon-wrapper { - width: 14px; - } - @include mobile { - font-size: 10px; - line-height: 12px; - @include font-roboto; - margin-bottom: 10px; - } - .button-text { - margin-left: 6px; - } - } - .complete-tax-title { - margin: 0; - @include font-barlow-condensed; - font-size: 34px; - font-weight: 500; - - @include mobile { - font-family: Barlow; - font-weight: 600; - font-size: 16px; - line-height: 16px; - } - } - } - - .right-pane { - width: 400px; - display: flex; - align-items: center; - padding: 0 24px; - @include mobile { - width: 100%; - margin-top: 23px; - padding: 0 16px; - margin-bottom: 13px; - } - } - } - .user-name { - margin-top: 30px; - line-height: 26px; - font-size: 16px; - line-height: 26px; - @include font-roboto; - color: $grey-text; - @include mobile { - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - - .tax-info-title { - @include font-barlow-condensed; - font-weight: 500; - font-size: 48px; - line-height: 48px; - color: $grey-text; - margin-top: 32px; - margin-bottom: 48px; - @include mobile { - display: none; - } - } - - .static-content { - margin-top: 24px; - h3 { - font-family: Barlow; - font-size: 20px; - line-height: 20px; - font-weight: 600; - padding-bottom: 38px; - } - - span { - display: block; - @include font-roboto; - font-weight: 400; - font-size: 14px; - line-height: 24px; - padding-bottom: 38px; - @include mobile { - font-size: 16px; - line-height: 26px; - } - } - - ul { - list-style: disc; - list-style-position: outside; - padding-left: 24px; - li { - @include font-roboto; - font-weight: 400; - font-size: 14px; - line-height: 24px; - @include mobile { - font-size: 16px; - line-height: 26px; - } - } - } - } - - .footer { - display: flex; - flex-direction: column; - div { - @include mobile { - margin-bottom: 0; - } - } - @include mobile { - align-items: flex-start !important; - } - .complete-form { - margin-bottom: 16px; - height: 40px; - padding: 14px 20px; - font-size: 14px; - @include font-roboto; - font-weight: 700; - line-height: 12px; - border-radius: 25px; - } - .see-instructions-desktop { - height: 40px; - padding: 14px 20px; - font-size: 14px; - @include font-roboto; - font-weight: 700; - line-height: 12px; - border-radius: 25px; - @include mobile { - display: none; - } - } - - .see-instructions-mobile { - height: 40px; - padding: 14px 20px; - font-size: 14px; - @include font-roboto; - font-weight: 700; - line-height: 12px; - border-radius: 25px; - @include desktop { - display: none; - } - } - } - - .page-divider { - border-bottom: 2px solid $divider-color; - } - - .title-divider { - @include mobile { - display: none; - } - } - } - } -} diff --git a/src/routes/PaymentSetup/index.jsx b/src/routes/PaymentSetup/index.jsx index cd91333..f380025 100644 --- a/src/routes/PaymentSetup/index.jsx +++ b/src/routes/PaymentSetup/index.jsx @@ -4,12 +4,18 @@ import "./styles.module.scss"; import { Link, useNavigate } from "@reach/router"; import { useSelector } from "react-redux"; import withAuthentication from "hoc/withAuthentication"; +import PayoneerLogo from "../../assets/images/Payoneer_logo.svg"; +import PayPaLogo from "../../assets/images/PayPal_logo.svg"; +import WesternUnionLogo from "../../assets/images/Western_Union_Logo.svg"; +import RadioButton from "components/RadioButton"; +import _ from "lodash"; // import components and other stuffs import Page from "components/Page"; import PageContent from "components/PageContent"; import PageH1 from "components/PageElements/PageH1"; import PageH2 from "components/PageElements/PageH2"; +import PageH3 from "components/PageElements/PageH3"; import PageDivider from "components/PageDivider"; import PageFoot from "components/PageElements/PageFoot"; import PageP from "components/PageElements/PageP"; @@ -21,43 +27,39 @@ import { TAX_FORM, PAYMENT_PROVIDER, PAYMENT_METHOD_MAP, + MAX_COMPLETED_STEP, } from "constants"; import { getAuthUserProfile } from "@topcoder/mfe-header"; +import config from "../../../config"; +import { getCookie } from "utils/"; import IconCheck from "../../assets/images/check.svg"; import IconBackArrow from "../../assets/images/icon-back-arrow.svg"; +import PaymentMethods from "components/PaymentMethods"; const PaymentSetup = () => { + const [redirectUrl, setRedirectUrl] = useState( + config.TOPCODER_COMMUNITY_WEBSITE_URL + "/home" + ); const authUser = useSelector((state) => state.authUser); const navigate = useNavigate(); + const [yesToPaymentProvider, setYesToPaymentProvider] = useState(); - const [isTaxFormCompleted, setIsTaxFormCompleted] = useState(false); const [isPaymentServiceSelected, setIsPaymentServiceSelected] = useState( false ); const [myProfileData, setMyProfileData] = useState({}); - const taxForm = localStorage.getItem(`${authUser?.handle}_${TAX_FORM}`); - const paymentService = localStorage.getItem( - `${authUser?.handle}_${PAYMENT_PROVIDER}` + const [paymentService, setPaymentService] = useState( + localStorage.getItem(`${authUser?.handle}_${PAYMENT_PROVIDER}`) ); - const isNextButtonDisabled = !isTaxFormCompleted || !isPaymentServiceSelected; - - function completeTaxForm() { - navigate("/onboard/payment-setup/tax-form"); - } - - function selectPaymentService() { - navigate("/onboard/payment-setup/payment-provider"); - } + const isNextButtonDisabled = + !isPaymentServiceSelected && paymentService !== "No"; React.useEffect(() => { - setIsTaxFormCompleted( - !!localStorage.getItem(`${authUser?.handle}_${TAX_FORM}`) - ); - setIsPaymentServiceSelected( - !!localStorage.getItem(`${authUser?.handle}_${PAYMENT_PROVIDER}`) - ); - }, []); + if (paymentService !== "No") { + setIsPaymentServiceSelected(!!paymentService); + } + }, [paymentService]); // Get Member data from redux (firstName, lastName, handle, photoURL) and store it on myProfileData React.useEffect(() => { @@ -65,10 +67,13 @@ const PaymentSetup = () => { getAuthUserProfile() .then((result) => { setMyProfileData(result); + const url = getCookie("returnAfterOnboard"); + if (url != null) { + setRedirectUrl(url); + } }) .catch((e) => { // toastr.error('Error', 'failed to get profile basic infos!'); - console.log(e); }); }, [authUser]); @@ -81,74 +86,96 @@ const PaymentSetup = () => { myProfileData?.lastName || "" } | ${myProfileData?.handle || ""}`} - Get paid for your work. - - In order to be paid, you must complete BOTH steps below. - -
    - {!isTaxFormCompleted && ( -
    - - All members must have a tax form on file before they can be - paid. There are two options: a W-9 or a W-8BEN. - - - We will walk you through completing your tax form. - - -
    - )} - {isTaxFormCompleted && ( - - )} - {!isPaymentServiceSelected && ( -
    - - Topcoder is partnered with several payment providers to send - payments to our community members. Once setup, payments - automatically flow into your chosen payment provider at the - completion of work. - - - Currently, members can be paid through one of the following - providers: Payoneer®, PayPal®, or Western Union. - - -
    - )} +
    +
    + WE WANT TO PAY YOU + + To get paid you need to complete 2 simple steps, which + officially allows us to transfer funds to you. + +
    +
    + + + +
    +
    + +
    +
    + YOUR PAYMENT PROVIDER +
    {isPaymentServiceSelected && ( )}
    - - Once Payments Set-up has been completed, you will be able to manage - payments from your Topcoder account.
    For more information, - see:{" "} - - Topcoder Payment Policies - -     + + {(!isPaymentServiceSelected || paymentService === "No") && ( +
    +
    + + Would you like to select your payment provider now? + +
    +
    + { + const selectedItem = _.find(items, { value: true }); + if (selectedItem) { + setYesToPaymentProvider(selectedItem.label === "Yes"); + if (selectedItem.label === "No, not at this time") { + localStorage.setItem( + `${authUser?.handle}_${PAYMENT_PROVIDER}`, + "No" + ); + setPaymentService("No"); + } else { + localStorage.removeItem( + `${authUser?.handle}_${PAYMENT_PROVIDER}` + ); + setPaymentService(""); + } + } + }} + size="sm" + options={[ + { + label: "Yes", + value: false, + }, + { + label: "No, not at this time", + value: false, + }, + ]} + selectedOption={ + paymentService === "No" ? "No, not at this time" : "" + } + /> +
    +
    + )} + + {yesToPaymentProvider && !isPaymentServiceSelected && ( + { + setPaymentService( + localStorage.getItem( + `${authUser?.handle}_${PAYMENT_PROVIDER}` + ) + ); + }} + /> + )} + {(!yesToPaymentProvider || isPaymentServiceSelected) && ( + - + diff --git a/src/routes/PaymentSetup/styles.module.scss b/src/routes/PaymentSetup/styles.module.scss index c00c71f..17ab8b1 100644 --- a/src/routes/PaymentSetup/styles.module.scss +++ b/src/routes/PaymentSetup/styles.module.scss @@ -6,6 +6,16 @@ flex-wrap: wrap; align-items: stretch; margin-bottom: 22px; + + &.cards1 { + margin-top: 30px; + margin-bottom: 30px; + } + + &.cards2 { + margin-top: 30px; + margin-bottom: 0; + } } .card { width: calc(50% - 12px); @@ -19,6 +29,18 @@ display: flex; flex-direction: column; gap: 24px; + + &.card1 { + background: transparent; + gap: 0; + padding: 0; + } + + &.logos { + flex-direction: row; + padding: 0 24px; + gap: 30px; + } & > p { margin: 0; } @@ -52,17 +74,16 @@ } .success-container { - background: linear-gradient(264.69deg, #017c6d 2.17%, #198807 97.49%); + background: linear-gradient(264.69deg, #198807 2.17%, #017c6d 97.49%); border-radius: 8px; display: flex; align-items: center; color: white; - padding: 24px; + padding: 0 24px; align-self: start; width: calc(50% - 12px); height: 120px; flex-grow: 1; - text-transform: uppercase; line-height: 24px; svg { margin-right: 18px; @@ -110,3 +131,7 @@ } } } + +.bottom-space { + margin-bottom: 200px; +} From 956f5d78f8027094cdf64bf9c598e60b30de1108 Mon Sep 17 00:00:00 2001 From: Justin Gasper Date: Fri, 13 May 2022 15:39:42 +1000 Subject: [PATCH 2/2] QA to skills list https://github.com/topcoder-platform/micro-frontends-onboarding-app/issues/186 --- src/components/AddSkillsModal/index.jsx | 1 + src/components/SkillsList/index.jsx | 1 + src/constants/skills-dev.json | 6 ++++++ 3 files changed, 8 insertions(+) diff --git a/src/components/AddSkillsModal/index.jsx b/src/components/AddSkillsModal/index.jsx index 01b8413..845451c 100644 --- a/src/components/AddSkillsModal/index.jsx +++ b/src/components/AddSkillsModal/index.jsx @@ -33,6 +33,7 @@ const AddSkillsModal = ({ { id: "Design/UX", label: "Design / UX" }, { id: "Development", label: "Development" }, { id: "Data Science", label: "Data Science" }, + { id: "QA", label: "QA" }, ]); const [selectedCategory, setSelectedCategory] = useState(categories[0]); diff --git a/src/components/SkillsList/index.jsx b/src/components/SkillsList/index.jsx index b792900..84b14bb 100644 --- a/src/components/SkillsList/index.jsx +++ b/src/components/SkillsList/index.jsx @@ -15,6 +15,7 @@ const SkillsList = ({ selecteds, onNewSkillClicked, handleSkillRemove }) => { { id: "Design/UX", label: "Design / UX Skills" }, { id: "Development", label: "Developer Skills" }, { id: "Data Science", label: "Data Science Skills" }, + { id: "QA", label: "QA" }, ]; // render selected skills diff --git a/src/constants/skills-dev.json b/src/constants/skills-dev.json index 337f0f1..134320a 100644 --- a/src/constants/skills-dev.json +++ b/src/constants/skills-dev.json @@ -4622,5 +4622,11 @@ "label": "Syncback", "category": "Development", "rank": 30 + }, + { + "id": "0e3e2797-ff9e-4cd2-b16e-f6bfe60fd031", + "label": "QA", + "category": "QA", + "rank": 15 } ]