Prompt to update client details on invoice when closing client modal.

src/components/clients/ClientModal.vue

@@ -33,6 +33,7 @@ export default {
     },
     ...mapGetters({
       client: 'clients/client',
+      invoice: 'invoices/invoice',
     }),
   },
   watch: {
@@ -56,9 +57,26 @@ export default {
         this.$store.commit('clients/isModalOpen', false);
       }
     },
-    close() {
+    async close() {
+      await this.promptUpdateInvoice();
       this.isOpen = false;
     },
+    async promptUpdateInvoice() {
+      if (this.$route.name === 'invoice' && this.invoice.client_id === this.client.id) {
+        const confirmed = await this.$bvModal.msgBoxConfirm('Update client details on invoice?', {
+          okTitle: 'Update',
+          cancelTitle: 'Dismiss',
+          cancelVariant: 'btn-link',
+          contentClass: 'bg-base dp--24',
+        });
+        if (confirmed) {
+          this.$store.dispatch('invoices/prefillClient', {
+            client: this.client,
+            invoice: this.invoice,
+          });
+        }
+      }
+    },
   },
 };
 </script>

src/components/invoices/InvoiceClientDetails.vue

@@ -42,7 +42,6 @@
     </div>
 </template>
 <script>
-import { mapGetters } from 'vuex';
 import AppError from '@/components/form/AppError';
 import AppEditable from '@/components/form/AppEditable';
 import ClientSelector from '@/components/clients/ClientSelector';
@@ -56,11 +55,6 @@ export default {
     AppEditable,
     InvoiceClientFields,
   },
-  computed: {
-    ...mapGetters({
-      team: 'teams/team',
-    }),
-  },
   methods: {
     editClient() {
       this.$router.push({ query: { clientId: this.invoice.client_id } });
@@ -69,38 +63,9 @@ export default {
       this.$emit('update', props);
     },
     clientSelected(client) {
-      this.prefillClient(client);
+      this.$store.dispatch('invoices/prefillClient', {
-    },
+        client,
-    prefillClient(client) {
+        invoice: this.invoice,
-      this.prefillClientFields(client);
-
-      return this.updateProp({
-        client_id: client.id,
-        client_name: client.company_name,
-        client_address: client.company_address,
-        client_postal_code: client.company_postal_code,
-        client_city: client.company_city,
-        client_county: client.company_county,
-        client_country: client.company_country,
-        client_email: client.invoice_email,
-        currency: client.currency || 'USD',
-        vat_rate: client.has_vat ? this.team.vat_rate : 0,
-        bank_name: client.bank_account ? client.bank_account.bank_name : null,
-        bank_account_no: client.bank_account ? client.bank_account.account_no : null,
-      });
-    },
-    prefillClientFields(client) {
-      this.$store.dispatch('invoiceClientFields/removeInvoiceClientFields', this.invoice.id);
-
-      client.fields.forEach((field) => {
-        this.$store.dispatch('invoiceClientFields/addInvoiceClientField', {
-          invoiceId: this.invoice.id,
-          props: {
-            label: field.label,
-            value: field.value,
-            client_field_id: field.id,
-          },
-        });
       });
     },
   },

src/store/invoices.js

@@ -133,6 +133,36 @@ export default {
         commit('setErrors', err.errors);
       }
     },
+    prefillClient({ dispatch, rootGetters }, payload) {
+      const client = payload.client;
+      dispatch('invoiceClientFields/removeInvoiceClientFields', payload.invoice.id, { root: true });
+
+      client.fields.forEach((field) => {
+        dispatch('invoiceClientFields/addInvoiceClientField', {
+          invoiceId: payload.invoice.id,
+          props: {
+            label: field.label,
+            value: field.value,
+            client_field_id: field.id,
+          },
+        }, { root: true });
+      });
+
+      return dispatch('updateInvoice', {
+        client_id: client.id,
+        client_name: client.company_name,
+        client_address: client.company_address,
+        client_postal_code: client.company_postal_code,
+        client_city: client.company_city,
+        client_county: client.company_county,
+        client_country: client.company_country,
+        client_email: client.invoice_email,
+        currency: client.currency || rootGetters['teams/team'].currency || 'USD',
+        vat_rate: client.has_vat ? rootGetters['teams/team'].vat_rate : 0,
+        bank_name: client.bank_account ? client.bank_account.bank_name : null,
+        bank_account_no: client.bank_account ? client.bank_account.account_no : null,
+      });
+    },
   },
   getters: {
     invoice(state) {