Merge pull request #2281 from FoxComm/bug/shipping-address-after-billing-set-up

Can't select the newly added billing address in shipping block right away

Author: Jeff Mataya

demo/peacock/src/pages/checkout/billing/edit-billing.jsx

@@ -55,6 +55,7 @@ type Props = CheckoutActions & {
   creditCards: Array<CreditCardType>,
   creditCardsLoading: boolean,
   chooseCreditCard: () => Promise<*>,
+  fetchAddresses: () => Promise<*>,
 };
 
 type State = {
@@ -95,13 +96,17 @@ class EditBilling extends Component {
     }
 
     const coupon = this.props.coupon;
+    let newState = {};
+
     if (!_.isEmpty(coupon)) {
-      this.setState({ couponCode: coupon.code });
+      newState = { couponCode: coupon.code };
     }
 
-    if (this.props.data.address) {
-      this.state.billingAddressIsSame = false;
+    if (this.props.shippingAddress) {
+      newState = {...newState, billingAddressIsSame: false };
     }
+
+    this.setState(newState);
   }
 
   // Credit Card Handling
@@ -216,6 +221,7 @@ class EditBilling extends Component {
 
     return operation.then((card) => {
       this.props.fetchCreditCards();
+      this.props.fetchAddresses();
       this.props.resetBillingData();
       this.setState({ addingNew: false, cardAdded: (id === undefined) });
       return card;
@@ -462,6 +468,7 @@ class EditBilling extends Component {
           checked={this.state.billingAddressIsSame}
           onChange={this.toggleSeparateBillingAddress}
           styleName="same-address-checkbox"
+          disabled={_.isEmpty(this.props.shippingAddress)}
         >
           {t('Billing address is same as shipping')}
         </Checkbox>

demo/peacock/src/pages/checkout/checkout.jsx

@@ -219,63 +219,62 @@ class Checkout extends Component {
     const isGuestMode = isGuest(_.get(props.auth, 'user'));
     const cartFetched = props.fetchCartState.finished;
 
-    if (cartFetched) {
-      const shippingAddress = _.get(this.props.cart, 'shippingAddress', {});
-
-      return (
-        <div styleName="wrapper">
-          <div styleName="main-container">
-            <div styleName="row">
-              <div styleName="column">
-                <div styleName="shipping">
-                  <Shipping
-                    isEditing={props.editStage}
-                    onComplete={this.setShipping}
-                    addresses={this.props.addresses}
-                    fetchAddresses={this.props.fetchAddresses}
-                    shippingAddress={shippingAddress}
-                    auth={this.props.auth}
-                    isGuestMode={isGuestMode}
-                  />
-                </div>
-                <div styleName="delivery">
-                  <Delivery
-                    isEditing={props.editStage}
-                    onComplete={this.setDelivery}
-                    shippingMethods={props.shippingMethods}
-                    cart={this.props.cart}
-                    fetchShippingMethods={props.fetchShippingMethods}
-                    shippingAddressEmpty={_.isEmpty(shippingAddress)}
-                  />
-                </div>
-              </div>
-              <div styleName="payment">
-                <Billing
+    if (!cartFetched) {
+      return <Loader />;
+    }
+
+    const shippingAddress = _.get(this.props.cart, 'shippingAddress', {});
+
+    return (
+      <div styleName="wrapper">
+        <div styleName="main-container">
+          <div styleName="row">
+            <div styleName="column">
+              <div styleName="shipping">
+                <Shipping
+                  isEditing={props.editStage}
+                  onComplete={this.setShipping}
+                  addresses={this.props.addresses}
+                  fetchAddresses={this.props.fetchAddresses}
+                  shippingAddress={shippingAddress}
+                  auth={this.props.auth}
                   isGuestMode={isGuestMode}
-                  paymentMethods={_.get(props.cart, 'paymentMethods', [])}
-                  chooseCreditCard={this.props.chooseCreditCard}
-                  onComplete={this.setBilling}
+                />
+              </div>
+              <div styleName="delivery">
+                <Delivery
+                  isEditing={props.editStage}
+                  onComplete={this.setDelivery}
+                  shippingMethods={props.shippingMethods}
+                  cart={this.props.cart}
+                  fetchShippingMethods={props.fetchShippingMethods}
+                  shippingAddressEmpty={_.isEmpty(shippingAddress)}
                 />
               </div>
             </div>
-            <div styleName="order-summary">
-              {this.orderContent}
+            <div styleName="payment">
+              <Billing
+                isGuestMode={isGuestMode}
+                paymentMethods={_.get(props.cart, 'paymentMethods', [])}
+                chooseCreditCard={this.props.chooseCreditCard}
+                onComplete={this.setBilling}
+                fetchAddresses={this.props.fetchAddresses}
+              />
             </div>
           </div>
-          <div styleName="side-container">
-            {this.orderTotals}
+          <div styleName="order-summary">
+            {this.orderContent}
           </div>
-
-          <GuestAuth
-            isEditing={!this.isEmailSetForCheckout()}
-            location={this.props.location}
-          />
         </div>
-      );
-    }
+        <div styleName="side-container">
+          {this.orderTotals}
+        </div>
 
-    return (
-      <Loader />
+        <GuestAuth
+          isEditing={!this.isEmailSetForCheckout()}
+          location={this.props.location}
+        />
+      </div>
     );
   }