Skip to content

Commit 7395f2b

Browse files
dedywahyudidedywahyudi
committed
fix: payment providers modal text
1 parent a1068cc commit 7395f2b

File tree

4 files changed

+81
-67
lines changed

4 files changed

+81
-67
lines changed

‎src/shared/components/Settings/Payment/PaymentMethod/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const PaymentMethod = ({
109109
onClick={onVisitPaymentProvider}
110110
disabled={emailedDetails}
111111
>
112-
{`Visit ${PAYMENT_METHOD_MAP[paymentMethod]} to create account`}
112+
{`Visit ${PAYMENT_METHOD_MAP[paymentMethod]} to create an account`}
113113
</Button>
114114
</div>
115115
</div>

‎src/shared/components/Settings/Payment/PaymentProvider/index.jsx‎

Lines changed: 69 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -128,71 +128,77 @@ const PaymentProvider = ({ handleConfirm, handle }) => {
128128

129129
{
130130
!selectedMode ? (
131-
<div styleName="payment-methods">
132-
{PAYMENT_METHODS.map(method => (
133-
<div styleName="payment-method-card">
134-
<div styleName="">
135-
{PAYMENT_METHOD_MAP[method.name] === 'Payoneer' && (
136-
<PayoneerLogo />
137-
)}
138-
{PAYMENT_METHOD_MAP[method.name] === 'PayPal' && <PayPalLogo />}
139-
{PAYMENT_METHOD_MAP[method.name] === 'Western Union' && (
140-
<WesternUnionLogo />
141-
)}
131+
<div>
132+
<div styleName="payment-methods">
133+
{PAYMENT_METHODS.map(method => (
134+
<div styleName="payment-method-card">
135+
<div styleName="">
136+
{PAYMENT_METHOD_MAP[method.name] === 'Payoneer' && (
137+
<PayoneerLogo />
138+
)}
139+
{PAYMENT_METHOD_MAP[method.name] === 'PayPal' && <PayPalLogo />}
140+
{PAYMENT_METHOD_MAP[method.name] === 'Western Union' && (
141+
<WesternUnionLogo />
142+
)}
143+
</div>
144+
<div styleName="divider" />
145+
<div styleName="content-wrapper">
146+
<PaymentInfo
147+
icon={<IconDollar />}
148+
label="Fees"
149+
value={method.fees}
150+
isLastChild={false}
151+
/>
152+
<PaymentInfo
153+
icon={<IconWorld />}
154+
label="countries"
155+
value={`Available in ${method.countries}+ countries`}
156+
isLastChild={false}
157+
/>
158+
<PaymentInfo
159+
icon={<IconSpeed />}
160+
label="Speed"
161+
value={`Up to ${method.speed} Business Day`}
162+
isLastChild
163+
/>
164+
</div>
165+
<div styleName="button-wrapper">
166+
<Button
167+
type="secondary"
168+
theme={{ button: styles.button }}
169+
onClick={() => {
170+
setSelectedMethod(method.name);
171+
}}
172+
>
173+
SELECT {PAYMENT_METHOD_MAP[method.name]}
174+
</Button>
175+
</div>
142176
</div>
143-
<div styleName="divider" />
144-
<div styleName="content-wrapper">
145-
<PaymentInfo
146-
icon={<IconDollar />}
147-
label="Fees"
148-
value={method.fees}
149-
isLastChild={false}
150-
/>
151-
<PaymentInfo
152-
icon={<IconWorld />}
153-
label="countries"
154-
value={`Available in ${method.countries}+ countries`}
155-
isLastChild={false}
156-
/>
157-
<PaymentInfo
158-
icon={<IconSpeed />}
159-
label="Speed"
160-
value={`Up to ${method.speed} Business Day`}
161-
isLastChild
162-
/>
163-
</div>
164-
<div styleName="button-wrapper">
165-
<Button
166-
type="secondary"
167-
theme={{ button: styles.button }}
168-
onClick={() => {
169-
setSelectedMethod(method.name);
170-
}}
171-
>
172-
SELECT {PAYMENT_METHOD_MAP[method.name]}
173-
</Button>
174-
</div>
175-
</div>
176-
))}
177-
178-
{selectedMethod && (
179-
<PaymentMethod
180-
paymentMethod={selectedMethod}
181-
show
182-
handle={handle}
183-
handleClose={() => {
184-
setSelectedMethod('');
185-
}}
186-
handleConfirm={() => {
187-
handleConfirm();
188-
}}
189-
paymentService={paymentService}
190-
setPaymentService={setPaymentService}
191-
setSelectedMode={setSelectedMode}
192-
/>
193-
)}
177+
))}
178+
179+
{selectedMethod && (
180+
<PaymentMethod
181+
paymentMethod={selectedMethod}
182+
show
183+
handle={handle}
184+
handleClose={() => {
185+
setSelectedMethod('');
186+
}}
187+
handleConfirm={() => {
188+
handleConfirm();
189+
}}
190+
paymentService={paymentService}
191+
setPaymentService={setPaymentService}
192+
setSelectedMode={setSelectedMode}
193+
/>
194+
)}
195+
</div>
196+
<div styleName="info-text">
197+
The information above is gathered from each payment provider&apos;s
198+
respective website. We encourage you to do any additional information
199+
gathering you see fit prior to making a payment provider decision.
200+
</div>
194201
</div>
195-
196202
) : null
197203
}
198204
</div>

‎src/shared/components/Settings/Payment/PaymentProvider/styles.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,14 @@
156156
}
157157
}
158158

159+
.info-text {
160+
font-family: Roboto, sans-serif;
161+
font-size: 14px;
162+
line-height: 22px;
163+
margin-top: 24px;
164+
margin-bottom: 24px;
165+
}
166+
159167
.divider {
160168
margin-top: 36px;
161169
margin-bottom: 30px;

‎src/shared/components/Settings/Payment/constants.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ export const PAYMENT_PROVIDER = 'payment_provider';
66
export const PAYMENT_METHODS = [
77
{
88
name: 'payoneer',
9-
fees: 'Check with Payoneer directly for current transaction, conversion or bank fees.',
9+
fees: '$0–$3 + Currency Conversion Rates May Apply',
1010
countries: 150,
1111
speed: 1,
1212
},
1313
{
1414
name: 'paypal',
15-
fees: 'Check with PayPal directly for current transaction, conversion or bank fees.',
15+
fees: '3.49% + an international fee (non US) + a fixed fee depending upon currency',
1616
countries: 200,
1717
speed: 1,
1818
},
1919
{
2020
name: 'western-union',
21-
fees: 'Check with WesternUnion directly for current transaction, conversion or bank fees.',
21+
fees: '$8 per transaction (your bank may charge additional fees)',
2222
countries: 200,
2323
speed: 3,
2424
},

0 commit comments

Comments
 (0)