maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create PayoutDetailsBankDetails subcomponent

Browse source
This commit is contained in:
Jenni Nurmi 2018-12-18 12:10:44 +02:00
parent 7dff8331aa
commit 338fb79f57
4 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js Normal file
View file

@ -0,0 +1,52 @@
import React from 'react';
import { bool, string } from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { StripeBankAccountTokenInputField } from '../../components';
import * as validators from '../../util/validators';
import { stripeCountryConfigs } from './PayoutDetailsForm';
import css from './PayoutDetailsForm.css';
const countryCurrency = countryCode => {
const country = stripeCountryConfigs(countryCode);
return country.currency;
};
const PayoutDetailsBankDetails = props => {
const { country, disabled } = props;
// StripeBankAccountTokenInputField handles the error messages
// internally, we just have to make sure we require a valid token
// out of the field. Therefore the empty validation message.
const bankAccountRequired = validators.required(' ');
return (
<div className={css.sectionContainer}>
<h3 className={css.subTitle}>
<FormattedMessage id="PayoutDetailsForm.bankDetails" />
</h3>
<StripeBankAccountTokenInputField
className={css.bankDetailsStripeField}
disabled={disabled}
name="bankAccountToken"
formName="PayoutDetailsForm"
country={country}
currency={countryCurrency(country)}
validate={bankAccountRequired}
/>
</div>
);
};
PayoutDetailsBankDetails.defaultProps = {
country: null,
disabled: false,
fieldId: null,
};
PayoutDetailsBankDetails.propTypes = {
country: string,
disabled: bool,
fieldId: string,
};
export default PayoutDetailsBankDetails;

4
src/forms/PayoutDetailsForm/PayoutDetailsForm.css
View file

@ -105,3 +105,7 @@
cursor: pointer;
}
}
.bankDetailsStripeField p {
@apply --marketplaceH4FontStyles;
}

28
src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
View file

@ -2,19 +2,14 @@ import React from 'react';
import { bool, object, string } from 'prop-types';
import { compose } from 'redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { StripeBankAccountTokenInputField, FieldTextInput } from '../../components';
import { FieldTextInput } from '../../components';
import * as validators from '../../util/validators';
import PayoutDetailsAddress from './PayoutDetailsAddress';
import PayoutDetailsBankDetails from './PayoutDetailsBankDetails';
import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
import { stripeCountryConfigs } from './PayoutDetailsForm';
import css from './PayoutDetailsForm.css';
const countryCurrency = countryCode => {
const country = stripeCountryConfigs(countryCode);
return country.currency;
};
const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
const { disabled, form, intl, values } = fieldRenderProps;
const { country } = values;
@ -39,11 +34,6 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
})
);
// StripeBankAccountTokenInputField handles the error messages
// internally, we just have to make sure we require a valid token
// out of the field. Therefore the empty validation message.
const bankAccountRequired = validators.required(' ');
return (
<React.Fragment>
{country ? (
@ -86,19 +76,7 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
companyAddress
/>
<div className={css.sectionContainer}>
<h3 className={css.subTitle}>
<FormattedMessage id="PayoutDetailsForm.bankDetails" />
</h3>
<StripeBankAccountTokenInputField
disabled={disabled}
name="bankAccountToken"
formName="PayoutDetailsForm"
country={country}
currency={countryCurrency(country)}
validate={bankAccountRequired}
/>
</div>
<PayoutDetailsBankDetails country={country} disabled={disabled} />
<PayoutDetailsPersonalDetails
intl={intl}

32
src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
View file

@ -1,29 +1,16 @@
import React from 'react';
import { bool, object } from 'prop-types';
import { compose } from 'redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { StripeBankAccountTokenInputField } from '../../components';
import * as validators from '../../util/validators';
import { injectIntl, intlShape } from 'react-intl';
import PayoutDetailsAddress from './PayoutDetailsAddress';
import PayoutDetailsBankDetails from './PayoutDetailsBankDetails';
import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
import { stripeCountryConfigs } from './PayoutDetailsForm';
import css from './PayoutDetailsForm.css';
const countryCurrency = countryCode => {
const country = stripeCountryConfigs(countryCode);
return country.currency;
};
const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
const { disabled, form, intl, values } = fieldRenderProps;
const { country } = values;
// StripeBankAccountTokenInputField handles the error messages
// internally, we just have to make sure we require a valid token
// out of the field. Therefore the empty validation message.
const bankAccountRequired = validators.required(' ');
return (
<React.Fragment>
<PayoutDetailsPersonalDetails
@ -33,20 +20,7 @@ const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
country={country}
/>
<PayoutDetailsAddress country={country} intl={intl} disabled={disabled} form={form} />
<div className={css.sectionContainer}>
<h3 className={css.subTitle}>
<FormattedMessage id="PayoutDetailsForm.bankDetails" />
</h3>
<StripeBankAccountTokenInputField
disabled={disabled}
name="bankAccountToken"
formName="PayoutDetailsForm"
country={country}
currency={countryCurrency(country)}
validate={bankAccountRequired}
/>
</div>
<PayoutDetailsBankDetails country={country} disabled={disabled} />
</React.Fragment>
);
};