Skip to content

Commit 95d9e4a

Browse files
kkartunovkkartunov
committed
Extract payment info modal as separate component
1 parent cb657e9 commit 95d9e4a

File tree

3 files changed

+252
-0
lines changed

3 files changed

+252
-0
lines changed

‎src/apps/accounts/src/settings/tabs/payments/payment-info-modal/PaymentInfoModal.module.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import '@libs/ui/styles/includes';
2+
3+
.infoModal {
4+
:global(.react-responsive-modal-closeButton) {
5+
display: flex;
6+
}
7+
8+
.modalContent {
9+
display: grid;
10+
grid-template-columns: 1fr 2fr;
11+
12+
@include ltelg {
13+
grid-template-columns: 1fr;
14+
}
15+
16+
.modalContentLeft,
17+
.modalContentRight {
18+
display: flex;
19+
flex-direction: column;
20+
align-items: flex-start;
21+
22+
h4 {
23+
margin-bottom: $sp-4;
24+
}
25+
}
26+
27+
.modalContentLeft {
28+
padding-right: $sp-8;
29+
border-right: 2px solid $black-10;
30+
31+
.infoSection {
32+
background-color: $orange-25;
33+
padding: $sp-4;
34+
border-radius: 8px;
35+
display: flex;
36+
flex-direction: column;
37+
align-items: flex-start;
38+
39+
.infoItemsList {
40+
list-style-type: disc;
41+
margin-left: $sp-5;
42+
}
43+
}
44+
45+
.checkboxWrap {
46+
display: flex;
47+
align-items: center;
48+
margin-top: $sp-6;
49+
}
50+
}
51+
52+
.modalContentRight {
53+
padding-left: $sp-8;
54+
55+
p {
56+
margin-bottom: $sp-4;
57+
}
58+
59+
.warnText {
60+
color: $red-120;
61+
font-weight: $font-weight-bold;
62+
}
63+
64+
button {
65+
margin-top: $sp-6;
66+
}
67+
}
68+
}
69+
}

