Merge pull request #2742 from lukeromanowicz/bugfix/copy-billing-addr…

…ess-to-shipping

Fix handling same address checkbox in checkout - closes #2730

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Image switching fix - @pkarw (#2709)
 - Respect store code on order/PROCESS_QUEUE for shop store - @zulcom (#2727)
 - Unexpected `window.localStorage` use in user module actions - @zulcom (#2735)
+- Fix handling state of same address checkbox in the checkout - @lukeromanowicz (#2730)
 
 ### Changed / Improved
 - Improved ProductGalleryCarousel component to handle nonnumeric options id’s - @danieldomurad (#2586)

core/modules/checkout/components/Payment.ts

@@ -1,7 +1,7 @@
 import { mapState, mapGetters } from 'vuex'
 import RootState from '@vue-storefront/core/types/RootState'
-const Countries = require('@vue-storefront/i18n/resource/countries.json')
 import toString from 'lodash-es/toString'
+const Countries = require('@vue-storefront/i18n/resource/countries.json')
 
 export const Payment = {
   name: 'Payment',
@@ -37,7 +37,7 @@ export const Payment = {
     }
   },
   mounted () {
-    if (!!this.payment.firstName) {
+    if (this.payment.firstName) {
       this.initializeBillingAddress()
     } else {
       if (this.payment.company) {
@@ -46,14 +46,19 @@ export const Payment = {
     }
     this.changePaymentMethod()
   },
-  watch:{
-    shippingDetails:{
+  watch: {
+    shippingDetails: {
       handler () {
         if (this.sendToShippingAddress) {
-          this.copyShippingToBillingAddress();
+          this.copyShippingToBillingAddress()
         }
       },
       deep: true
+    },
+    sendToShippingAddress: {
+      handler () {
+        this.useShippingAddress()
+      }
     }
   },
   methods: {
@@ -123,15 +128,15 @@ export const Payment = {
     },
     useShippingAddress () {
       if (this.sendToShippingAddress) {
-        this.copyShippingToBillingAddress();
+        this.copyShippingToBillingAddress()
         this.sendToBillingAddress = false
         this.generateInvoice = false
       } else {
         this.payment = this.$store.state.checkout.paymentDetails
         this.generateInvoice = false
       }
     },
-    copyShippingToBillingAddress(){
+    copyShippingToBillingAddress () {
       this.payment = {
         firstName: this.shippingDetails.firstName,
         lastName: this.shippingDetails.lastName,

src/themes/default/components/core/blocks/Checkout/Payment.vue

@@ -37,7 +37,6 @@
             class="col-xs-12 mb15"
             id="sendToShippingAddressCheckbox"
             v-model="sendToShippingAddress"
-            @click="useShippingAddress"
             v-if="!isVirtualCart"
           >
             {{ $t('Copy address data from shipping') }}