diff --git a/src/forms/StripePaymentForm/StripePaymentAddress.js b/src/forms/StripePaymentForm/StripePaymentAddress.js new file mode 100644 index 00000000..14dbe1f2 --- /dev/null +++ b/src/forms/StripePaymentForm/StripePaymentAddress.js @@ -0,0 +1,186 @@ +import React from 'react'; +import { intlShape } from 'react-intl'; +import { bool, object, string } from 'prop-types'; +import config from '../../config'; +import * as validators from '../../util/validators'; +import getCountryCodes from '../../translations/countryCodes'; +import { FieldTextInput, FieldSelect } from '../../components'; + +import css from './StripePaymentForm.css'; + +const StripePaymentAddress = props => { + const { className, intl, disabled, form, fieldId, card } = props; + + const optionalText = intl.formatMessage({ + id: 'StripePaymentAddress.optionalText', + }); + + const addressLine1Label = intl.formatMessage({ + id: 'StripePaymentAddress.addressLine1Label', + }); + const addressLine1Placeholder = intl.formatMessage({ + id: 'StripePaymentAddress.addressLine1Placeholder', + }); + const addressLine1Required = validators.required( + intl.formatMessage({ + id: 'StripePaymentAddress.addressLine1Required', + }) + ); + + const addressLine2Label = intl.formatMessage( + { id: 'StripePaymentAddress.addressLine2Label' }, + { optionalText: optionalText } + ); + + const addressLine2Placeholder = intl.formatMessage({ + id: 'StripePaymentAddress.addressLine2Placeholder', + }); + + const postalCodeLabel = intl.formatMessage({ id: 'StripePaymentAddress.postalCodeLabel' }); + const postalCodePlaceholder = intl.formatMessage({ + id: 'StripePaymentAddress.postalCodePlaceholder', + }); + const postalCodeRequired = validators.required( + intl.formatMessage({ + id: 'StripePaymentAddress.postalCodeRequired', + }) + ); + + const cityLabel = intl.formatMessage({ id: 'StripePaymentAddress.cityLabel' }); + const cityPlaceholder = intl.formatMessage({ id: 'StripePaymentAddress.cityPlaceholder' }); + const cityRequired = validators.required( + intl.formatMessage({ + id: 'StripePaymentAddress.cityRequired', + }) + ); + + const stateLabel = intl.formatMessage( + { id: 'StripePaymentAddress.stateLabel' }, + { optionalText: optionalText } + ); + const statePlaceholder = intl.formatMessage({ id: 'StripePaymentAddress.statePlaceholder' }); + + const countryLabel = intl.formatMessage({ id: 'StripePaymentAddress.countryLabel' }); + const countryPlaceholder = intl.formatMessage({ id: 'StripePaymentAddress.countryPlaceholder' }); + const countryRequired = validators.required( + intl.formatMessage({ + id: 'StripePaymentAddress.countryRequired', + }) + ); + + const handleOnChange = event => { + const value = event.target.value; + form.change('postal', value); + card.update({ value: { postalCode: value } }); + }; + + // Use tha language set in config.locale to get the correct translations of the country names + const countryCodes = getCountryCodes(config.locale); + + return ( +