diff --git a/src/components/StripePaymentAddress/StripePaymentAddress.css b/src/components/StripePaymentAddress/StripePaymentAddress.css new file mode 100644 index 00000000..887d06f4 --- /dev/null +++ b/src/components/StripePaymentAddress/StripePaymentAddress.css @@ -0,0 +1,35 @@ +@import '../../marketplace.css'; + +.root { + display: flex; + flex-direction: column; +} + +.paymentAddressField { + padding-top: 38px; +} + +.formRow { + /* This container uses flexbox layout */ + display: flex; + justify-content: space-between; + width: 100%; + + /* parent aka root is flexbox, this container takes all available space */ + flex-grow: 1; + flex-shrink: 0; + flex-wrap: wrap; + + @media (--viewportSmall) { + flex-wrap: no-wrap; + } +} + +.field { + width: 100%; + margin-top: 24px; + + @media (--viewportSmall) { + width: calc(50% - 12px); + } +} diff --git a/src/forms/StripePaymentForm/StripePaymentAddress.js b/src/components/StripePaymentAddress/StripePaymentAddress.js similarity index 66% rename from src/forms/StripePaymentForm/StripePaymentAddress.js rename to src/components/StripePaymentAddress/StripePaymentAddress.js index 14dbe1f2..b31dce65 100644 --- a/src/forms/StripePaymentForm/StripePaymentAddress.js +++ b/src/components/StripePaymentAddress/StripePaymentAddress.js @@ -6,7 +6,7 @@ import * as validators from '../../util/validators'; import getCountryCodes from '../../translations/countryCodes'; import { FieldTextInput, FieldSelect } from '../../components'; -import css from './StripePaymentForm.css'; +import css from './StripePaymentAddress.css'; const StripePaymentAddress = props => { const { className, intl, disabled, form, fieldId, card } = props; @@ -78,38 +78,39 @@ const StripePaymentAddress = props => { const countryCodes = getCountryCodes(config.locale); return ( -
- form.change('addressLine1', undefined)} - /> - - form.change('addressLine2', undefined)} - /> +
+
+ form.change('addressLine1', undefined)} + /> + form.change('addressLine2', undefined)} + /> +
{ id={`${fieldId}.city`} name="city" disabled={disabled} - className={css.city} + className={css.field} type="text" autoComplete="billing address-level2" label={cityLabel} @@ -132,38 +133,39 @@ const StripePaymentAddress = props => { onUnmount={() => form.change('city', undefined)} />
+
+ form.change('state', undefined)} + /> - form.change('state', undefined)} - /> - - - - {countryCodes.map(country => { - return ( - - ); - })} - + + + {countryCodes.map(country => { + return ( + + ); + })} + +
); }; diff --git a/src/components/index.js b/src/components/index.js index ba9a7c7e..ca116c47 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -139,6 +139,7 @@ export { default as SearchMapPriceLabel } from './SearchMapPriceLabel/SearchMapP export { default as SearchResultsPanel } from './SearchResultsPanel/SearchResultsPanel'; export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter'; export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter'; +export { default as StripePaymentAddress } from './StripePaymentAddress/StripePaymentAddress'; export { default as UserCard } from './UserCard/UserCard'; ////////////////////////////////////////////// diff --git a/src/forms/StripePaymentForm/StripePaymentForm.css b/src/forms/StripePaymentForm/StripePaymentForm.css index 786ef362..d3eb82be 100644 --- a/src/forms/StripePaymentForm/StripePaymentForm.css +++ b/src/forms/StripePaymentForm/StripePaymentForm.css @@ -143,29 +143,3 @@ .missingStripeKey { color: var(--failColor); } - -.paymentAddressField { - padding-top: 38px; -} - -.formRow { - display: flex; - justify-content: space-between; - flex-shrink: 0; - width: 100%; - margin-bottom: 24px; -} - -.postalCode { - margin-top: 24px; - width: calc(40% - 9px); -} - -.city { - margin-top: 24px; - width: calc(60% - 9px); -} - -.field { - margin-top: 24px; -} diff --git a/src/forms/StripePaymentForm/StripePaymentForm.js b/src/forms/StripePaymentForm/StripePaymentForm.js index b9025536..98b6c93d 100644 --- a/src/forms/StripePaymentForm/StripePaymentForm.js +++ b/src/forms/StripePaymentForm/StripePaymentForm.js @@ -9,8 +9,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import { Form as FinalForm } from 'react-final-form'; import classNames from 'classnames'; import config from '../../config'; -import { Form, PrimaryButton, FieldTextInput } from '../../components'; -import StripePaymentAddress from './StripePaymentAddress'; +import { Form, PrimaryButton, FieldTextInput, StripePaymentAddress } from '../../components'; import css from './StripePaymentForm.css'; /** @@ -105,10 +104,11 @@ class StripePaymentForm extends Component { } if (config.stripe.publishableKey) { + const { onStripeInitialized, hasHandledCardPayment, hasDefaultPaymentMethod } = this.props; this.stripe = window.Stripe(config.stripe.publishableKey); - this.props.onStripeInitialized(this.stripe); + onStripeInitialized(this.stripe); - if (!this.props.hasHandledCardPayment) { + if (!(hasHandledCardPayment || hasDefaultPaymentMethod)) { const elements = this.stripe.elements(stripeElementsOptions); this.card = elements.create('card', { style: cardStyles }); this.card.mount(this.cardContainer); @@ -182,11 +182,13 @@ class StripePaymentForm extends Component { handleSubmit, form, hasHandledCardPayment, + hasDefaultPaymentMethod, } = formRenderProps; this.finalFormAPI = form; - const billingDetailsNeeded = !(confirmPaymentError || hasHandledCardPayment); - const cardInputNeedsAttention = !(hasHandledCardPayment || this.state.cardValueValid); + const billingDetailsKnown = hasHandledCardPayment || hasDefaultPaymentMethod; + const billingDetailsNeeded = !(billingDetailsKnown || confirmPaymentError); + const cardInputNeedsAttention = !(billingDetailsKnown || this.state.cardValueValid); const submitDisabled = invalid || cardInputNeedsAttention || submitInProgress; const hasCardError = this.state.error && !submitInProgress; const hasPaymentErrors = handleCardPaymentError || confirmPaymentError; @@ -276,6 +278,8 @@ class StripePaymentForm extends Component { {billingAddress}
+ ) : hasDefaultPaymentMethod ? ( +
This will contain {``} component at some point.
) : null} {initiateOrderError ? ( @@ -335,6 +339,7 @@ StripePaymentForm.defaultProps = { inProgress: false, showInitialMessageInput: true, hasHandledCardPayment: false, + hasDefaultPaymentMethod: false, initiateOrderError: null, handleCardPaymentError: null, confirmPaymentError: null, @@ -354,6 +359,7 @@ StripePaymentForm.propTypes = { authorDisplayName: string.isRequired, showInitialMessageInput: bool, hasHandledCardPayment: bool, + hasDefaultPaymentMethod: bool, }; export default injectIntl(StripePaymentForm);