‎src/apps/accounts/src/settings/tabs/payments/payment-info-modal/PaymentInfoModal.tsx‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import { FC } from 'react'
2+
3+
import { BaseModal, Button, InputText } from '~/libs/ui'
4+
5+
import styles from './PaymentInfoModal.module.scss'
6+
7+
interface PaymentInfoModalProps {
8+
hasEmailedSupport: boolean
9+
selectedPaymentProvider: string
10+
handlePaymentSelection: () => void
11+
handleModalClose: () => void
12+
handleCheckboxChange: () => void
13+
handleVisitProviderClick: () => void
14+
}
15+
16+
const PaymentInfoModal: FC<PaymentInfoModalProps> = (props: PaymentInfoModalProps) => (
17+
<BaseModal
18+
buttons={(
19+
<Button
20+
primary
21+
size='lg'
22+
label='Confirm'
23+
disabled={!props.hasEmailedSupport}
24+
onClick={props.handlePaymentSelection}
25+
/>
26+
)}
27+
onClose={props.handleModalClose}
28+
open
29+
size='body'
30+
title={`CONNECT YOUR ${props.selectedPaymentProvider} ACCOUNT`}
31+
classNames={{ modal: styles.infoModal }}
32+
>
33+
<div className={styles.modalContent}>
34+
<div className={styles.modalContentLeft}>
35+
<div className={styles.infoSection}>
36+
<h4>
37+
DO YOU HAVE YOUR
38+
{' '}
39+
{props.selectedPaymentProvider}
40+
{' '}
41+
ACCOUNT DETAILS? GREAT!
42+
</h4>
43+
<ul className={styles.infoItemsList}>
44+
<li>
45+
Email
46+
{' '}
47+
<a href='mailto:support@topcoder.com'>support@topcoder.com</a>
48+
</li>
49+
<li>Subject Line: Topcoder Payment Provider</li>
50+
<li>In the email include:</li>
51+
<ul className={styles.infoItemsList}>
52+
<li>Topcoder handle (your username when registering)</li>
53+
{
54+
props.selectedPaymentProvider === 'Payoneer' && (
55+
<>
56+
<li>Payoneer Customer ID</li>
57+
<li>Payoneer Email Address</li>
58+
</>
59+
)
60+
}
61+
{
62+
props.selectedPaymentProvider === 'PayPal' && (
63+
<>
64+
<li>PayPal Email Address</li>
65+
<li>
66+
Please DO NOT provide a link to your PayPal account.
67+
We only need your PayPal email address.
68+
</li>
69+
</>
70+
)
71+
}
72+
{
73+
props.selectedPaymentProvider === 'Western Union' && (
74+
<>
75+
<li>
76+
Topcoder Email Address (the email address you used to register)
77+
</li>
78+
</>
79+
)
80+
}
81+
</ul>
82+
</ul>
83+
</div>
84+
<div className={styles.checkboxWrap}>
85+
<InputText
86+
label=' '
87+
checked={props.hasEmailedSupport}
88+
type='checkbox'
89+
name='hasEmailedSupport'
90+
onChange={props.handleCheckboxChange}
91+
tabIndex={0}
92+
value={props.hasEmailedSupport}
93+
/>
94+
<p>
95+
Yes, I have emailed my details to
96+
{' '}
97+
<a href='mailto:support@topcoder.com'>support@topcoder.com</a>
98+
</p>
99+
</div>
100+
</div>
101+
<div className={styles.modalContentRight}>
102+
<h4>
103+
Create
104+
{' '}
105+
{props.selectedPaymentProvider}
106+
{' '}
107+
Account
108+
</h4>
109+
110+
<p className={styles.warnText}>
111+
Important: After you create an account, please email support@topcoder.com
112+
with the information outlined
113+
</p>
114+
115+
{
116+
props.selectedPaymentProvider === 'Payoneer' && (
117+
<p>
118+
You can elect to receive payments through Payoneer either to your Payoneer
119+
prepaid MasterCard or by using their Global Bank Transfer service.
120+
The Payoneer Bank Transfer Service offers a local bank transfer option
121+
(where available) and a wire transfer option. Certain fees may apply.
122+
</p>
123+
)
124+
}
125+
126+
{
127+
props.selectedPaymentProvider === 'PayPal' && (
128+
<p>
129+
You can elect to receive payments deposited directly to your PayPal account.
130+
Certain fees may apply.
131+
</p>
132+
)
133+
}
134+
135+
{
136+
props.selectedPaymentProvider === 'Western Union' && (
137+
<>
138+
<p>
139+
You can elect to be paid via wire transfer through Western Union.
140+
There is a US $8 charge for each payment processed by Western Union,
141+
which will be deducted from the amount owed to you. You can elect
142+
to be paid in either USD or your local currency. However, Western Union
143+
does not disclose it’s fees to convert to your local currency so we
144+
recommend you choose to receive USD. You may then be subject to
145+
conversion fees by your local bank.
146+
</p>
147+
<p>
148+
<strong className='body-main-bold'>Important: </strong>
149+
Use your Topcoder handle as the Payee ID during registration.
150+
Use the Preferred Form of Payment as “Fastest,” rather than “Least Cost.”
151+
“Least Cost” uses ACH as a form of payment, which is not
152+
supported in all countries.
153+
</p>
154+
<p>
155+
If you elect to be paid by Western Union, your payment request will
156+
be queued and processed semi-monthly, on the 15th and last business
157+
day of the month. If the 15th or last day of the month falls on a
158+
weekend or holiday, Western Union payments will be processed
159+
the next business day.
160+
</p>
161+
<p>
162+
In order to be included in the semi-monthly payments,
163+
you need to select which payments you would like to be paid
164+
for by 10:00 AM EST on the day of the scheduled payment.
165+
</p>
166+
</>
167+
)
168+
}
169+
170+
<Button
171+
primary
172+
size='lg'
173+
label={`Visit ${props.selectedPaymentProvider} to create an account`}
174+
onClick={props.handleVisitProviderClick}
175+
disabled={props.hasEmailedSupport}
176+
/>
177+
</div>
178+
</div>
179+
</BaseModal>
180+
)
181+
182+
export default PaymentInfoModal

‎src/apps/accounts/src/settings/tabs/payments/payment-info-modal/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as PaymentInfoModal } from './PaymentInfoModal'

0 commit comments

Comments
 (0)