From bfba249c1921aadd561a7c94a209ffe1906834ba Mon Sep 17 00:00:00 2001 From: "Eugene Sypachev (@Axblade)" Date: Thu, 22 Jun 2017 17:05:39 +0300 Subject: [PATCH 1/3] bug fixed --- demo/peacock/src/modules/checkout.js | 9 +++++++++ .../src/pages/checkout/billing/edit-billing.jsx | 11 ++++++++--- demo/peacock/src/pages/checkout/checkout.jsx | 2 ++ demo/peacock/src/pages/checkout/shipping/shipping.jsx | 4 +++- 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/demo/peacock/src/modules/checkout.js b/demo/peacock/src/modules/checkout.js index 97044e89c5..1ed5b4e0df 100644 --- a/demo/peacock/src/modules/checkout.js +++ b/demo/peacock/src/modules/checkout.js @@ -463,6 +463,7 @@ const initialState: CheckoutState = { shippingModalVisible: false, deliveryModalVisible: false, paymentModalVisible: false, + fetchAddressesRequired: false, }; function sortAddresses(addresses: Array
): Array
{ @@ -521,6 +522,7 @@ const reducer = createReducer({ return { ...state, addresses, + fetchAddressesRequired: false, }; }, [cleanDeletedAddresses]: (state) => { @@ -604,6 +606,13 @@ const reducer = createReducer({ creditCard, }; }, + [_addCreditCard.succeeded]: (state, creditCard) => { + return { + ...state, + creditCard, + fetchAddressesRequired: true, + }; + }, [_resetCreditCard.succeeded]: (state) => { return { ...state, diff --git a/demo/peacock/src/pages/checkout/billing/edit-billing.jsx b/demo/peacock/src/pages/checkout/billing/edit-billing.jsx index f61e029b9e..c35abf9d33 100644 --- a/demo/peacock/src/pages/checkout/billing/edit-billing.jsx +++ b/demo/peacock/src/pages/checkout/billing/edit-billing.jsx @@ -95,13 +95,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 @@ -462,6 +466,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')} diff --git a/demo/peacock/src/pages/checkout/checkout.jsx b/demo/peacock/src/pages/checkout/checkout.jsx index 05eb9a4c27..9e0286aa73 100644 --- a/demo/peacock/src/pages/checkout/checkout.jsx +++ b/demo/peacock/src/pages/checkout/checkout.jsx @@ -221,6 +221,7 @@ class Checkout extends Component { if (cartFetched) { const shippingAddress = _.get(this.props.cart, 'shippingAddress', {}); + console.log('billing', this.props); return (
@@ -233,6 +234,7 @@ class Checkout extends Component { onComplete={this.setShipping} addresses={this.props.addresses} fetchAddresses={this.props.fetchAddresses} + fetchAddressesRequired={this.props.fetchAddressesRequired} shippingAddress={shippingAddress} auth={this.props.auth} isGuestMode={isGuestMode} diff --git a/demo/peacock/src/pages/checkout/shipping/shipping.jsx b/demo/peacock/src/pages/checkout/shipping/shipping.jsx index 92d04e8263..780ea6ee9e 100644 --- a/demo/peacock/src/pages/checkout/shipping/shipping.jsx +++ b/demo/peacock/src/pages/checkout/shipping/shipping.jsx @@ -59,10 +59,12 @@ class Shipping extends Component { } componentWillReceiveProps(nextProps: Props) { + console.log(this.props, nextProps); if (nextProps.auth !== this.props.auth) { this.setState({ fetchedAddresses: false }); } - if (nextProps.cartChangeState.finished && !this.state.fetchedAddresses) { + if (nextProps.cartChangeState.finished && !this.state.fetchedAddresses || nextProps.fetchAddressesRequired) { + console.log('fetching addresses'); this.fetchAddresses(); } } From 2175acddd71c0ad3a80f1138478701deadc9fd88 Mon Sep 17 00:00:00 2001 From: "Eugene Sypachev (@Axblade)" Date: Thu, 22 Jun 2017 17:10:55 +0300 Subject: [PATCH 2/3] some refactoring and flow --- demo/peacock/src/modules/checkout.js | 1 + demo/peacock/src/pages/checkout/checkout.jsx | 97 +++++++++---------- .../src/pages/checkout/shipping/shipping.jsx | 6 +- 3 files changed, 51 insertions(+), 53 deletions(-) diff --git a/demo/peacock/src/modules/checkout.js b/demo/peacock/src/modules/checkout.js index 1ed5b4e0df..092ba190da 100644 --- a/demo/peacock/src/modules/checkout.js +++ b/demo/peacock/src/modules/checkout.js @@ -30,6 +30,7 @@ export type CheckoutState = { editStage: EditStage, shippingAddress: ShippingAddress, billingAddress: ShippingAddress, + fetchAddressesRequired: boolean, }; export const selectCreditCard = createAction('CHECKOUT_SET_CREDIT_CARD'); diff --git a/demo/peacock/src/pages/checkout/checkout.jsx b/demo/peacock/src/pages/checkout/checkout.jsx index 9e0286aa73..abfd9086dd 100644 --- a/demo/peacock/src/pages/checkout/checkout.jsx +++ b/demo/peacock/src/pages/checkout/checkout.jsx @@ -219,65 +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', {}); - console.log('billing', this.props); - - return ( -
-
-
-
-
- -
-
- -
-
-
- ; + } + + const shippingAddress = _.get(this.props.cart, 'shippingAddress', {}); + + return ( +
+
+
+
+
+ +
+
+
-
- {this.orderContent} +
+
-
- {this.orderTotals} +
+ {this.orderContent}
- -
- ); - } +
+ {this.orderTotals} +
- return ( - + +
); } diff --git a/demo/peacock/src/pages/checkout/shipping/shipping.jsx b/demo/peacock/src/pages/checkout/shipping/shipping.jsx index 780ea6ee9e..e7447b6950 100644 --- a/demo/peacock/src/pages/checkout/shipping/shipping.jsx +++ b/demo/peacock/src/pages/checkout/shipping/shipping.jsx @@ -59,12 +59,12 @@ class Shipping extends Component { } componentWillReceiveProps(nextProps: Props) { - console.log(this.props, nextProps); if (nextProps.auth !== this.props.auth) { this.setState({ fetchedAddresses: false }); } - if (nextProps.cartChangeState.finished && !this.state.fetchedAddresses || nextProps.fetchAddressesRequired) { - console.log('fetching addresses'); + if (nextProps.cartChangeState.finished && + !this.state.fetchedAddresses || + nextProps.fetchAddressesRequired) { this.fetchAddresses(); } } From 26cb0bba2e82ae905e01b8d3c27c3342edeeecda Mon Sep 17 00:00:00 2001 From: "Eugene Sypachev (@Axblade)" Date: Fri, 23 Jun 2017 23:51:58 +0300 Subject: [PATCH 3/3] simplify approach --- demo/peacock/src/modules/checkout.js | 10 ---------- .../src/pages/checkout/billing/edit-billing.jsx | 2 ++ demo/peacock/src/pages/checkout/checkout.jsx | 2 +- demo/peacock/src/pages/checkout/shipping/shipping.jsx | 4 +--- 4 files changed, 4 insertions(+), 14 deletions(-) diff --git a/demo/peacock/src/modules/checkout.js b/demo/peacock/src/modules/checkout.js index 092ba190da..97044e89c5 100644 --- a/demo/peacock/src/modules/checkout.js +++ b/demo/peacock/src/modules/checkout.js @@ -30,7 +30,6 @@ export type CheckoutState = { editStage: EditStage, shippingAddress: ShippingAddress, billingAddress: ShippingAddress, - fetchAddressesRequired: boolean, }; export const selectCreditCard = createAction('CHECKOUT_SET_CREDIT_CARD'); @@ -464,7 +463,6 @@ const initialState: CheckoutState = { shippingModalVisible: false, deliveryModalVisible: false, paymentModalVisible: false, - fetchAddressesRequired: false, }; function sortAddresses(addresses: Array
): Array
{ @@ -523,7 +521,6 @@ const reducer = createReducer({ return { ...state, addresses, - fetchAddressesRequired: false, }; }, [cleanDeletedAddresses]: (state) => { @@ -607,13 +604,6 @@ const reducer = createReducer({ creditCard, }; }, - [_addCreditCard.succeeded]: (state, creditCard) => { - return { - ...state, - creditCard, - fetchAddressesRequired: true, - }; - }, [_resetCreditCard.succeeded]: (state) => { return { ...state, diff --git a/demo/peacock/src/pages/checkout/billing/edit-billing.jsx b/demo/peacock/src/pages/checkout/billing/edit-billing.jsx index c35abf9d33..b5fd0cb96d 100644 --- a/demo/peacock/src/pages/checkout/billing/edit-billing.jsx +++ b/demo/peacock/src/pages/checkout/billing/edit-billing.jsx @@ -55,6 +55,7 @@ type Props = CheckoutActions & { creditCards: Array, creditCardsLoading: boolean, chooseCreditCard: () => Promise<*>, + fetchAddresses: () => Promise<*>, }; type State = { @@ -220,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; diff --git a/demo/peacock/src/pages/checkout/checkout.jsx b/demo/peacock/src/pages/checkout/checkout.jsx index abfd9086dd..b96212a986 100644 --- a/demo/peacock/src/pages/checkout/checkout.jsx +++ b/demo/peacock/src/pages/checkout/checkout.jsx @@ -236,7 +236,6 @@ class Checkout extends Component { onComplete={this.setShipping} addresses={this.props.addresses} fetchAddresses={this.props.fetchAddresses} - fetchAddressesRequired={this.props.fetchAddressesRequired} shippingAddress={shippingAddress} auth={this.props.auth} isGuestMode={isGuestMode} @@ -259,6 +258,7 @@ class Checkout extends Component { paymentMethods={_.get(props.cart, 'paymentMethods', [])} chooseCreditCard={this.props.chooseCreditCard} onComplete={this.setBilling} + fetchAddresses={this.props.fetchAddresses} />
diff --git a/demo/peacock/src/pages/checkout/shipping/shipping.jsx b/demo/peacock/src/pages/checkout/shipping/shipping.jsx index e7447b6950..92d04e8263 100644 --- a/demo/peacock/src/pages/checkout/shipping/shipping.jsx +++ b/demo/peacock/src/pages/checkout/shipping/shipping.jsx @@ -62,9 +62,7 @@ class Shipping extends Component { if (nextProps.auth !== this.props.auth) { this.setState({ fetchedAddresses: false }); } - if (nextProps.cartChangeState.finished && - !this.state.fetchedAddresses || - nextProps.fetchAddressesRequired) { + if (nextProps.cartChangeState.finished && !this.state.fetchedAddresses) { this.fetchAddresses(); } }