diff --git a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss index b714b051d..5f60d827c 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss @@ -15,7 +15,7 @@ @include shadow; background-color: $woot-snackbar-bg; border-radius: $space-smaller; - display: inline-block; + display: inline-flex; margin-bottom: $space-small; max-width: 40rem; min-height: 3rem; diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue index ecfebe5e0..ef475e7db 100644 --- a/app/javascript/dashboard/components/Snackbar.vue +++ b/app/javascript/dashboard/components/Snackbar.vue @@ -4,6 +4,11 @@
{{ message }}
+
+ + {{ action.message }} + +
@@ -12,6 +17,10 @@ export default { props: { message: { type: String, default: '' }, + action: { + type: Object, + default: () => {}, + }, showButton: Boolean, duration: { type: [String, Number], diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue index 3ab3d67fc..d0d57370a 100644 --- a/app/javascript/dashboard/components/SnackbarContainer.vue +++ b/app/javascript/dashboard/components/SnackbarContainer.vue @@ -4,6 +4,7 @@ v-for="snackMessage in snackMessages" :key="snackMessage.key" :message="snackMessage.message" + :action="snackMessage.action" /> @@ -35,8 +36,12 @@ export default { bus.$off('newToastMessage', this.onNewToastMessage); }, methods: { - onNewToastMessage(message) { - this.snackMessages.push({ key: new Date().getTime(), message }); + onNewToastMessage(message, action) { + this.snackMessages.push({ + key: new Date().getTime(), + message, + action, + }); window.setTimeout(() => { this.snackMessages.splice(0, 1); }, this.duration); diff --git a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js index 639dc239a..9bf61c59c 100644 --- a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js +++ b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js @@ -84,7 +84,8 @@ describe('MoveActions', () => { expect(window.bus.$emit).toBeCalledWith( 'newToastMessage', - 'This conversation is muted for 6 hours' + 'This conversation is muted for 6 hours', + undefined ); }); }); @@ -109,7 +110,8 @@ describe('MoveActions', () => { expect(window.bus.$emit).toBeCalledWith( 'newToastMessage', - 'This conversation is unmuted' + 'This conversation is unmuted', + undefined ); }); }); diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index baa7c8d7d..976f4c53e 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -169,6 +169,7 @@ "SUBMIT": "Send message", "CANCEL": "Cancel", "SUCCESS_MESSAGE": "Message sent!", + "GO_TO_CONVERSATION": "View", "ERROR_MESSAGE": "Couldn't send! try again" } }, diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue index b0251df18..923e6d408 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue @@ -174,7 +174,6 @@ export default { onSuccess() { this.$emit('success'); }, - async handleSubmit() { this.$v.$touch(); if (this.$v.$invalid) { @@ -182,9 +181,17 @@ export default { } try { const payload = this.getNewConversation; - await this.onSubmit(payload); + const data = await this.onSubmit(payload); + const action = { + type: 'link', + to: `/app/accounts/${data.account_id}/conversations/${data.id}`, + message: this.$t('NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'), + }; this.onSuccess(); - this.showAlert(this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE')); + this.showAlert( + this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), + action + ); } catch (error) { if (error instanceof ExceptionWithMessage) { this.showAlert(error.data); diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue index c0d342d7a..f8c3b23a3 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue @@ -49,7 +49,11 @@ export default { this.$emit('cancel'); }, async onSubmit(contactItem) { - await this.$store.dispatch('contactConversations/create', contactItem); + const data = await this.$store.dispatch( + 'contactConversations/create', + contactItem + ); + return data; }, }, }; diff --git a/app/javascript/dashboard/store/modules/contactConversations.js b/app/javascript/dashboard/store/modules/contactConversations.js index 3c3280721..49eeabdc4 100644 --- a/app/javascript/dashboard/store/modules/contactConversations.js +++ b/app/javascript/dashboard/store/modules/contactConversations.js @@ -39,6 +39,7 @@ export const actions = { id: contactId, data, }); + return data; } catch (error) { throw new Error(error); } finally { diff --git a/app/javascript/shared/mixins/alertMixin.js b/app/javascript/shared/mixins/alertMixin.js index ba0064f44..50ace13f1 100644 --- a/app/javascript/shared/mixins/alertMixin.js +++ b/app/javascript/shared/mixins/alertMixin.js @@ -1,7 +1,7 @@ export default { methods: { - showAlert(message) { - bus.$emit('newToastMessage', message); + showAlert(message, action) { + bus.$emit('newToastMessage', message, action); }, }, };