Move StripePaymentAddress to components

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);
+  }
+}

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 (
-    <div className={className ? className : css.sectionContainer}>
-      <FieldTextInput
-        id={`${fieldId}.addressLine1`}
-        name="addressLine1"
-        disabled={disabled}
-        className={css.field}
-        type="text"
-        autoComplete="billing address-line1"
-        label={addressLine1Label}
-        placeholder={addressLine1Placeholder}
-        validate={addressLine1Required}
-        onUnmount={() => form.change('addressLine1', undefined)}
-      />
-
-      <FieldTextInput
-        id={`${fieldId}.addressLine2`}
-        name="addressLine2"
-        disabled={disabled}
-        className={css.field}
-        type="text"
-        autoComplete="billing address-line2"
-        label={addressLine2Label}
-        placeholder={addressLine2Placeholder}
-        onUnmount={() => form.change('addressLine2', undefined)}
-      />
+    <div className={className ? className : css.root}>
+      <div className={css.formRow}>
+        <FieldTextInput
+          id={`${fieldId}.addressLine1`}
+          name="addressLine1"
+          disabled={disabled}
+          className={css.field}
+          type="text"
+          autoComplete="billing address-line1"
+          label={addressLine1Label}
+          placeholder={addressLine1Placeholder}
+          validate={addressLine1Required}
+          onUnmount={() => form.change('addressLine1', undefined)}
+        />
 
+        <FieldTextInput
+          id={`${fieldId}.addressLine2`}
+          name="addressLine2"
+          disabled={disabled}
+          className={css.field}
+          type="text"
+          autoComplete="billing address-line2"
+          label={addressLine2Label}
+          placeholder={addressLine2Placeholder}
+          onUnmount={() => form.change('addressLine2', undefined)}
+        />
+      </div>
       <div className={css.formRow}>
         <FieldTextInput
           id={`${fieldId}.postalCode`}
           name="postal"
           disabled={disabled}
-          className={css.postalCode}
+          className={css.field}
           type="text"
           autoComplete="billing postal-code"
           label={postalCodeLabel}
@@ -123,7 +124,7 @@ const StripePaymentAddress = props => {
           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)}
         />
       </div>
+      <div className={css.formRow}>
+        <FieldTextInput
+          id={`${fieldId}.state`}
+          name="state"
+          disabled={disabled}
+          className={css.field}
+          type="text"
+          autoComplete="billing address-level1"
+          label={stateLabel}
+          placeholder={statePlaceholder}
+          onUnmount={() => form.change('state', undefined)}
+        />
 
-      <FieldTextInput
-        id={`${fieldId}.state`}
-        name="state"
-        disabled={disabled}
-        className={css.field}
-        type="text"
-        autoComplete="billing address-level1"
-        label={stateLabel}
-        placeholder={statePlaceholder}
-        onUnmount={() => form.change('state', undefined)}
-      />
-
-      <FieldSelect
-        id={`${fieldId}.country`}
-        name="country"
-        disabled={disabled}
-        className={css.field}
-        label={countryLabel}
-        validate={countryRequired}
-      >
-        <option disabled value="">
-          {countryPlaceholder}
-        </option>
-        {countryCodes.map(country => {
-          return (
-            <option key={country.code} value={country.code}>
-              {country.name}
-            </option>
-          );
-        })}
-      </FieldSelect>
+        <FieldSelect
+          id={`${fieldId}.country`}
+          name="country"
+          disabled={disabled}
+          className={css.field}
+          label={countryLabel}
+          validate={countryRequired}
+        >
+          <option disabled value="">
+            {countryPlaceholder}
+          </option>
+          {countryCodes.map(country => {
+            return (
+              <option key={country.code} value={country.code}>
+                {country.name}
+              </option>
+            );
+          })}
+        </FieldSelect>
+      </div>
     </div>
   );
 };

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';
 
 //////////////////////////////////////////////

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;
-}

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}
             </div>
           </React.Fragment>
+        ) : hasDefaultPaymentMethod ? (
+          <div>This will contain {`<SavedCardPaymentDetails />`} component at some point.</div>
         ) : 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);